용어/js

[국비][JS_용어] getElementById, getElementsByClassName, getAttribute 구분

줌인. 2024. 5. 25. 22:33
getElementById getElementsByClassName getAtrribute
- 특정 id를 가진 요소를 가져옴
- 해당 id를 가진 요소 전체(Element) 를
  반환		 - 특정 클래스를 가진 요소들을 배열
  형태로 가져옴
- 해당 클래스를 가진 모든 요소의
  컬렉션(HTMLCollection) 을 반환		 - 특정 요소의 특정 속성 값
- 속성의 값(value) 을 반환

 

[예시]

<body>
    <input type="checkbox" class="flag" data-del-num="item1">
    <input type="checkbox" class="flag" data-del-num="item2">
    <div id="item1">Item 1</div>
    <div id="item2">Item 2</div>
    <button id="btn">Delete</button>

    <script>
        const btn = document.getElementById("btn");
        const flag = document.getElementsByClassName("flag");
   
        btn.addEventListener("click", function() {
            let ar = [];
   
            // flag 클래스를 가진 모든 요소를 순회
            for(let i = 0; i < flag.length; i++) {
                if(flag[i].checked) {
                    // 각 flag 요소의 data-del-num 속성 값을 ar 배열에 추가
                    ar.push(flag[i].getAttribute("data-del-num"));
                }
            }
   
            // ar 배열에 저장된 값들을 순회하여 해당 id를 가진 요소를 삭제
            for(let i = 0; i < ar.length; i++) {
                document.getElementById(ar[i]).remove();
            }
        });
    </script>
</body>
getAttribute getElementById
- getAttribute("data-del-num")
> data-del-num 속성의 값(value) 을 가져옴
> "item1"		 - getElementById("item1")
> id가 "item1"인 요소(Element) 를 가져옴
> <div id="item1">Item 1</div>.

 

728x90