TIL

<자바스크립트 Javascript> DOM (2)

낭만인 2022. 1. 2. 22:32

- 요소에 접근하기
1) 하나의 요소에 접근(DOM Query)
*document.getElementById(id) - id 어트리뷰트 값으로 요소 노드를 한 개 선택하여 가져옴. 복수개 선택 시 첫번째 요소만 반환함.

*document.querySelector(cssSelector) - CSS 셀렉터를 사용하여 요소 노드를 한 개 선택하여 가져옴. 복수개 선택 시 첫번째 요소만 반환함. IE8 이상의 브라우저에서만 사용가능.

2) 여러 개의 요소에 접근(DOM Query)
*document.getElementsByClassName(class) - class 어트리뷰트 값으로 요소 노드를 모두 선택하여 가져옴. 공백으로 구분하면 여러 개의 class 지정 가능함. IE9 이상의 브라우저에서만 사용가능. 다만, 반환값 HTMLCollection은 배열이 아닌 유사배열(array-like object)이여서 실시간으로 노드의 상태변경을 반영하므로 loop 사용시 주의가 필요함. 이러한 유사배열의 특징에서 벗어나 작동시키려면 다음과 같은 접근 방법이 권장됨.
1 - 반복문을 역방향으로 돌리기
2 - while 반복문을 사용하되, index는 0으로 고정시키기
3 - HTMLCollection을 배열로 변경하기(가장 권장됨)
4 - querySelectorAll 메서드를 통해 NodeList를 반환케 하기

*document.getElementsByTagName(tagName) - 태그명으로 요소 노드를 모두 선택하여 가져옴

*document.querySelectorAll(selector) - CSS 선택자를 이용, 요소 모드를 모두 선택하여 가져옴. 리턴값은 NodeList. IE8 이상의 브라우저에서만 사용가능.


- 요소를 탐색하기(DOM Traversing)
*parentNode - 부모 노드를 탐색
*firstChild, lastChild - 자식 노드를 탐색. IE9 이상의 브라우저에서만 사용가능. 공백 또는 줄바꿈 문자를 텍스트 노드로 취급하므로 공백을 제거하거나, jQuery: .prev(), jQuery: .next()를 사용하거나, firstElementChild, lastElementChild를 사용하는 방법이 있다.
*hasChildNodes() - 자식 노드가 있는지 확인하여 Boolean 값을 반환
*childNodes - 자식 노드의 컬렉션을 반환(텍스트 요소를 포함한 모든 자식 요소를 반환).
*children - 자식 모드의 컬렉션을 반환(Element type 요소만).
*previousSibling, nextSibling - 형제 노드를 탐색(text node를 포함한 모든 형제 노드를 탐색).
*previousElementSibling, nextElementSibling - 형제 노드를 탐색(Element type 요소만).





참고 : poiemaweb 웹사이트