JavaScript/DOM

DOM(Document Object Model)이란?!

yunajoe 2022. 11. 19. 17:56

DOM(Document Object Model)이란?! 

- XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스
- DOM을 활용하면 JS로 HTML태그를 자유롭게 활용할 수 있다

- JS를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법

(웹 문서를 제어할 수 있도록 해 주는 것)

 

 

 

DOM 종류

1. Core DOM : 모든 문서 타입을 위한 DOM 모델

2. HTML DOM : HTML 문서를 위한 DOM 모델

3. XML DOM : XML 문서를 위한 DOM 모델

 

 

 

 

 

HTML  DOM 구조 

HTML 문서의 정보는 노드 트리(node tree)라고 불리는 계층적 구조에 저장된다

이러한 노드 트리는 노드들의 집합이며, 노드 간의 관계를 보인다

노드 트리는 최상위 레벨인 루트 노드(root node)로부터 시작하여, 가장 낮은 레벨인 텍스트 노드까지 뻗어 내려갑니다.

자바스크립트에서는 HTML DOM을 이용하여 노드 트리에 포함된 모든 노드에 접근

 

모든 HTML 태그는 요소 노드(Element)가 된다 
HTML 태그에서 사용하는 텍스트 내용은 텍스트 노드(Text Node)
HTML태그에 있는 속성은 속성 노드(Attribute Node) 
주석은 주석(Comment Node)

노드(Node) 종류  

문서 노드(document node) HTML 문서 전체를 나타내는 노드임.
요소 노드(element node) 모든 HTML 요소는 요소 노드이며, 속성 노드를 가질 수 있는 유일한 노드임.
속성 노드(attribute node) 모든 HTML 요소의 속성은 속성 노드이며, 요소 노드에 관한 정보를 가지고 있음.
하지만 해당 요소 노드의 자식 노드(child node)에는 포함되지 않음.
텍스트 노드(text node) HTML 문서의 모든 텍스트는 텍스트 노드임.
주석 노드(comment node) HTML 문서의 모든 주석은 주석 노드임.

 

요소 노드(element node) 에 대한 이동 프로퍼티  

- 요소노드(elementnode)에 접근할때 사용가능

element.children 자식 요소 노드 element의 자식 요소 모음(HTMLCollection)
element.firstElementChild 자식 요소 노드 element의 첫 번째 자식 요소 하나
element.lastElementChild 자식 요소 노드 element의 마지막 자식 요소 하나
element.parentElement 부모 요소 노드 element의 부모 요소 하나
element.previousElementSibling 형제 요소 노드 element의 이전(previous) 혹은 좌측(left)에 있는 요소 하나
element.nextElementSibling 형제 요소 노드 element의 다음(next) 혹은 우측(right)에 있는 요소 하나

모든 노드에 대한 이동 프로퍼티

- 요소노드(elementnode)가 다른 노드들에 접근할때 사용가능

node.childNodes 자식 노드 node의 자식 노드 모음(NodeList)
node.firstChild 자식 노드 node의 첫 번째 자식 노드 하나
node.lastChild 자식 노드 node의 마지막 자식 노드 하나
node.parentNode 부모 노드 node의 부모 요소 하나
node.previousSibling 형제 노드 node의 이전(previous) 혹은 좌측(left)에 있는 노드 하나
node.nextSibling 형제 노드 node의 다음(next) 혹은 우측(right)에 있는 노드 하

 

실습 - 요소노드(element node) 이용해보기

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>JS with Codeit</title>
</head>
<body>
  <div id="content">
    <h2 id="title-1">Cat-1</h1>
    <ul id="list-1">
      <li>Ragdoll</li>
      <li>British Shorthair</li>
      <li>Scottish Fold</li>
      <li>Bengal</li>
      <li>Siamese</li>
      <li>Maine Coon</li>
      <li>American Shorthair</li>
      <li>Russian Blue</li>
    </ul>
    <h2 id="title-2">Cat-2</h1>
    <ul id="list-2">
      <li>Sphynx</li>
      <li>Munchkin</li>
      <li>Persian</li>
      <li>Norwegian Forset</li>
      <li>Turkish Angora</li>
      <li>Bombay</li>
      <li>Selkirk Rex</li>
      <li>Munchkin</li>
    </ul>
  </div>
  <script src="index.js"></script>
</body>
</html>
// DOM 트리 

const myTag = document.querySelector('#list-1');

console.log(myTag);   


// 형제 요소 노드
console.log(myTag.previousElementSibling); // 
console.log(myTag.nextElementSibling);

// 부모 요소 노드
console.log(myTag.parentElement);

// 자식 요소 노드
console.log(myTag.children);
console.log(myTag.firstElementChild);
console.log(myTag.lastElementChild);

 

 

 

\