DOM "문서 개체 모델"

브라우저는 구조화된 문서(예: HTML 및 XML)를 DOM 모델을 기반으로 일련의 노드로 구문 분석한 다음 이러한 노드에서 트리 구조(DOM 트리)를 형성합니다. 모든 노드와 최종 트리 구조에는 표준화된 외부 인터페이스가 있습니다. 따라서 DOM은 웹페이지의 프로그래밍 인터페이스로 이해될 수 있습니다 . DOM에는 자체적인 국제 표준이 있으며, 현재 공통 버전은 DOM 3과 DOM 4입니다.

엄밀히 말하면 DOM은 JS에 속하지 않지만 DOM을 조작하는 것이 JS의 가장 일반적인 작업이고 JS는 DOM 조작에 가장 일반적으로 사용되는 언어이기도 합니다. DOM은 JS가 HTML을 구동하기 위해 브라우저 제조사에서 제공하는 API로, 브라우저 제조사마다 제공하는 API가 다르기 때문에 DOM과의 호환성 문제가 있습니다(일부).

1. 노드 수준

모든 HTML 또는 XML 문서는 DOM에 의해 노드로 구성된 계층 구조로 표현될 수 있습니다. 노드에는 여러 가지 유형이 있으며, 각 유형은 문서의 서로 다른 정보 및/또는 태그에 해당하며, 고유한 특성, 데이터 및 방법도 다르며 다른 유형과도 관계가 있습니다. 이러한 관계는 마크업이 특정 노드에 뿌리를 둔 트리 구조로 표시될 수 있도록 하는 계층 구조를 형성합니다. 다음 HTML을 예로 들어 보겠습니다.

<html>
<head>
  <title>Sample Page</title>
</head>
<body>
  <p>Hello World!</p>
</body>
</html>

그 중 문서 노드는 각 문서의 루트 노드를 나타낸다. 여기서 루트 노드의 유일한 하위 노드는 <html> 요소이며, 이를 문서 요소(documentElement)라고 합니다. 문서 요소는 문서의 가장 바깥쪽 요소로, 그 안에 다른 모든 요소가 존재합니다. 문서당 하나의 문서 요소만 있을 수 있습니다. HTML 페이지에서 문서 요소는 항상 <html> 요소입니다. XML 문서에는 미리 정의된 요소가 없으며 어떤 요소든 문서 요소가 될 수 있습니다. HTML의 각 태그는 이 트리 구조의 노드로 표시될 수 있습니다. 요소 노드는 HTML 요소를 나타내고, 속성 노드는 속성을 나타내고, 문서 유형 노드는 문서 유형을 나타내고, 주석 노드는 주석을 나타냅니다. DOM에는 총 12개의 노드 유형이 있으며, 이러한 유형은 모두 기본 유형을 상속합니다.

1.2.노드

DOM의 가장 작은 단위를 node라고 합니다 . 문서의 트리 구조(DOM 트리)는 다양한 유형의 노드로 구성됩니다. 각 노드는 문서 트리의 리프로 볼 수 있습니다.

노드에는 Document, DocumentType, Element, Text, Comment 및 DocumentFragment의 7가지 유형이 있습니다.

일반적으로 사용되는 노드

문서 노드

전체 HTML 문서 문서 객체는 window 객체의 속성으로 존재하며, 이를 획득하지 않고도 바로 사용할 수 있습니다.

요소 노드(Element)

HTML 문서의 HTML 태그.

속성 노드

요소의 속성은 태그의 각 속성을 나타내며, 여기서 속성 노드는 요소 노드의 하위 노드가 아니라 요소 노드의 일부라는 점에 유의해야 합니다.

텍스트 노드(텍스트)

HTML 태그의 텍스트 콘텐츠입니다.
기타 노드

문서 유형

doctype 태그(예: <!DOCTYPE html>).

논평

논평

문서조각

문서 조각

이 7가지 유형의 노드는 모두 브라우저에서 기본적으로 제공하는 노드 개체(아래에서 설명할 노드 개체)에서 파생된 개체이며 몇 가지 공통 속성과 메서드를 갖습니다.

1.3.노드 트리

