getElementBy*와 querySelector

서지우·2023년 7월 18일

JavaScript

목록 보기

5/11

getElementsBy*

getElementById

요소에 id 속성이 있으면 위치에 상관없이 메서드다. document.getElementById(id)를 이용해 접근할 수 있다.

getElementsByTagName

주어진 태그에 해당하는 요소를 찾고, 대응하는 요소를 담은 컬렉션을 반환한다.
매개변수 tag에 "*"이 들어가면, '모든 태그’가 검색된다.

getElementsByClassName(className)

class 속성값을 기준으로 요소를 찾고, 대응하는 요소를 담은 컬렉션을 반환한다.

getElementsByName(name)

아주 드물게 쓰이는 메서드로, 문서 전체를 대상으로 검색을 수행한다.
검색 기준은 name 속성값이고, 이 메서드 역시 검색 결과를 담은 컬렉션을 반환한다.

querySelector를 이용하는 게 더 편리하고 문법도 짧아서, 요즘은 getElementsByTagName, getElementsByClassName(className) ,getElementsByName(name)들을 잘 쓰진 않습니다.

실습 - s12.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- id 속성값은 페이지에서 유일해야한다 -->
    <h1 id="first"></h1>

    <ul>
        <!-- class 속성값은 페이지에서 여러번 사용해도 된다 -->
        <li class="my-li"></li>
        <li class="my-li"></li>
        <li class="my-li"></li>
    </ul>

    <h1 class="second"></h1>

    <script>
        
        // window는 화면에 필요한 객체나 메소드들을 가지고 있는 최상위 객체
        // window라는 객체는 보통 생략이 가능하다
        // document는 화면의 html 전체문서를 뜻한다
        // 태그들도 모두 객체이다
        // getElementById는 id 속성값을 기준으로 단일 태그를 가져온다
        const firstTag = window.document.getElementById("first");
        firstTag.innerText = '첫번째입니다.';

        // getElementsByClassName은 class 속성값을 기준으로 태그 리스트를 가져온다
        const myliTagList = window.document.getElementsByClassName("my-li");

        for (let i = 0; i < myliTagList.length; i++) {
            // 백틱은 문자열 포맷팅, 문자열 사이에 변수를 넣을 수 있다
            myliTagList[i].innerText = `${i}. 상품${i}`;
        }

        // second태그 가져와서 값 넣기
        // 두번째입니다
        const secondTagList = window.document.getElementsByClassName("second");
        // 값 넣을 때 둘중 하나
        // 1. 반복문 이용해서 넣기
        for (let i = 0; i < secondTagList.length; i++) {
            secondTagList[i].innerText = '두번째입니다';
        }
        // 2. if문으로 요소가 있는지 확인하고 넣기
        if (secondTagList.length > 0) {
            secondTagList[0].innerText = '두번째입니다.';
        }

    </script>
</body>
</html>

실행결과

querySelector

querySelectorAll

메서드는 elem의 자식 요소 중 주어진 CSS 선택자에 대응하는 요소 모두를 반환한다.

querySelector

주어진 CSS 선택자에 대응하는 요소 중 첫 번째 요소를 반환한다.

matches

메서드는 요소 elem이 주어진 CSS 선택자와 일치하는지 여부를 판단해 주고, 일치한다면 true, 아니라면 false를 반환한다.

closest

자기 자신을 포함하여 CSS 선택자와 일치하는 가장 가까운 조상 요소를 찾을 수 있게 한다.

실습 - s12-1.html

주석으로 설명..

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <!-- id 속성값은 페이지에서 유일해야한다 -->
    <h1 id="first"></h1>

    <ul>
        <!-- class 속성값은 페이지에서 여러번 사용해도 된다 -->
        <li class="my-li"></li>
        <li class="my-li"></li>
        <li class="my-li"></li>
    </ul>

    <h1 class="second"></h1>

    <script>
        
        // querySelector는 css 선택자를 이용해서 단일 태그를 가져온다
        const firstTag = document.querySelector("#first");
        firstTag.innerHTML = "첫번째입니다.";

        // querySelectorAll css 선택자를 이용해서 태그 리스트를 가져온다
        const myliTagList = document.querySelectorAll(".my-li");

        for (let i = 0; i < myliTagList.length; i++) {
            // 백틱은 문자열 포맷팅, 문자열 사이에 변수를 넣을 수 있다
            myliTagList[i].innerText = `${i}. 상품${i}`;
        }

        // querySelector가 단일 태그를 가져오는 점을 이용해서
        // 클래스 선택자로도 태그 하나만을 가져와서 사용할 수 있다
        const secondTag = document.querySelector(".second");
        secondTag.innerText = '두번째입니다.';

    </script>
</body>
</html>