Amarans
0415 JavaScript | jQuery 속성 제어 API / 조회 범위 제한 / Node객체| 본문
jQuery 속성 제어 API
속성제어
jQuery 객체의 메소드 중 setAttribute, getAttribute에 대응되는 메소드는 attr이다. 또한 removeAttribute에 대응되는 메소드로는 removeAttr이 있다.
<a id="target" href="http://opentutorials.org">opentutorials</a>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script>
var t = $('#target');
console.log(t.attr('href')); //http://opentutorials.org
t.attr('title', 'opentutorials.org'); // title 속성의 값을 설정한다.
t.removeAttr('title'); // title 속성을 제거한다.
</script>attribute와 property
DOM과 마찬가지로 jQuery도 속성(attribute)과 프로퍼티를 구분한다. 속성은 attr, 프로퍼티는 prop 메소드를 사용한다.
<a id="t1" href="./demo.html">opentutorials</a>
<input id="t2" type="checkbox" checked="checked" />
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script>
// 현재 문서의 URL이 아래와 같다고 했을 때
// http://localhost/jQuery_attribute_api/demo2.html
var t1 = $('#t1');
console.log(t1.attr('href')); // ./demo.html
console.log(t1.prop('href')); // http://localhost/jQuery_attribute_api/demo.html
var t2 = $('#t2');
console.log(t2.attr('checked')); // checked
console.log(t2.prop('checked')); // true
</script>jQuery를 이용하면 프로퍼티의 이름으로 어떤 것을 사용하건 올바른 것으로 교정해준다. 이런 것이 라이브러리를 사용하는 의의라고 할수 있겠다.
<div id="t1">opentutorials</div>
<div id="t2">opentutorials</div>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script>
$('#t1').prop('className', 'important');
$('#t2').prop('class', 'current');
</script>jQuery 조회 범위 제한
Element 객체에서 getElementsBy* 메소드를 실행하면 조회의 범위가 그 객체의 하위 엘리먼트로 제한된다는 것을 알아봤다. jQuery에서는 어떻게 이러한 작업을 할 수 있을까?
selector context
가장 간편한 방법은 조회할 때 조회 범위를 제한하는 것이다. 그 제한된 범위를 jQuery에서는 selector context라고 한다.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
</head>
<body>
<ul>
<li class="marked">html</li>
<li>css</li>
<li id="active">JavaScript
<ul>
<li>JavaScript Core</li>
<li class="marked">DOM</li>
<li class="marked">BOM</li>
</ul>
</li>
</ul>
<script>
// $(".marked").css( "background-color", "red" );
//$( "#active .marked").css( "background-color", "red" );
//$( "#active").find('.marked').css( "background-color", "red" );
$('#active').css('color','blue').find('.marked').css( "background-color", "red" );
//find를 너무 복잡하게 사용하면 코드를 유지보수하기 어렵게 된다.
</script>
</body>
</html>
Node 객체
주요기능
Node 객체의 주요한 임무는 아래와 같다.
관계
엘리먼트는 서로 부모, 자식, 혹은 형제자매 관계로 연결되어 있다. 각각의 Node가 다른 Node와 연결된 정보를 보여주는 API를 통해서 문서를 프로그래밍적으로 탐색할 수 있다.
- Node.childNodes
- Node.firstChild
- Node.lastChild
- Node.nextSibling
- Node.previousSibling
- Node.contains()
- Node.hasChildNodes()
노드의 종류
Node 객체는 모든 구성요소를 대표하는 객체이기 때문에 각각의 구성요소가 어떤 카테고리에 속하는 것인지를 알려주는 식별자를 제공한다.
- Node.nodeType
- Node.nodeName
값
Node 객체의 값을 제공하는 API
- Node.nodeValue
- Node.textContent
자식관리
Node 객체의 자식을 추가하는 방법에 대한 API
- Node.appendChild()
- Node.removeChild()
'JavaScript2' 카테고리의 다른 글
| 0420 JavaScript | jQuery 노드 변경 API , 문자열로 노드 제어 , Document 객체 | (0) | 2020.04.20 |
|---|---|
| 0416 JavaScript | Node 관계 , 종류 , 변경 API | (0) | 2020.04.16 |
| 0414 JavaScript | Element객체 /식별자 / 조회 / 속성 API | (0) | 2020.04.14 |
| 0413 JavaScript | HTMLElement , HTMLCollection , jQuery 객체 | (0) | 2020.04.13 |
| 0409 JavaScript | Dom , 제어대상찿기 , jQuery | (0) | 2020.04.09 |
'JavaScript2' Related Articles
more
Comments