Element
- Element > HTMLElement > HTMLLIElement 와 같이 부모자식 관계가 있으며 Element는 이 중 가장 높은 위치의 부모이다.
DOM
- HTML 뿐만아니라 XML, SVG, XUL과 같은 마크업 랭귀지의 표준이다.
식별자 API
- Element.tagName - 읽기전용, 쓰기 불가능
- Element.id - 읽고 쓰기 가능
예시
<! DOCTYPE html>
<html>
<body>
<li id = "apple" >apple</li>
<li>banana</li>
<li>grape</li>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
var apple = document.getElementById('apple');
document.write(apple.tagName); //LI
document.write(apple.id); //apple
apple.id = 'fruit'; //id 값 fruit로 변경
document.write(apple.id); // fruit
</script>
</body>
</html>- Element.className - 읽고 쓰기 가능
- Element.classList - 읽고 쓰기 가능
- 유사배열 형태로 사용되기 때문에 className보다 사용하기 편리하다.
예시
<! DOCTYPE html>
<html>
<body>
<li id = "apple">apple</li>
<li>banana</li>
<li>grape</li>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
var apple = document.getElementById('apple');
apple.className = "fruit delicious"; //class 설정
apple.className = "fruit"; //class 삭제
apple.className = apple.className + " delicious"; //class 추가
//현재 class = "fruit delicious"
document.write(apple.classList[0]); //fruit
apple.classList.add("add");
document.write(apple.classList[2]); //add
apple.classList.remove("delicious");
document.write(apple.classList[1]); //add
</script>
</body>
</html>조회 API
- document.getElementsBy~
- 문서 전체에서 Element를 조회한다. - Element.getElementsBy~
- Element 하위에서 Element를 조회한다.
속성 API
- Element.getAttribute(name) - name 값을 가져온다.
- Element.setAttribute(name, value) - name 값을 value로 설정한다.
- Element.hasAttribute(name); - name 값이 있는지 확인한다.
- Element.removeAttribute(name); - name 값을 삭제한다.
예시
<! DOCTYPE html>
<html>
<body>
<li id = "apple" class = "fruit">apple</li>
<li>banana</li>
<li>grape</li>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
var apple = document.getElementById('apple');
document.write(apple.getAttribute('class')); //fruit
apple.setAttribute('class','delicious');
document.write(apple.getAttribute('class')); //delicious
document.write(apple.hasAttribute('class')); //true
apple.removeAttribute('class');
document.write(apple.getAttribute('class')); //null
</script>
</body>
</html>attribute 방식 vs property 방식
attribute 방식 특징
- 이름이 html속성의 이름과 같은 이름을 사용한다.
property 방식 특징
- 이름이 html속성의 이름과 다를 수 있다.
- 예를 들어 class -> className - 속도가 빠르다.
두 방식이 같은 것을 불렀지만 다른 값을 출력하기도 한다.
상대주소를 불러올 때 attribute는 상대 주소 그대로를, property는 절대주소로 바꾸어 출력한다.
jQuery 속성 제어 API
- setAttribute, getAttribut -> .attr
- removeAttribute -> .removeAttr
예시
<! DOCTYPE html>
<html>
<body>
<li id = "apple">apple</li>
<li>banana</li>
<li>grape</li>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
var apple = $('#apple');
apple.attr('class','fruit'); //class를 fruit로 설정
document.write(apple.attr('class')); //fruit
apple.removeAttr('class'); //class 삭제
</script>
</body>
</html>jQuery에서 property vs attribute
- jQuery 에서는 property 값을 사용하려면 .prop을 attribute 값을 사용하려면 .attr을 사용한다.
- 특징은 Element에서와 같지만 한가지 다른점은 property에서는 이름이 html 속성과 다르다는 특징이 있었는데 jQuery에서는 이를 내부적으로 보정해준다는 특징이 있다.
jQuery 조회 범위 제한
- Selector context 사용
- css selector 사용
- find 사용
- chaining을 활용할 때 유용하지만 너무 복잡해지면 유지보수하기 어렵게 된다.
예시
<! DOCTYPE html>
<html>
<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 src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(".marked","#active").css('color','red'); //selector context 사용
$("#active .marked").css('color','red'); //css selector 사용
$("#active").find('.marked').css('color','red'); //find 사용
$('#active').css('color','blue').find('.marked').css( "background-color", "red" ); //find의 chaining 활용
</script>
</body>
</html>