자바스크립트/DOM 이론
DOM 엘리먼트를 가져오는 다양한 방법
Socratone
2020. 8. 24. 16:29
Selector로 찾는 방법
document.getElementById(id)
태그에 지정된 id 값으로 엘리먼트 노드 객체를 참조할 수 있다.
element.querySelectorAll(css)
엘리먼트의 자식 중에 css 선택자에 해당하는 것들을 모두 가져온다.
element.querySelector(css)
엘리먼트의 자식 중에 css 선택자에 해당하는 것을 찾으면 검색을 멈추고 가져온다.
element.closest(css)
엘리먼트 자신부터 시작해서 가까운 조상을 하나씩 조회하며 css 선택자에 해당하는 것을 찾으면 검색을 멈추고 가져온다.
인접한 엘리먼트를 찾는 방법
element.parentElement
엘리먼트의 부모를 가져온다.
element.previousElementSibling
엘리먼트 앞에 오는 형제 엘리먼트를 가져온다.
element.nextElementSibling
엘리먼트 뒤에 오는 형제 엘리먼트를 가져온다.
element.children
엘리먼트의 자식 엘리먼트들을 가져온다.
element.firstElementChild
엘리먼트의 첫 번째 자식 엘리먼트를 가져온다.
element.lastElementChild
엘리먼트의 마지막 자식 엘리먼트를 가져온다.
참고 :