[JS] 4. DOM 제어 (1)

Apr 02, 2025

Contents

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

https://www.w3schools.com/js/js_htmldom_methods.asp

1. DOM 요소 선택

1. DOM이란

Document Object Model

HTML이나 XML을 트리 구조로 표현한 것

브라우저는 HTML을 로드하면 DOM을 만든다.

<body>영역은 DOM으로 관리한다.

DOM을 통해 브라우저 상의 HTML 요소를 동적으로 제어 가능하다.

이벤트 감지 및 처리
HTML 내용 변경
CSS 변경

(CSS와 JavaScript는 문법은 같지만 브라우저별 함수가 다를 수 있다.)

2. DOM 요소 선택

1. querySelector()

id로 dom을 찾게 될 경우 unique하기 때문에 단일 요소를 선택하는 querySelector함수를 사용한다.

1-1. 예제

id가 demo인 dom을 querytSelector를 통해 찾는다.

innderHTML

dom을 찾아서 그 사이에 값을 끼워 넣을 때 사용한다.


<!DOCTYPE html>
<html>
<body>

    <h2>My First Page</h2>

    <p id="demo"></p>

    <script>
        // id로 찾았으니까 오브젝트이다
        let demoDom = document.querySelector("#demo");
        demoDom.innerHTML = "HelloWorld";
    </script>

</body>
</html>

2. querytSelectorAll()

class로 dom을 찾게 될 경우 여러 개의 dom을 찾게 되므로 여러 요소를 선택하는 querySelectorAll함수를 사용한다.

2-1. 예제

class가 demo1인 dom들을 querySelectorAll를 통해 찾는다.

querytSelectorAll는 NodeList를 반환한다.

NodeList

유사 배열 객체
배열처럼 인덱스로 접근할 수 있다.


<!DOCTYPE html>
<html>
<body>

    <h2>My Second Page</h2>

    <p class="demo1"></p>
    <p class="demo1"></p>
    <p class="demo2"></p>

    <script>
        let demo1DomList = document.querySelectorAll(".demo1");
        console.log(demo1DomList);

        let d1 = demo1DomList[0];
        let d2 = demo1DomList[1];

        d1.innerHTML = "Hello";
        d2.innerHTML = "World";

        let demo2Dom = document.querySelector(".demo2");
        demo2Dom.innerHTML = "Good";
    </script>

</body>
</html>

3. 그 외

다음과 같은 함수는 사용하지 말고 querySelector, querySelectorAll만 사용한다.

<!DOCTYPE html> <html> <body> <h2>My First Page</h2> <p id="demo"></p> <script> // id로 찾았으니까 오브젝트이다 let demoDom = document.querySelector("#demo"); demoDom.innerHTML = "HelloWorld"; </script> </body> </html>

<!DOCTYPE html> <html> <body> <h2>My Second Page</h2> <p class="demo1"></p> <p class="demo1"></p> <p class="demo2"></p> <script> let demo1DomList = document.querySelectorAll(".demo1"); console.log(demo1DomList); let d1 = demo1DomList[0]; let d2 = demo1DomList[1]; d1.innerHTML = "Hello"; d2.innerHTML = "World"; let demo2Dom = document.querySelector(".demo2"); demo2Dom.innerHTML = "Good"; </script> </body> </html>