[DOM] ④ DOM 요소 검색하기

▶요소 검색하기

이전에 살펴봤던 parentNode, ChildNode 같은 노드 프로퍼티를 사용하면 원하는 노드에 직접 접근할 수 있습니다.

하지만 이 방법은 문서 구조가 자주 변경되거나 계층적으로 깊게 위치한 요소에 접근하는 경우 효율적으로 탐색할 수 없습니다.

이런 경우 querySelector(), getElementById() 같은 요소 검색 메서드를 통해 해당 요소에 바로 접근할 수 있습니다.

 

1) getElementById()

요소의 id 속성을 이용해 document.getElementById(id)로 접근할 수 있습니다.

id는 문서에서 유일하기 때문에 요소를 찾을 때 가장  빠르게 찾을 수 있습니다.

일치하는 id를 가진 요소가 있을 경우 해당 DOM 요소인 Element 객체를 반환하며 일치하는 요소가 없을 경우 null을 반환합니다.

 

2) querySelector()와 querySelectorAll() - 유사 배열 객체❌ 반환

querySelector()는 선택자(selector)와 일치하는 첫 번째 요소를 반환합니다.

선택자와 일치하는 요소가 없을 경우 null을 반환합니다.

const elem = document.querySelector(selectors);
// 선택자에 일치하는 첫 번째 요소 반환

선택자는 CSS 선택자와 동일하게 id는 '#', class는 '.' 요소는 요소 이름을 직접 작성합니다.

선택자에 여러 선택자를 ','로 이어서 작성할 경우 'or' 조건으로 동작하기 때문에 선택자에 일치하는 첫 번째 요소를 반환합니다.

<div id="test-id">id가 test-id인 div요소</div>
<p class="class-name">class가 class-name인 p요소</p>

<script>
    const elem1 = document.querySelector('#test-id'); // DIV 요소
    const elem2 = document.querySelector('.class-name'); // P 요소
    const elem3 = document.querySelector('.class-name, #test-id'); // DIV 요소. DIV 요소가 P 요소보다 먼저 선언되었기 때문에 첫 번째로 찾아 반환합니다.
</script>

querySelectorAll()은 선택자와 일치하는 모든 요소를 NodeList 형태로 반환합니다.

선택자와 일치하는 요소가 없을 경우 빈 NodeList를 반환합니다.

이 NodeList는 살아 있지 않은 유사 배열 객체로 DOM의 변경이 있어도 바뀌지 않습니다.

<div id="test-id">id가 test-id인 div 요소</div>
<div class="class-name">class가 class-name인 div요소</div>

<script>
    const elemList = document.querySelectorAll('div');
    console.log(elemList); // [DIV#test-id, DIV.class-name]

    setTimeout(() => {
        const divElem = document.getElementById('test-id');
        divElem.remove();

        console.log(elemList);
        // [DIV#test-id, DIV.class-name]
        // querySelectorAll을 호출했을 시점의 상태가 저장
    }, 1000);
</script>

 

3) getElementBy* -  유사배열 객체⭕ 반환

그 외에 태그나 클래스를 이용해 노드에 접근할 수 있는 메서드도 존재합니다.

앞서 소개한 getElementById()와 다르게 이 메서드들은 일치하는 여러 요소를 모두 반환하므로 이름에 's'가 붙은 getElements 형태로 작성됩니다.

대표적으로 getElementsByClassName(), getElementsByTagName() 같은 메서드가 존재합니다.

반환 값은 HTMLCollection으로 실시간으로 업데이트 되는 유사 배열 객체입니다.

<div id="test-id">id가 test-id인 div 요소</div>
<p class="class-name">class가 class-name인 p 요소</p>

<script>
    const elemList1 = document.getElementsByTagName('div'); // [DIV#test-id]
    const elemList2 = document.getElementsByClassName('class-name'); // [p.class-name]
</script>

실시간으로 업데이트된다는 의미는 선택자에 해당하는 요소가 바뀔 때 HTMLCollection 또한 업데이트된다는 것을 의미합니다.

<div id="test-id">id가 test-id인 div 요소</div>

<script>
    const elemList = document.getElementsByTagName('div');
    console.log(elemList); //[DIV#test-id]

    setTimeout(() => {
        const elem = document.createElement('div');
        elem.id = "new-div-id";
        document.body.appendChild(elem);

        console.log(elemList); // [DIV#test-id, DIV#new-div-id], 실시간으로 업데이트
    });
</script>

 

 

---

여기까지 DOM 요소 검색에 대해 알아보았습니다 :)