[TCP School/자바스크립트] 문서 객체 모델(DOM)

[TCP School/자바스크립트] 문서 객체 모델(DOM) - DOM 요소
/category/%EA%B3%B5%EB%B6%80/JavaScript

2023. 4. 24. 13:24

DOM 요소의 선택

HTML 요소를 다루기 위해서는 우선 해당 요소를 선택해야 한다.

자바스크립트에서 특정 HTML 요소를 선택하는 방법은 다음과 같다.

1. HTML 태그 이름을 이용한 선택

2. 아이디를 이용한 선택

3. 클래스를 이용한 선택

4. name 속성을 이용한 선택

5. css 선택자를 이용한 선택

6. HTML 객체 집합을 이용한 선택

HTML 태그 이름을 이용한 선택

getElementsbyTagName() 메소드는 HTML 태그 이름을 이용하여 HTML 요소를 선택한다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>getElementsByTagName</title>
</head>
<body>
    <h1>HTLM 태그 이름을 이용한 선택</h1>
    <ul>
        <li>첫 번째 아이템</li>
        <li>두 번째 아이템</li>
        <li>세 번째 아이템</li>
        <li>네 번째 아이템</li>
    </ul>

    <script>
        var selectItem = document.getElementsByTagName('li');
        for (var i = 0; i < selectItem.length; i++) {
            selectItem.item(i).style.color = 'red';
        }
    </script>
</body>
</html>

아이디를 이용한 선택

getElementById() 메소드는 아이디를 이용하여 HTML 요소를 선택한다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>getElementById</title>
</head>
<body>
    <h1>아이디를 이용한 선택</h1>
    <ul>
        <li>첫 번째 아이템</li>
        <li id="even">두 번째 아이템</li>
        <li>세 번째 아이템</li>
        <li id="even">네 번째 아이템</li>
    </ul>   

    <script>
        var selectItem = document.getElementById('even');
        selectItem.style.color = 'red';
    </script>
</body>
</html>

아이디를 이용한 선택은 해당 아이디를 가지고 있는 요소 중에서 첫 번째 단 하나만을 선택한다.

따라서 여러 요소를 선택하고 싶을 때는 태그 이름이나 클래스와 같이 다른 방법을 사용해야 한다.

클래스를 이용한 선택

getElementsByClassName() 메소드는 클래스 이름을 이용하여 HTML 요소를 선택한다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>getElementsByClassName</title>
</head>
<body>
    <h1>클래스를 이용한 선택</h1>
    <ul>
        <li class="odd">첫 번째 아이템</li>
        <li>두 번째 아이템</li>
        <li class="odd">세 번째 아이템</li>
        <li>네 번째 아이템</li>
    </ul>   

    <script>
        var selectedItem = document.getElementsByClassName('odd');
        for (var i = 0; i < selectedItem.length; i++) {
            selectedItem.item(i).style.color = 'red';
        }
    </script>
</body>
</html>

name 속성을 이용한 선택

getElementByName() 메소드는 HTML 요소의 name 속성을 이용하여 HTML 요소를 선택한다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>getElementsByName</title>
</head>
<body>
    <h1>name 속성을 이용한 선택</h1>
    <p name="first">첫 번째 단락</p>
    <ul>
        <li name="first">첫 번째 아이템</li>
        <li>두 번째 아이템</li>
        <li>세 번째 아이템</li>
        <li>네 번째 아이템</li>
    </ul>   

    <script>
        var selectedItem = document.getElementsByName('first')
        for (var i = 0; i < selectedItem.length; i++) {
            selectedItem.item(i).style.color = 'red';
        }
    </script>
</body>
</html>

CSS 선택자를 이용한 선택

querySelectorAll() 메소드는 CSS 선택자를 이용하여 HTML 요소를 선택한다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>querySelctorAll</title>
</head>
<body>
    <h1>name 속성을 이용한 선택</h1>
    <p class="odd">첫 번째 단락</p>
    <ul>
        <li class="odd">첫 번째 아이템</li>
        <li>두 번째 아이템</li>
        <li class="odd">세 번째 아이템</li>
        <li>네 번째 아이템</li>
    </ul>   

    <script>
        var selectedItem = document.querySelectorAll('li.odd')
        for (var i = 0; i < selectedItem.length; i++) {
            selectedItem.item(i).style.color = 'red';
        }
    </script>
</body>
</html>

HTML 객체 집합을 이용한 선택

HTML DOM에서 제공하는 객체 집합을 이용하여 HTML 요소를 선택할 수 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>DOM Element</title>
</head>
<body>
    <h1>HTML 객체 집합을 이용한 선택</h1>

    <script>
        var title = document.title;
        document.write(title)
    </script>
</body>
</html>

DOM 요소의 내용 변경

HTML DOM을 이용하면 HTML 요소의 내용이나 속성값 등을 편리하게 변경할 수 있다.

HTML 요소의 내용을 변경하는 가장 쉬운 방법은 innerHTML 프로퍼티를 이용하는 것이다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>innerHTML</title>
</head>
<body>
    <h1>innerHTML을 이용한 요소의 내용 변경</h1>
    <p id="text">이 문장을 바꿀 것</p>

    <script>
        var str = document.getElementById('text');
        str.innerHTML = '이 문장으로 바뀜';
    </script>
</body>
</html>

HTML 요소의 속성 이름을 이용하면 속성값도 변경할 수 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>DOM Element</title>
</head>
<body>
    <h1>속성 이름을 이용한 속성값 변경</h1>
    <a id='link' href="http://tcpschool.com/html/intro">HTML 수업 바로 가기</a><br><br>
    <button type="button" onclick="changeLink()">자바스크립트 수업으로 바꾸기</button>

    <script>
        function changeLink() {
            var link = document.getElementById('link');
            link.href = "http://tcpschool.com/javascript/intro";
            link.innerHTML = '자바스크립트 수업 바로 가기';
        }
    </script>
</body>
</html>

DOM 요소의 스타일 변경

HTML DOM을 이용하면 HTML 요소의 스타일도 편하게 변경할 수 있다.

style 프로퍼티를 이용하여 HTML 요소에 CSS 스타일을 적용한다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>DOM Element</title>
</head>
<body>
    <h1>DOM 요소의 스타일 변경</h1>
    <p id="text">이 문자열의 기본색은 검정입니다</p>
    <button onclick="changeRedColor()">빨간색으로 변경</button>
    <button onclick="changeBlackColor()">검정색으로 변경</button>

    <script>
        var str = document.getElementById('text');

        function changeRedColor() {
            str.style.color = 'red';
        }

        function changeBlackColor() {
            str.style.color = 'black';
        }
    </script>
</body>
</html>

TCP School의 강의 내용을 정리한 포스트입니다.

http://www.tcpschool.com/javascript/intro

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

'공부 > JavaScript' 카테고리의 다른 글

[TCP School/자바스크립트] 문서 객체 모델(DOM) - 노드로의 접근 (0)	2023.04.24
[TCP School/자바스크립트] 문서 객체 모델(DOM) - 노드 (0)	2023.04.24
[TCP School/자바스크립트] 문서 객체 모델(DOM) - Document 객체 (0)	2023.04.24
[TCP School/자바스크립트] 문서 객체 모델(DOM) - DOM의 개념 (0)	2023.04.24
[TCP School/자바스크립트] 표준 객체 - Array 메소드 (0)	2023.04.21

김철용 기록소

CATEGORIES