[JavaScript] DOM 접근 정리(1)

1. id 접근

document.getElementById(id)

 

return : element object

* element object는 node object와 다른 유형(텍스트 노드, 주석은 element object에 포함되지 않음)

 

2. tag 명으로 접근

document.getElementsByTageName(tagname)

 

return : nodeList object

* nodeList object는 Array와 같은 노드 목록을 의미함.

 

3. class 접근

document.getElementsByClassName(class)

 

return : nodeList object

 

4. css 기법으로 첫 번째 노드 선택

document.querySelector(css selectors)

 

return : node object

 

5. css 기법으로 전체 노드 선택

document.querySelectorAll(css selectors)

 

return : nodeList  object

 

6. 상위 노드 접근

node.parentNode

 

return : node object

 

7. 상위 HTML 노드에 접근

node.parentElement

 

return : element object

 

8. 하위 노드에 접근

node.childNodes

 

return : nodeList object

 

9. 하위 HTML 노드에 접근

node.children

 

return : HTMLCollection object

* HTMLCollection은 node object는 포함하지 않고 element Object만 포함

 

10. 하위 첫 노드 접근

node.firstChild

 

return : node object

 

11. 하위 첫 HTML 노드에 접근

node.firstElementChild

 

return : node object

 

12. 하위 마지막 노드에 접근

node.lastChild

 

return : node object

 

13. 하위 마지막 HTML 노드에 접근

node.lastElementChild

 

return : node object

 

14. 이전 노드에 접근

node.previousSibling

 

return : node object

 

15. 이전 HTML 노드에 접근

node.previoustElementSibling

 

return : node object

 

16. 다음 노드에 접근

node.nextSibling

 

return : node object

 

17. 다음 HTML 노드에 접근

node.nextElementSibling

 

return : node object

 

---

출처 : React로 가기 위한 첫 걸음, Vanilla JS 기초 강의