요소를 선택하는 방법 4가지

1. id

2. class명

3. 태그명

4. css 선택자

document.getElementById('id명');
document.getElementsByClassName('클래스명');
document.getElementsByTagName('태그명');
document.querySelector('css 선택자');

id는 단 하나이므로, 하나만 선택됨

class명과 태그명은 하나 이상이 선택되고 배열과 비슷한 객체인 HTMLCollection으로 값을 받는다.

css선택자로 여러 요소를 선택했을 경우 배열과 비슷한 객체인 nodeList로 값을 받는다.

(유사배열은 배열의 메서드 일부만 사용가능하다)

 

HTMLCollection은 for문을 통해서 속성의 스타일을 변경할 수 있고

nodeList는 for문에서 item이라는 메서드를 이용해서 스타일을 변경할 수 있다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript Basic Selector</title>
</head>
<body>
    <h1 id="title">Javascript Basic Selector</h1>

    <div class="container">
        <ul id="list1" class="list">
            <li>li 1</li>
            <li>li 2</li>
            <li>li 3</li>
            <li>li 4</li>
            <li>li 5</li>
        </ul>
    </div>
    <div class="container">
        <ul id="list2" class="list">
            <li>li 1</li>
            <li>li 2</li>
            <li>li 3</li>
            <li>li 4</li>
            <li>li 5</li>
        </ul>
    </div>
    <div class="container">
        <ul id="list3" class="list">
            <li class="red" name="red">li 1</li>
            <li>li 2</li>
            <li>li 3</li>
            <li>li 4</li>
            <li>li 5</li>
            <li>li 6</li>
        </ul>
    </div>

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil id, corporis, blanditiis quam dicta amet quidem eum impedit harum consequuntur aspernatur ratione nostrum vel culpa fuga! Dolore quibusdam nisi temporibus!
    </p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil id, corporis, blanditiis quam dicta amet quidem eum impedit harum consequuntur aspernatur ratione nostrum vel culpa fuga! Dolore quibusdam nisi temporibus!
    </p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil id, corporis, blanditiis quam dicta amet quidem eum impedit harum consequuntur aspernatur ratione nostrum vel culpa fuga! Dolore quibusdam nisi temporibus!
    </p>
    <script>
        var firstTitle = document.getElementById('title'); // id로 요소 선택
        var myList = document.getElementsByClassName('list'); // class명으로 요소들 선택
        var paragraphs = document.getElementsByTagName('p'); // 태그명으로 요소 선택
        var myList2 = document.querySelector('.list .red'); // css 선택자로 요소 선택
        var myList3 = document.querySelectorAll('.list');

        console.log(firstTitle);
        console.log(myList);
        console.log(paragraphs);
        console.log(myList2);
        console.log(myList3);

        firstTitle.style.color = 'red';
        myList[0].style.display = 'none';
        // paragraphs.style.color = 'red';
        myList3.item(1).style.border = "1px solid blue";

        // 모든 p 태그를 빨간색으로 변경
        for(var i = 0; i < paragraphs.length; i++) {
            paragraphs[i].style.color = 'blue';
        }

        // list 클래스의 테두리를 생성
        for(var j = 0; j < myList3.length; j++) {
            // querySelectorAll은 배열과 비슷한 객체인 nodeList를 반환함
            // 반환객체가 nodeList이기 때문에 for문 또는 forEach문을 사용함
            var item = myList3.item(j);
            item.style.border = "1px solid black";
        }

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

 

'JavaScript' 카테고리의 다른 글

자바스크립트 실습(스크롤 이벤트)  (0) 2022.10.03
자바스크립트 실습(여러가지 이벤트)  (0) 2022.10.02
자바스크립트 실습(배열, 타이머)  (0) 2022.09.28
자바스크립트 실습(함수, 객체, 반복문)  (0) 2022.09.27
자바스크립트 실습(변수, 조건문)  (1) 2022.09.26

+ Recent posts

티스토리툴바