문서의 모든 노드는 해당 수준에 따라 트리 구조로 추상화될 수 있습니다. 이 트리 구조가 DOM입니다.

최상위 노드는 document전체 문서를 나타내는 노드입니다. 문서의 최상위 HTML 태그는 일반적으로 <html>트리 구조의 루트 노드를 구성하고 다른 HTML 태그 노드는 그 하위 노드입니다.

루트 노드를 제외한 다른 노드는 주변 노드와 세 가지 관계를 갖습니다.

상위 노드 관계(parentNode): 직접 상위 노드.
하위 노드 관계(childNode): 직접 하위 노드.
형제 노드 관계(sibling): 동일한 부모 노드를 갖는 노드.

DOM은 세 가지 관계의 노드를 얻기 위한 작업 인터페이스를 제공합니다. 그 중 자식 노드 인터페이스는 firstChild(첫 번째 자식 노드), lastChild(마지막 자식 노드) 등의 속성을 포함하고, 형제 노드 인터페이스는 nextSibling(직후 형제 노드), previousSibling(직전 형제 노드) 속성을 포함한다.

2.노드 유형

DOM 레벨 1은 모든 DOM 노드 유형에서 구현해야 하는 Node라는 인터페이스를 설명합니다. Node 인터페이스는 JavaScript에서 Node 유형으로 구현되어 IE를 제외한 모든 브라우저에서 직접 액세스할 수 있습니다. JavaScript에서는 모든 노드 유형이 노드 유형에서 상속되므로 모든 유형이 동일한 기본 속성과 메서드를 공유합니다.

2.1.속성

2.1.1.노드 유형

nodeType 속성은 노드 유형을 나타내는 정수 값을 반환하며, 일반적인 노드 유형은 다음과 같습니다.

노드 유형	값	대응 상수
문서 노드	9	노드.DOCUMENT_NODE
요소 노드	1	노드.ELEMENT_NODE
속성 노드(attr)	2	노드.ATTRIBUTE_NODE
텍스트 노드(텍스트)	삼	노드.TEXT_NODE
문서 유형 노드(DocumentType)	10	노드.DOCUMENT_TYPE_NODE
코멘트 노드(Comment)	8	노드.COMMENT_NODE
문서 조각 노드(DocumentFragment)	11	노드.DOCUMENT_FRAGMENT_NODE

<script>
  console.log(document.nodeType); //9
</script>

2.1.2.노드이름

nodeName 속성은 노드의 이름을 반환합니다.

<div id="d1">hello world</div>
<script>
  var div = document.getElementById('d1');
  console.log(div.nodeName); //DIV
</script>

2.1.3.노드값

nodeValue 속성은 현재 노드 자체의 텍스트 값을 나타내는 문자열을 반환하며 이 속성은 읽고 쓸 수 있습니다. 텍스트 값은 텍스트 노드(text), 주석 노드(comment) 및 속성 노드(attr)에만 있습니다.

<div id="d1">hello world</div>
<script>
  var div = document.getElementById('d1');
  console.log(div.nodeValue); // null
  // 读
  console.log(div.firstChild.nodeValue); //hello world
  // 写
  div.firstChild.nodeValue = '123';
</script>

2.1.4.textContent

textContent 속성은 현재 노드와 모든 하위 노드의 텍스트 콘텐츠를 반환합니다.

<div id="d1">Hello <span>JavaScript</span> DOM</div>
<script>
  var div = document.getElementById('d1');
  console.log(div.textContent); //Hello JavaScript DOM
</script>

2.1.5.next형제

nextSibling 속성은 현재 노드 바로 다음의 첫 번째 형제 노드를 반환합니다. 현재 노드 뒤에 형제 노드가 없으면 null을 반환합니다.

( 참고 : "space" 또는 "carriage return"과 같은 텍스트 노드를 얻을 수 있습니다.)

<div id="d1">hello</div><div id="d2">world</div>
<script>
  var div1 = document.getElementById('d1');
  var div2 = document.getElementById('d2');
  console.log(div1.nextSibling); //<div id="d2">world</div>
  console.log(div1.nextSibling === div2); // true
</script>

2.1.6.previous형제자매

