자바스크립트 : 요소 선택

728x90

요소 선택

자바스크립트의 각 요소를 제어하기 위해서는 해당 요소를 선택해야 합니다. 요소 선택 메서드에 대하여 알아보겠습니다.

요소 직접 선택 메서드

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

예시

<script>
    window.onload = function() {
        var list1 = document.querySelector('#box1 > ul > li');
        var list2 = document.querySelector('#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>
<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>

결과보기

내용1
내용2
내용3

내용4
내용5
내용6

728x90

'Javascript' 카테고리의 다른 글

자바스크립트 : 내장함수 (8)	2022.08.12
자바스크립트 : 배열 메서드 : join(), push(), pop() (8)	2022.08.11
자바스크립트 : 전역 변수와 지역 변수 (8)	2022.07.28
자바스크립트 : 함수 (9)	2022.07.26
자바스크립트 : 데이터 타입 (9)	2022.07.25

🦙코딩보다 알파카🦙

자바스크립트 : 요소 선택

요소 선택

요소 직접 선택 메서드

예시

'Javascript' 카테고리의 다른 글

댓글

티스토리툴바

자바스크립트 : 요소 선택

요소 선택

요소 직접 선택 메서드

예시

'Javascript' 카테고리의 다른 글

관련글

댓글

티스토리툴바