티끌모아 태산

HTML Document Object Model(DOM) 본문

CS 지식/인터넷프로그래밍

HTML Document Object Model(DOM)

goldpig 2023. 6. 15. 17:26
728x90

HTML DOM: Standard object model and API for HTML

HTML DOM을 사용하면 JavaScript와 같은 스크립트 언어를 통해 웹 페이지의 모든 요소에 접근하고 조작할 수 있다. 각 요소는 트리의 노드로 표현되며, 노드 간에는 부모-자식 관계가 형성된다.

  • 넓은 의미: 웹 브라우저가 html을 인식하는 방식
  • 좁은 의미: document 객체와 관련된 객체의 집합

DOM -> html 페이지에 tag를 추가, 수정, 삭제 가능하다. html tag는 html 입장에서는 element이고 JavaScript 입장에서는 문서 객체이다. 즉, HTML DOM을 사용하여 웹 페이지의 요소에 접근하고 조작할 수 있으므로, 동적인 웹 애플리케이션을 개발하거나 웹 페이지의 특정 부분을 변경하는 등의 작업에 유용하게 활용

 

웹 페이지가 로드 될 때, 브라우저가 a Document Object Model of the Page를 생성한다. 그러면 JS와 같은 스크립트 언어가 이 DOM을통해 웹 페이지의 모든 요소에 접근하여 조작할 수 있다. HTML DOM model은 tree 형태로 구조화 되어 있다. 

 

document Object: Owner of all other objects in a Web page

<!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>
    <h1>My First Page</h1>
    <p id="demo"></p>
// document Object
    <script>
        document.getElementById("demo").innerHTML = "My First JavaScript";
        // document.querySelector("p").innerHTML = "My First JavaScript";
    </script>
</body>
</html>

 

innerText vs innerHTML vs textContent

  • innerText: spacing과 inner element tags 없이 단지 text만 반환한다. 
  • innerHTML: all spacing and inner element tags를 포함해서 text를 반환한다. 
  • textConent: inner element tags는 포함하지 않고 spacing만 포함해서 text를 반환한다. 
<p id="demo"> has extra spacing and contains <span>a span element</span>.</p>
document.getElementById("demo").innerText
// result
"has extra spacing and contains a span element." //without spacing and inner element tags

document.getElementById("demo").innerHTML
// result
" has extra spacing and contains <span>a span element</span>." // all spacing and inner element tags

document.getElementById("demo").textContent
// result
" has extra spacing and contains a span element." all spacing and without inner element tags
728x90

'CS 지식 > 인터넷프로그래밍' 카테고리의 다른 글

JavaScript Events  (0) 2023.06.15
Node JS Basic(2)  (0) 2023.06.08
Node JS Basic(1)  (0) 2023.06.05
'CS 지식/인터넷프로그래밍' Related Articles more