[JavaScript] 9. DOM(Document Object Model)

2024년 07월 22일

Song hyun
작성자
2024.07.22.:02

728x90

[JavaScript] 9. DOM(Document Object Model)

1. DOM의 개념

-브라우저에 띄울 웹 페이지가 정적 웹페이지라면 CSS+HTML로도 충분하지만, 그 이상의 인터랙티브한 기능을 구현하려면 DOM 개념을 이해해야 한다.

-DOM(Document Object Model)은 문서 객체 모델이라고도 이야기한다. 이는 웹페이지의 콘텐츠 및 구조를 구조화시켜 표현해, 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스이다.
=> 이는 자바스크립트 같은 스크립팅 언어가 쉽게 웹페이지에 접근해 조작할 수 있게끔, 연결시켜주는 역할을 한다.
*window 객체는 브라우저 창이나 프레임을 추상화한 것으로, DOM의 일부가 아니라.
*window 객체란?
-JS에서 브라우저 창을 나타내며, 모든 전역 변수와 메서드를 포함한다. 이는 브라우저 창의 속성과 메서드를 제공한다. 이는 웹페이지에서 사용할 수 있는 모든 전역 변수와 함수를 포함한다.

2. JS로 DOM 조작해보기
(1) DOM 생성 방식
-DOM 정적 생성: HTML 코드를 위에서부터 아래로 읽어내려가며 생성하는 과정
-DOM 동적 생성: 자바스크립트를 이용해, 있던 노드에 없는 노드를 만들어 이어 붙이는 과정
-Document node
-Element Node
-Attribute Node
-Text Node
* 이 네가지 노드가 존재함으로써 스크립팅 언어가 웹페이지에 접근하고 조작할 수 있게 된다.

3. DOM에 접근할 수 있는 5가지 방법

getElementById(id): id를 기반으로 엘리먼트를 선택한다.
getElementsByClassName(classname): 클래스 이름을 기반으로 모든 엘리먼트를 선택한다.
getElementsByTagName(tagName): 태그 이름을 기반으로 모든 엘리먼트를 선택한다.
querySelector(selector)
querySelectorAll(selector)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>index11.html 파일 입니다.</h2>

    <div id="myDiv">아이디로 접근</div>
    <div class="myClass">클래스 이름으로 접근1</div>
    <div class="myClass">클래스 이름으로 접근2</div>
    <p>태그 이름으로 접근1</p>
    <p>태그 이름으로 접근2</p>

    <script>
        // 1. 요소의 id 값으로 접근하기
        let byMyDiv = document.getElementById("myDiv");
        console.log(byMyDiv.textContent);

        // 2. 요소의 class 속성을 사용해서 접근하기
        let byClassNameElements=document.getElementsByClassName("myClass");
        console.log(typeof byClassNameElements);
        byClassNameElements[0].textContent="동적 렌더링 1";
        byClassNameElements[1].textContent="동적 렌더링 2";

        // 3. 요소 태그 이름으로 접근해보기
        let byTagName=document.getElementsByTagName("p");
        console.log(byTagName[1].textContent);

        // 4. querySelector 사용해보기
        // 제공된 CSS 선택자와 일치하는 문서 내의 첫번째 엘리먼트를 반환한다.
        // 만약 일치하는 엘리먼트가 없다면 null 값을 반환한다.
        let byQuerySelector=document.querySelector("myClass");
        console.log("-------");
        console.log(byQuerySelector);

        // 5. querySelectorAll 사용해보기
        // CSS 선택자와 일치하는 모든 엘리먼트를 NodeList로 반환한다.
        let byQuerySelectorAll=document.querySelectorAll(".myClass");
        console.log("--------------");
        console.log(typeof byQuerySelectorAll);
        console.log(byQuerySelectorAll);
        byQuerySelectorAll[1].textContent="안녕 querySelectorAll";
        byQuerySelectorAll[1].style.color="blue";
    </script>
</body>
</html>

4. 코드 예제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>index9.html 파일 입니다.</h2>
    <!--DOM 정적 생성-->
    <script>
        // div 요소를 생성해보자.(JS)
        let div=document.createElement("div");
        console.log(div);
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>index9.html 파일 입니다.</h2>
    <!--DOM 정적 생성-->
    <script>
        // div 요소를 생성해보자.(JS)
        let div=document.createElement("div");
        console.log(div);
        document.body.append(div);

        div.textContent="div 노드를 js를 통해 만들어보자";
        div.style.backgroundColor="yellow";
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>index2.html 파일입니다.</h2>
    <h1 id="title">Hello,world!</h1>
    <button id="changeButton">Change Text</button>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>index2.html 파일입니다.</h2>
    <h1 id="title">Hello,world!</h1>
    <button id="changeButton">Change Text</button>
<script>
    // 자바스크립트를 사용하여 DOM을 조작해보자.
    // button 요소 id값인 changebutton 노트에 접근해보기
   let changeBtn=document.getElementById("changeButton");
   console.log(typeof changeBtn);
   console.log(changeBtn);

   // 이벤트 리스너를 등록해보자.
   changeBtn.addEventListener("click",function(){
        alert('1111');
   });
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>index2.html 파일입니다.</h2>
    <h1 id="title">Hello,world!</h1>
    <button id="changeButton">Change Text</button>
<script>
    // 자바스크립트를 사용하여 DOM을 조작해보자.
    // button 요소 id값인 changebutton 노트에 접근해보기
   let changeBtn=document.getElementById("changeButton");
   console.log(typeof changeBtn);
   console.log(changeBtn);

    // 함수 표현식 - 함수를 변수 안에 저장하는 법
    let clickEvent=function(){
        alert('22222');
    };

   // 이벤트 리스너를 등록해보자.
   changeBtn.addEventListener("click",clickEvent);
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>index2.html 파일입니다.</h2>
    <h1 id="title">Hello,world!</h1>
    <button id="changeButton">Change Text</button>
<script>
    // 자바스크립트를 사용하여 DOM을 조작해보자.
    // button 요소 id값인 changebutton 노트에 접근해보기
   let changeBtn=document.getElementById("changeButton");
   console.log(typeof changeBtn);
   console.log(changeBtn);

    // 함수 표현식 - 함수를 변수 안에 저장하는 법
    let clickEvent=function(){
        let titleElement=document.getElementById("title");
        titleElement.textContent="안녕 스크립트야!";
        titleElement.style.color="red";
    };

   // 이벤트 리스너를 등록해보자.
   changeBtn.addEventListener("click",clickEvent);
</script>
</body>
</html>

728x90

'HTML,CSS, JS > JavaScript' 카테고리의 다른 글

[JavaScript] 10. 자바스크립트의 이벤트 처리 (0)	2024.07.24
[JavaScript] 9-1. 예제 (0)	2024.07.22
[JavaScript] 8. 함수의 개념과 활용 (0)	2024.07.19
[JavaScript] 7. 배열의 개념과 사용 방법 (0)	2024.07.19
[JavaScript] 6. 객체의 종류와 생성 방법 (0)	2024.07.19

다음 글이 없습니다.

이전 글이 없습니다.

'HTML,CSS, JS > JavaScript' 카테고리의 다른 글

티스토리툴바