[javascript] DOM 검색 및 탐색

Element에서 사용

1. getElementById

• HTML 'id' 속성(Attributes) 값으로 검색한 요소를 반환한다.
• 여러 요소가 검색된다면 가장 먼저 찾은 요소만 반환한다.
• 검색 결과가 없으면 'null'을 반환한다.

 

2. querySelector

• 'CSS 선택자'로 검색한 요소를 하나 반환한다.
• 여러 요소가 검색되면 가장 먼저 찾은 요소만 반환한다
• 검색 결과가 없으면, 'null'을 반환한다.

 

3. querySelectorAll

• 'CSS 선택자'로 검색한 모든 요소를 'NodeList'로 반환한다.
• 'NodeList' 객체는 'forEach'와 같은 메서드를 사용할 수 있다

NodeList로 반환된 결과가 배열데이터 처럼 보이지만 KEY를 숫자로 제공하고 length를 함께 작성하여 배열데이터 처럼 만들어진 유사배열(Array-like)이다. 그렇기 때문에 NodeList에서는 배열데이터 메서드는 사용이 불가하지만 forEach 메서드는 사용이 가능하다.

 

여기서 문제!
만약 NodeList로 반환된 데이터에 배열메서드를 사용하고 싶다면?

const nodeList = document.querySelectorAll(".child");
console.log(nodeList);
console.log(Array.from(nodeList));

 

4.  previousElementSibling / nextElementSibling

previousElementSibling  : 요소의 이전 형제 요소를 반한다.

nextElementSibling : 요소의 다음 형제 요소를 반환한다.

요소의 이전, 다음 형제이기 때문에 child 클래스를 가진 요소의 이전 형제는 찾을 수 없어 'null'을 반환한다.

 

5.  childeren

• 요소의 모든 자식 요소를 반환한다.

배열 같아 보이지만 하단에 HTMLCollection이라고 명시되어있으며, [[Prototype]]: Object 로 객체형태의 유사배열임을 알 수 있다.

 

6. firstElementChild / lastElementChild

• firstElementChild  :  요소의 첫 번째 자식 요소를 반환한다.
• lastElementChild : 요소의 마지막 자식 요소를 반환한다.

 

Node

1. parentElement

• Node의 부모 요소를 반환한다

const el = document.querySelector(".child");
console.log(el.parentElement);
console.log(el.parentNode);

위와 같은 구조 일 때 Node에서 사용한다는 가정을 하고 주석에 parentElement를 찾아도 똑같은 결과값을 반환한다.

(하단 코드 및 이미지 참조)

const el = document.querySelector(".child");
console.log(el.nextSibling.parentElement);

 

2. closest

•  자신을 포함한 조상 요소 중 'CSS 선택자'와 일치하는 가장 가까운 요소를 반환한다.
• 요소를 찾지 못하면 'null' 을 반환한다.

const el = document.querySelector(".child");

console.log(el.closest("div"));
console.log(el.closest("body"));
console.log(el.closest(".hello"));

 

3. previousSibling / nextSibling

• previousSibling  : Node의 이전 형제 Node를 반환한다.

• nextSibling : Node의 다음 형제 Node를 반환한다.