PreviousSibling 속성은 현재 노드 앞에서 가장 가까운 형제 노드를 반환합니다. 현재 노드 앞에 형제 노드가 없으면 null을 반환합니다.

<div id="d1">hello</div><div id="d2">world</div>
<script>
  var div1 = document.getElementById('d1');
  var div2 = document.getElementById('d2');
  console.log(div2.previousSibling); //<div id="d1">hello</div>
  console.log(div2.previousSibling === div1); // true
</script>

2.1.7.부모노드

parentNode 속성은 현재 노드의 부모 노드를 반환합니다. 노드의 경우 상위 노드는 요소 노드(element), 문서 노드(document) 및 문서 조각 노드(documentfragment)의 세 가지 유형만 될 수 있습니다.

<div id="d1">hello world</div>
<script>
  var div1 = document.getElementById('d1');
  console.log(div1.parentNode); // body
</script>

2.1.8.parentElement

parentElement 속성은 현재 노드의 상위 요소 노드를 반환합니다. 현재 노드에 상위 노드가 없거나 상위 노드 유형이 요소 노드가 아닌 경우 null을 반환합니다.

<div id="d1">hello world</div>
<script>
  var div1 = document.getElementById('d1');
  console.log(div1.parentElement); // body
  // 将父元素节点的背景颜色设置为红色
  div1.parentElement.style.backgroundColor = 'red';
</script>

2.1.9.firstChild와 lastChild

firstChild 속성은 현재 노드의 첫 번째 자식 노드를 반환합니다. 현재 노드에 자식 노드가 없으면 null을 반환하고, Last는 마지막 자식 노드를 반환합니다.

<div id="d1">hello world<div>我是子节点</div></div>
<div id="d2"><div>我是子节点</div></div>
<script>
  var div1 = document.getElementById('d1');
  console.log(div1.firstChild); // hello world
  console.log(div1.lastChild); // <div>我是子节点</div>
  var div2 = document.getElementById('d2');
  console.log(div2.firstChild); // <div>我是子节点</div>
</script>

2.1.10.childNodes

childNodes 속성은 멤버가 현재 노드의 모든 하위 노드를 포함하는 배열과 유사한 객체(NodeList 컬렉션)를 반환합니다.

<div id="d1">hello world<div>我是子节点</div></div>
<script>
  var div1 = document.getElementById('d1');
  console.log(div1.childNodes); //NodeList[text, div]
</script>

for 루프를 사용하여 노드의 모든 하위 노드를 반복할 수도 있습니다.

var div = document.getElementById('div1');
var children = div.childNodes;
for (var i = 0; i < children.length; i++) {
  // ...
}

2.2.방법

노드를 조작하기 위해서는 다음과 같은 메소드가 일반적으로 사용되는데, 가장 일반적으로 사용되는 메소드는 childNodes 목록의 끝에 노드를 추가하는 데 사용되는appendChild()이다.

참고: 다음 네 가지 메서드는 모두 상위 노드 개체를 호출해야 합니다!

2.2.1.appendChild

AppendChild 메소드는 노드 객체를 매개변수로 받아들이고 이를 현재 노드에 마지막 자식 노드로 삽입합니다. 이 메서드의 반환 값은 삽입된 문서의 하위 노드입니다.

<script>
  // 创建元素节点p
  var p = document.createElement('p');
  // 向p标签插入内容
  p.innerHTML = '我是一个p标签';
  // 将节点插入到body中
  document.body.appendChild(p);
</script>

2.2.2.insertBefore()

insertBefore 메소드는 부모 노드 내부의 지정된 위치에 노드를 삽입하는 데 사용됩니다.

var insertNode = parentNode.insertBefore(newNode, referenceNode);

insertBefore 메소드는 두 개의 매개변수를 받아들이는데, 첫 번째 매개변수는 삽입할 노드 newNode이고, 두 번째 매개변수는 부모 노드 parentNode 내부의 자식 노드 referenceNode입니다. newNode는 referenceNode의 하위 노드 앞에 삽입됩니다. 반환 값은 삽입된 새 노드입니다. newNode

<div id="parentElement">
  <span id="childElement">foo bar</span>
