[JavaScript] 요소 검색

원하는 요소 노드에 접근하기

 

document.getElementById

- 요소에 id 속성이 있으면 위치에 상관 없이 (부모, 자식, 형제 등의 상대적 위치와 관계 없이) document.getElementById(id) 메소드를 통해 접근할 수 있다.
- id 속성 값을 그대로 딴 전역 변수를 이용한 접근도 가능하지만 해당 id 값과 동일한 변수가 생기는 이름 충돌 가능성이 있어 지양하는 것이 좋다.
- 문서 내의 id 속성 값을 중복 되어서는 안되며 중복 된다면 document.getElementById 메소드 동작에 문제가 발생한다.

    <div id="area1" class="area">
        div 영역
        <p id="area2">p 영역</p>
    </div>

    <script>
        // 요소 접근
        let elem = document.getElementById('area1');
        // 요소의 스타일 속성을 이용하여 배경색 변경
        elem.style.backgroundColor = 'skyblue';

        //let area2 = 10;
        area2.style.backgroundColor = 'blue';
    </script>

 

    <div id="area3" class="area"></div>
    <button onclick="accessId();">클릭 할 때 마다 색상 변경</button>

    <script>
        function accessId(){
            let area3 = document.getElementById('area3');
            let bgColor = area3.style.backgroundColor;
            console.log(bgColor);

            if(bgColor == 'red') {
                area3.style.backgroundColor = 'yellow';
            } else {
                area3.style.backgroundColor = 'red';
            }
        }

클릭할 때 마다 빨간색 노란색 바뀐다.

 

querySelector

document.querySelector('선택자') : 제공한 선택자와 일치하는 문서 내 첫 번째 element를 반환
document.querySelectorAll('선택자') : 제공한 선택자와 일치하는 문서 내 모든 element를 반환

    <div class="test">
        <h1>first</h1>
    </div>
    <div class="test">
        <h1>second</h1>
    </div>

 

    <script>
        let myDiv = document.querySelector(".test");
        console.log(myDiv);
        let myDivs = document.querySelectorAll(".test");
        console.log(myDivs);
        myDivs[0].style.color = 'red';
        myDivs[1].style.color = 'green';
    </script>

 

element.querySelector('선택자') : 제공한 선택자와 일치하는 element 내의 첫 번째 element를 반환
element.querySelectorAll('선택자') : 제공한 선택자와 일치하는 element 내의 모든 element들을 반환

    <div class="first">
        <div class="second">
            <ul>
                <li>test1</li>
                <li>test2</li>
                <li>test3</li>
                <li>test4</li>
            </ul>
        </div>
    </div>
    <script>
        let first = document.querySelector(".first");
        let myLi = first.querySelector(".second li:nth-child(3)");
        let myLis = first.querySelectorAll("li");
        console.log(myLi);
        console.log(myLis);
        myLi.style.color = 'red';
        myLis[0].style.backgroundColor = 'gray';
    </script>

 

closest

element.closest('선택자') : element 자기 자신을 포함하여 제공한 선택자와 일치하는 가장 가까운 조상 요소를 반환

    <div class="area">
        <ul class="korean-food">
            <li class="menu">제육볶음</li>
            <li class="menu">된장찌개</li>
            <li class="menu">김치찌개</li>
        </ul>
    </div>
    <script>
        let menu = document.querySelector('.menu');
        console.log(menu);
        console.log(menu.closest('.korean-food'));
        //null -> h3은 li의 조상 요소가 아니므로
        console.log(menu.closest('h3'));
    </script>

 

matches

element.matches('선택자') : element가 선택자와 일치하는지 여부 반환
요소가 담겨있는 배열 등을 순회해 원하는 요소만 걸러내고자 할 때 유용하게 사용할 수 있다.

    <script>
        for(let elem of document.body.children) {
            if(elem.matches('.area')){
                console.log(elem);
            }
        }
    </script>

 

getElementsByTagName(tag), getElementsByClassName(className), getElementsByName(name)

getElementsByTagName('태그명') : 주어진 태그에 해당하는 요소들의 컬렉션을 반환
getElementsByClassName('클래스명') : 주어진 클래스 속성 값에 해당하는 요소들의 컬렉션을 반환
getElementsByName('name명') : 주어진 name 속성 값에 해당하는 요소들의 컬렉션을 반환

 

- 태그명으로 접근

    <ol>
        <li><a href="#">목록 1</a></li>
        <li><a href="#">목록 2</a></li>
        <li><a href="#">목록 3</a></li>
        <li><a href="#">목록 4</a></li>
        <li><a href="#">목록 5</a></li>
    </ol>
        <button onclick="accessTagName();">태그명으로 접근</button>

    <script>
        function accessTagName(){
            let links = document.getElementsByTagName("a");
            console.log("전달 받은 a 태그의 갯수 : " + links.length);
            let changeColor = 50;
            for(let i = 0; i < links.length; i++) {
                console.log(links[i]);
                links[i].style.backgroundColor = "rgb(130,220," + changeColor + ")";
                changeColor += 50;
            }
        }
    </script>

버튼을 클릭하면 그라데이션으로 적용된 것 확인

 

- 클래스명으로 접근

    <script>
        console.log(document.getElementsByClassName("area"));
    </script>

 

- name으로 접근

    <script>
        function accessName(){
            let hobby = document.getElementsByName("hobby");
            console.log(hobby);
            let checkItem = '';
            hobby.forEach(function(item){
                console.log(item);
                if(item.checked){
                    checkItem += item.value + " 선택함\n";
                }
            });
            alert(checkItem);
        }
    </script>

체크박스 선택한 것들 alert창 출력

 

각 메소드의 반환값의 차이

    <script>
        // Element 1개
        let test1 = document.getElementById('area1');
        // Element 1개
        let test2 = document.querySelector("#area1");
        // NodeList
        let test3 = document.querySelectorAll(".area");
        // HTMLCollection
        let test4 = document.getElementsByTagName("a");
        // HTMLCollection
        let test5 = document.getElementsByClassName("area");
        // NodeList
        let test6 = document.getElementsByName("hobby");
    </script>

 

- HTMLCollection과 NodeList는 문서 내의 노드들을 가지고 있는 컬렉션이며, 유사 배열이다.
- HTMLCollection은 forEach와 같이 편리한 메소드를 제공해주지 않는다.
- 따라서 일반 for문을 사용하여 배열의 각 요소에 접근해야한다.
- NodeList는 forEach 메소드를 사용할 수 있다.
- 단, HTMLCollection과 NodeList는 유사 배열이므로 배열 메소드를 사용하기 위해서는 Array.from() 메소드를 통해 배열로 바꾼 뒤에 사용할 수 있다.

    <script>
        // HTMLCollection은 forEach 사용 불가
        // test4.forEach(item => console.log(item));
        // NodeList는 forEach 사용 가능
        test6.forEach(item => console.log(item));
        // NodeList는 유사 배열이므로 배열 메소드 사용 불가
        // console.log(test6.indexOf(test6[0]));
        // Array.from()으로 배열로 변환하면 배열 메소드 사용 가능
        console.log(Array.from(test6).indexOf(test6[4]));
    </script>