Giant Danio Fish
본문 바로가기
Javascript

요소 선택 메서드

by 코딩왕자 2022. 8. 6.

요소 선택

요소를 직접 선택하는 메서드

메서드 설명
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'인 요소들을 선택합니다.
guerySelector() 요소의 선택 방법이 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

'Javascript' 카테고리의 다른 글

내장 함수  (4) 2022.08.13
배열 관련 메서드(join(), push(), pop())  (13) 2022.08.11
지역변수/전역변수  (10) 2022.07.28
함수  (10) 2022.07.26
데이터 타입  (10) 2022.07.25

댓글


광고 준비중입니다