</div>
<script>
  //创建一个新的、普通的<span>元素
  var sp1 = document.createElement("span");
  // 向span标签插入内容
  sp1.innerHTML = '我是span标签'
  //插入节点之前，要获得节点的引用
  var sp2 = document.getElementById("childElement");
  //获得父节点的引用
  var parentDiv = sp2.parentNode;
  //在DOM中在sp2之前插入一个新元素
  parentDiv.insertBefore(sp1, sp2);
</script>

2.2.3.removeChild()

RemoveChild 메소드는 하위 노드를 매개변수로 받아들이고 현재 노드에서 하위 노드를 제거하는 데 사용됩니다. 반환 값은 제거된 하위 노드입니다.

<div id="d1">
  <span id="s1">我是span标签</span>
</div>
<script>
  var span1 = document.getElementById('s1');
  span1.parentNode.removeChild(span1);
</script>

2.2.4.replaceChild()

replacementChild 메소드는 현재 노드의 하위 노드를 새 노드로 바꾸는 데 사용됩니다.

var replacementNode = parentNode.replaceChild(newChild, oldChild);

replacementChild 메소드는 두 개의 매개변수를 사용하는데, 첫 번째 매개변수 newChild는 교체할 새 노드이고, 두 번째 매개변수 oldChild는 교체할 자식 노드입니다. 반환 값은 교체된 노드 oldChild입니다.

<div id="d1">
  <span id="s1">我是span标签</span>
</div>
<script>
  var span1 = document.getElementById('s1');
  //创建一个新的div标签
  var div1 = document.createElement("div");
  // 向div标签插入内容
  div1.innerHTML = '我是div1标签';
  // 节点替换
  span1.parentNode.replaceChild(div1, span1);
</script>

2.2.5 기타 방법

클론노드()

메서드는 메서드가 호출된 노드의 복사본을 반환합니다.

var dupNode = node.cloneNode(deep);

마디

복제할 노드

dupNode

생성된 복제본 노드를 복제합니다.

깊은 선택 사항

Deep cloning 사용 여부 true인 경우 해당 노드의 모든 하위 노드도 복제하고, false인 경우 노드 자체만 복제합니다.

var p = document.getElementById("para1"),
var p_prime = p.cloneNode(true);

3.문서형식

Javascript는 Document 유형을 사용하여 문서를 나타냅니다. 브라우저에서 문서 객체는 HTMLDocument의 인스턴스이며 전체 HTML 페이지를 나타냅니다. document 객체는 window 객체의 속성이므로 직접 호출할 수 있습니다. HTMLDocument는 Document에서 상속됩니다.

3.1.속성

문서요소

항상 HTML 페이지의 <html> 요소를 가리킵니다.

몸

<body> 요소를 직접 가리킵니다.

문서 유형

<!DOCTYPE>에 액세스하세요. 브라우저 지원이 일관되지 않으며 거의 사용되지 않습니다.

제목

문서 제목 가져오기

URL

전체 URL 얻기

도메인

도메인 간 액세스에 자주 사용되는 도메인 이름을 얻어 설정합니다.

이미지

모든 img 객체를 가져오고 HTMLCollection 클래스 배열 객체를 반환합니다.

양식

모든 양식 객체를 가져오고 HTMLCollection 클래스 배열 객체를 반환합니다.

연결

문서에서 href 속성이 있는 모든 <a> 요소를 가져옵니다.

3.2.DOM 프로그래밍 인터페이스

HTML DOM은 JavaScript(및 기타 프로그래밍 언어)를 통해 액세스할 수 있습니다.

DOM에서는 모든 HTML 요소가 객체 로 정의됩니다 .

프로그래밍 인터페이스는 각 개체의 속성과 메서드입니다.

속성은 가져오거나 설정할 수 있는 값(예: HTML 요소의 내용 변경)입니다.

메소드는 수행할 수 있는 작업(예: HTML 요소 추가 또는 제거)입니다.

예

다음 예에서는 id="demo"를 사용하여 <p> 요소의 콘텐츠를 변경합니다.

<html>
<body>

<p id="demo"></p>

<script>
    document.getElementById("demo").innerHTML = "Hello World!";
</script>

</body>
</html>

위의 예에서 getElementById는 메소드이고 innerHTML은 속성입니다.

getElementById 방법

