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
엘리먼트의 마지막 자식 엘리먼트를 가져온다.
참고 :
'자바스크립트 > DOM 이론' 카테고리의 다른 글
| DOM 엘리먼트를 추가하는 다양한 방법 (0) | 2020.08.24 |
|---|---|
| DOM 엘리먼트의 다양한 길이 값을 가져오는 방법 (0) | 2020.08.24 |
| 웹에서 화면 변경시 화면의 크기 값을 가져오는 방법 (0) | 2020.08.22 |
| 돔에서 값을 사용자 컴퓨터에 저장하는 메소드 - localStorage (0) | 2020.03.05 |
| 돔 엘리먼트의 클래스 이름 다루기 - classList (0) | 2020.03.03 |
