요소 선택

728x90

자바스크립트 요소 선택

자바스크립트를 통하여 html의 특정 요소를 선택할 수 있습니다.

요소 선택

요소를 직접 선택하는 메서드 입니다.

메서드	설명
getElementById( )	document.getElementById('content')일 경우 HTML 요소 중 id 속성이 'content'인 요소를 선택합니다.
getElementByClassName( )	document.getElementByClassName('menu')일 경우 HTML 요소 중 class명이 'menu'인 요소들을 선택합니다.
getElementByTagName( )	document.getElementByTagName('ul')일 경우 HTML 요소 중 태그명이 'ul'인 요소들을 선택합니다.
getElementByName( )	doeument.getElementByName('txt')일 경우 HTML 요소 중 name명이 'txt'인 요소들을 선택합니다.
querySelector( )	요소의 선택 방법이 css 선택 방법과 같습니다. 선택된 요소 중 첫 번째 요소만 선택합니다. document.querySelector('.lnb') document.querySelector(div) document.querySelector('#gnb li')
querySelectorAll( )	querySelector( )는 선택된 요소 중 첫 번째 요소만 선택하는 반면 querySelectorAll( )는 모든 요소를 선택합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>요소를 직접 선택하는 메서드</title>
    <script>
        window.onload = function () {
            var list1 = document.querySelector('#box1 > ul > li');
            var list2 = document.querySelectorAll('#box2 > ul > li');
            console.log(list1);
            console.log(list2);
            // list1.style.background = "#ff6600";
            // list2[0].style.background = "#ccc";
            // list2.item(1).style.background = "#ddd";
        };
    </script>
</head>
<body>
    <div id="box1">
        <ul>
            <li>내용1</li>      
            <li>내용2</li>
            <li>내용3</li>
        </ul>
    </div>
    <div id="box2">
        <ul>
            <li>내용4</li>
            <li>내용5</li>
            <li>내용6</li>
        </ul>
    </div>
</body>
</html>

이때, list1에서는 querySelector를 사용하였으므로 '내용1'만 선택되고, list2는 querySelectorAll를 사용하였으므로 box2 안에 있는 모든 li가 선택된다.

'JavaScript' 카테고리의 다른 글

내장 함수 (3)	2022.08.13
배열 객체 - join() / push() / pop() (7)	2022.08.11
지역변수와 전역변수 (4)	2022.07.28
함수에 대해 알아보기 (8)	2022.07.26
데이터 타입 (7)	2022.07.26