JavaScript

JavaScript HTML DOM

dev.jelee 2024. 8. 23. 22:34

JavaScript HTML DOM

HTML DOM을 사용하면 JavaScript는 HTML 문서의 모든 요소에 엑세스(접근)하고 변경할 수 있다.

 

HTML 문서의 계층 관계 (DOM)

  • 웹 페이지가 로드되면 브라우저는 페이지의 문서 객체 모델(Document Object Model )을 생성한다.
  • HTML DOM모델은 객체 트리로 구성되어 있다.
  • 객체 모델을 통해 JavaScript는 동적 HTML을 생성하는데 필요한 모든 기능을 얻는다.
    • JavaScript는 페이지의 모든 HTML 요소를 변경할 수 있다.
    • JavaScript는 페이지의 모든 HTML 속성을 변경할 수 있다.
    • JavaScript는 페이지의 모든 CSS 스타일을 변경할 수 있다.
    • JavaScript는 기존 HTML 요소 및 속성을 제거할 수 있습니다.
    • JavaScript는 새로운 HTML 요소와 속성을 추가할 수 있습니다.
    • JavaScript는 페이지의 모든 기존 HTML 이벤트에 반응할 수 있습니다.
    • JavaScript 는 페이지에 새로운 HTML 이벤트를 생성할 수 있습니다.

 

DOM이란?

  • DOM은 W3C(World Wide Web Consortium) 표준이다.
  • DOM은 문서 액세스(접근)에 대한 표준을 정의한다.
  • "W3C DOM(문서 개체 모델)은 프로그램과 스크립트가 문서의 콘텐츠, 구조 및 스타일에 동적으로 액세스하고 업데이트할 수 있도록 하는 플랫폼이자 언어 중립적인 인터페이스입니다.”
  • W3C DOM 표준은 세 가지 부분으로 구분된다.
    • Core DOM - 모든 문서 유형에 대한 표준 모델
    • XML DOM - XML 문서의 표준 모델
    • HTML DOM - HTML 문서의 표준 모델

 

HTML DOM이란?

HTML DOM은 HTML용 표준 객체 모델이자 프로그래밍 인터페이스이다. 이는 다음을 정의한다.

  • Object(객체)로서의 HTML 요소
  • 모든 HTML 요소의 properties(속성) 
  • 모든 HTML 요소에 액세스(접근)하는 methods(메서드)
  • 모든 HTML 요소에 대한 events(이벤트)

즉, HTML DOM은 HTML 요소를 가져오고, 변경하고, 추가하고, 삭제하는 방법에 대한 표준이다.

 

JavaScript HTML DOM 탐색

  • HTML DOM을 사용하면 노드 관계를 사용하여 노드 트리를 탐색할 수 있다.

 

DOM Nodes

  • W3C HTML DOM 표준에 따르면 HTML 문서의 모든 내용은 노드이다.
    • 전체 문서는 문서 노드이다.
    • 모든 HTML 요소는 요소 노드이다.
    • HTML 요소 내부의 텍스트는 텍스트 노드이다.
    • 모든 HTML 속성은 속성 노드이다(더 이상 사용되지 않음).
    • 모든 주석은 주석 노드이다.
  • HTML DOM을 사용하면 노드 트리의 모든 노드에 JavaScript로 액세스(접근)할 수 있다.
  • 새로운 노드를 생성할 수 있으며, 모든 노드를 수정하거나 삭제할 수 있습니다.

노드 트리 구조 예시

 

노드 관계

  • 노드 트리의 노드는 서로 계층적 관계를 갖는다.
  • 부모, 자식, 형제자매라는 용어는 관계를 설명하는 데 사용된다.
    • 노드 트리에서 최상위 노드를 루트(또는 루트 노드)라고 한다.
    • 루트(상위가 없음)를 제외하고 모든 노드에는 정확히 하나의 상위가 있다.
    • 노드는 여러 개의 자식을 가질 수 있다.
    • 형제(형제 또는 자매)는 동일한 상위를 갖는 노드이다.

< 노드 관계 설명을 위한 예시 코드 ↓ >

<html>

  <head
    <title>DOM Tutorial</title>
  </head>

  <body>
    <h1>DOM Lesson one</h1>
    <p>Hello world!</p>
  </body>

</html>

위 소스 코드를 설명하기 위한 그림.

위 소스 코드를 설명하기 위한 그림.
  • 위의 HTML에서 노드 설명
    • <html>은 루트 노드이며 부모는 없다.
    • <html>은 <head>와 <body>의 부모이다.
    • <head>는 <html>의 첫 번째 자식이다.
    • <body>는 <html>의 마지막 자식이다.
    • <head>에는 자녀가 한 명 있다: <title>
    • <title>에는 하나의 하위 항목(텍스트 노드)이 있다: "DOM Tutorial"
    • <body>에는 <h1>과 <p>라는 두 개의 자식이 있다.
    • <h1>에는 하나의 자식이 있다: "DOM Lesson one"
    • <p>에는 "Hello world!"라는 자식이 하나 있다.
    • <h1>과 <p>는 형제이다.

 

노드 간 탐색

  • 다음 노드 속성을 사용하여 JavaScript로 노드 간을 탐색할 수 있다.
    • parentNode
    • childNodes[*nodenumber*]
    • firstChild
    • lastChild
    • nextSibling
    • previousSibling

 

DOM Root Nodes

전체 문서에 대한 액세스를 허용하는 두 가지 특수 속성이 있다.

  • document.body - 문서 본문
  • document.documentElement - 전체 문서

 

The nodeName Property

nodeName 속성은 노드의 이름을 지정한다.

  • nodeName은 읽기 전용이다.
  • 요소 노드의 nodeName은 태그 이름과 동일하다.
  • 속성 노드의 nodeName은 속성 이름이다.
  • 텍스트 노드의 nodeName은 항상 #text 다.
  • 문서 노드의 nodeName은 항상 #document 다.
참고: nodeName에는 항상 HTML 요소의 대문자 태그 이름이 포함된다.

 

The nodeValue Property

nodeValue 속성은 노드의 값을 지정합니다.

  • 요소 노드의 nodeValue가 null 다.
  • 텍스트 노드의 nodeValue는 텍스트 자체이다.
  • 속성 노드의 nodeValue는 속성 값이다.

 

The nodeType Property

nodeType 속성은 읽기 전용이며 노드의 유형을 반환합니다.

가장 중요한 nodeType 속성은 다음과 같다.

Node Type Example

노드 타입 예시
ELEMENT_NODE 1 <h1 class="heading">W3Schools</h1>
ATTRIBUTE_NODE 2 class = "heading" (deprecated)
TEXT_NODE 3 W3Schools
COMMENT_NODE 8 <!-- This is a comment -->
DOCUMENT_NODE 9 The HTML document itself (the parent of <html>)
DOCUMENT_TYPE_NODE 10 <!Doctype html>

 

 


 

***추후 w3schools 자료 보고 정리하기.

 

참고 자료

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

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