HTML 요소에 액세스하는 가장 일반적인 방법은 요소의 ID를 사용하는 것입니다.

위의 예에서 getElementById 메소드는 id="demo"를 사용하여 요소를 찾습니다.

innerHTML 속성

요소의 내용을 가져오는 가장 쉬운 방법은 innerHTML 속성을 사용하는 것입니다.

innerHTML 속성은 HTML 요소의 내용을 가져오거나 바꾸는 데 사용할 수 있습니다.

innerHTML 속성은 <html> 및 <body>를 포함한 모든 HTML 요소를 가져오거나 변경하는 데 사용할 수 있습니다.

3.3.요소 찾기

방법	설명하다
document.getElementById( id )	요소 ID로 요소 찾기
document.getElementsByTagName( 이름 )	태그 이름으로 요소 찾기
document.getElementsByClassName( 이름 )	클래스 이름으로 요소 찾기
document.querySelector()	지정된 CSS 선택기와 일치하는 문서의 첫 번째 요소를 반환합니다.
document.querySelectorAll()	document.querySelectorAll()은 문서의 CSS 선택기와 일치하는 모든 요소 노드의 목록을 반환하는 HTML5에 도입된 새로운 메서드입니다.

getElementById()

지정된 ID와 일치하는 요소를 반환합니다.

<div id="d1">我是一个div标签</div>
<script>
  // 查找id为d1的标签
  var div = document.getElementById('d1');
  console.log(div);
</script>

getElementsByTagName()

HTMLCollection지정된 태그 이름과 일치하는 모든 요소를 포함하는 (의사 배열)을 반환합니다 .

<p>我是p标签</p>
<p>我是p标签</p>
<p>我是p标签</p>
<script>
  // 查找所有p标签
  var p = document.getElementsByTagName('p');
  console.log(p);
</script>

getElementsByClassName()

지정된 클래스 이름과 일치하는 모든 요소를 포함하는 HTML 컬렉션 HTMLCollection(의사 배열)을 반환합니다.

<div class="div1">我是div标签</div>
<div class="div1">我是div标签</div>
<div class="div1">我是div标签</div>
<script>
  // 查找class为div1的标签
  var div = document.getElementsByClassName('div1');
  console.log(div);
</script>

document.querySelector()

지정된 CSS 선택기와 일치하는 문서의 첫 번째 요소를 반환합니다.

<div id="div1">我是一个div</div>
<div id="div1">我是一个div</div>
<script>
  document.querySelector("#div1").innerHTML = "Hello World!";
</script>

document.querySelectorAll()

document.querySelectorAll()은 문서의 CSS 선택기와 일치하는 모든 요소 노드의 목록을 반환하는 HTML5에 도입된 새로운 메서드입니다.

<div class="div1">我是一个div</div>
<div class="div1">我是一个div</div>
<script>
  console.log(document.querySelectorAll(".div1"));
  var x = document.querySelectorAll(".div1");
  x[0].innerHTML = '我是新的div';
</script>

3.4 요소 추가

document.createElement( 요소 )

AppendChild() 또는 insertBefore() 메서드와 함께 사용할 새 HTML 요소를 만듭니다. 그 중appendChild() 메소드는 노드의 하위 노드 목록 끝에 새로운 하위 노드를 추가합니다. insertBefore() 메소드는 노드의 하위 노드 목록의 임의 위치에 새 노드를 삽입합니다.

<script>
  // 创建元素节点p
  var p = document.createElement('p');
  // 向p标签插入内容
  p.innerHTML = '我是一个p标签';
  // 将节点插入到body中
  document.body.appendChild(p);
</script>

3.5.쓰기

document.write()

문서에 텍스트나 HTML 표현식 또는 JavaScript 코드를 작성합니다.

<script>
  document.write("<p>Hello world!</p>");
  document.write("<span>Hello DOM!</span>");
  document.write("Hello Weekend!");
</script>

4. 요소 유형

Element 개체는 웹 페이지의 HTML 요소에 해당합니다. 각 HTML 요소는 DOM 트리의 요소 노드 개체로 변환됩니다.

4.1.속성

속성: 이 요소와 관련된 모든 속성의 컬렉션을 반환합니다.

