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