classList: 이 요소에 포함된 클래스 특성 컬렉션을 반환합니다.

className: 지정된 요소의 클래스 속성 값을 가져오거나 설정합니다.

clientHeight: 패딩을 포함하여 요소 내부의 높이를 가져오지만 가로 스크롤 막대, 테두리 및 여백은 제외됩니다.

clientTop: 위쪽 테두리부터 요소의 높이를 반환합니다.

clientLeft: 왼쪽 테두리에서 요소의 너비를 반환합니다.

clientWidth: 패딩을 포함하지만 세로 스크롤 막대, 테두리 및 여백을 제외한 요소의 내부 너비를 반환합니다.

innerHTML: HTML 구문으로 표시되는 요소의 자손을 설정하거나 가져옵니다.

tagName: 현재 요소의 태그 이름을 반환합니다.

4.2 일반적으로 사용되는 방법

방법	설명하다
element.innerHTML = 새로운 HTML 콘텐츠	요소의 innerHTML 변경
요소.속성 = 값	속성 값 수정
요소.getAttribute()	요소 노드의 지정된 속성 값을 반환합니다.
element.setAttribute( 속성 , 값 )	HTML 요소의 속성값 설정 또는 변경
element.style.property = 새 스타일	HTML 요소의 스타일 변경

요소.innerHTML

속성은 HTML 구문으로 표시되는 요소의 하위 항목을 설정하거나 가져옵니다.

<div id="div1">我是一个div</div>
<script>
  var d1 = document.getElementById('div1');
  // 获取
  console.log(d1.innerHTML);
  // 设置
  d1.innerHTML = '我是新的内容'
</script>

요소.속성 = 값

기존 속성 값 수정

<div id="div1">123</div>
<script>
  var d1 = document.getElementById('div1');
  // 直接将已经存在的属性进行修改
  d1.id = 'div2';
</script>

요소.getAttribute()

요소 노드의 지정된 속성 값을 반환합니다.

<div id="div1">我是一个div</div>
<script>
  var div = document.getElementById('div1');
  console.log(div.getAttribute('id')); // div1
</script>

element.setAttribute( 속성 , 값 )

지정된 속성을 지정된 값으로 설정하거나 변경합니다.

<div id="div1">我是一个div</div>
<script>
  var d1 = document.getElementById('div1');
  // 设置div1的class为divCla
  d1.setAttribute('class', 'divCla');
</script>

요소.스타일.속성

요소의 스타일 속성을 설정하거나 반환합니다.

<div id="div1">我是一个div</div>
<script>
  var d1 = document.getElementById('div1');
  // 获取div1的style样式
  console.log(d1.style);
  // 设置div1的style
  d1.style.backgroundColor = 'red';
</script>

자세한 내용은 HTML DOM Element 객체를 참조하세요.

요소 - 웹 API 인터페이스 참조 | MDN

5.텍스트 유형

텍스트 노드는 Text 유형으로 표시되며 문자 그대로 해석된 일반 텍스트를 포함합니다. 여기에는 이스케이프된 HTML 문자가 포함될 수도 있지만 HTML 코드는 포함되지 않습니다.

5.1 속성과 방법

길이

텍스트 길이

추가데이터(텍스트)

텍스트 추가

deleteData(beginIndex,count)

텍스트 삭제

insertData(beginIndex,text)

텍스트 삽입

교체데이터(beginIndex,count,text)

대체 텍스트

분할텍스트(시작인덱스)

현재 텍스트 노드를 BeginIndex 위치에서 두 개의 텍스트 노드로 분할합니다.

document.createTextNode(텍스트)

텍스트 노드를 생성합니다. 매개변수는 노드에 삽입할 텍스트입니다.

부분문자열데이터(beginIndex,count)

BeginIndex에서 시작하는 개수 하위 문자열 추출

종합사례

<div id="container"></div>
<script>
  // 创建文本节点
  var textNode = document.createTextNode('Hello World!');
  // 获取container
  var div = document.getElementById('container');
  // 将文本节点插入container
  div.appendChild(textNode);
  // 替换文本
  textNode.replaceData(0,5,'Hi');
  // 插入文本
  textNode.insertData(0, 'Hello')
</script>