JavaScript에서 DOM이란 무엇입니까? DOM 노드에 액세스하는 방법-JS 튜토리얼-php.cn

JavaScript에서 DOM이란 무엇입니까? DOM 노드에 액세스하는 방법

伊谢尔伦

풀어 주다： 2017-07-20 13:20:54

원래의

1977명이 탐색했습니다.

DOM은 Document Object Model의 약어입니다. 문서 객체 모델은 XML이나 HTML을 트리 노드 형태로 표현한 문서이다. DOM 메서드와 속성을 사용하면 페이지의 모든 요소에 액세스하고 수정하고 삭제할 수 있으며 요소를 추가할 수도 있습니다. DOM은 물론 Javascript를 포함한 모든 언어로 구현될 수 있는 언어 독립적인 API입니다

아래 텍스트를 살펴보세요.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
 <head> 
  <title>My page</title> 
 </head> 
 <body> 
  <p class="opener">first paragraph</p> 
  <p><em>second</em> paragraph</p> 
  <p id="closer">final</p> 
 </body> 
</html>

로그인 후 복사

두 번째 문단을 살펴보겠습니다

<p><em>second</em> paragraph</p>

로그인 후 복사

p 태그임을 알 수 있습니다. body 태그에 포함되어 있습니다. 따라서 body는 p의 부모 노드이고 p는 자식 노드입니다. 첫 번째와 세 번째 단락도 본문의 하위 노드입니다. 이들은 모두 두 번째 단락의 형제 노드입니다. 이 em 태그는 두 번째 세그먼트 p의 하위 노드입니다. 따라서 p는 상위 노드입니다. 부모-자식 노드 관계는 나무와 같은 관계를 묘사할 수 있습니다. 그래서 DOM 트리라고 부릅니다.

DOM 노드 액세스

양식을 검증하거나 이미지를 변경하려면 요소(element.)에 액세스하는 방법을 알아야 합니다. 요소를 얻는 방법에는 여러 가지가 있습니다.
문서 노드
문서를 통해 현재 문서에 접근할 수 있습니다. Firebug(Firefox 플러그인)를 사용하여 문서의 속성과 메서드를 볼 수 있습니다.
모든 노드에는 nodeType, nodeName, nodeValue 속성이 있습니다. 문서의 nodeType이 무엇인지 살펴보겠습니다.

document.nodeType;//9

로그인 후 복사

총 12가지 노드 유형이 있습니다. 문서는 9입니다. 일반적으로 사용되는 것은 요소(element: 1), 속성(attribute: 2), 텍스트(text: 3)입니다.
노드에도 이름이 있습니다. HTML 태그의 경우. 노드 이름은 레이블 이름입니다. 텍스트 노드(text)의 이름은 #text입니다. 문서 노드(document)의 이름은 #document입니다.

노드에도 값이 있습니다. 텍스트 노드의 경우 값은 텍스트입니다. 문서의 값은 null입니다.
documentElement
XML에는 문서를 래핑하기 위한 ROOT 노드가 있습니다. HTML 문서의 경우. ROOT 노드는 html 태그입니다. 루트 노드에 액세스합니다. documentElement의 속성을 사용할 수 있습니다.

document.documentElement;//<html> 
document.documentElement.nodeType;//1 
document.documentElement.nodeName;//HTML 
document.documentElement.tagName;//对于element，nodeName和tagName相同

로그인 후 복사

하위 노드
하위 노드가 포함되어 있는지 확인하려면 다음 방법을 사용할 수 있습니다.

document.documentElement.hasChildNodes();//true

로그인 후 복사

HTML에는 두 개의 하위 노드가 있습니다.

document.documentElement.childNodes.length;//2 
 
document.documentElement.childNodes[0];//<head> 
 
document.documentElement.childNodes[1];//<body>

로그인 후 복사

자식 노드를 통해서도 부모 노드에 접근할 수 있습니다

document.documentElement.childNodes[1].parentNode;//<html>

로그인 후 복사

바디의 참조를 변수

var bd = document.documentElement.childNodes[1]; 
bd.childNodes.length;//9

로그인 후 복사

바디의 구조를 살펴보겠습니다

 
 first paragraph 
 <p><em>second</em> paragraph</p> 
 final

로그인 후 복사

왜 자식 노드인지 숫자는 9입니다.
먼저 P 4개와 댓글 총 4개입니다.
4개 노드에는 3개의 빈 노드가 포함됩니다. 7이에요.
본문과 첫 번째 p 사이의 8번째 공백 노드입니다.
아홉 번째는 댓글과 사이의 빈 노드입니다.
총 9개의 노드.

DOM에 빠르게 액세스

childNodes, parentNode, nodeName, nodeValue 및 속성을 통해 문서의 모든 노드에 액세스할 수 있습니다. 그러나 실제 애플리케이션에서는 텍스트 노드가 상당히 성가시다. 텍스트가 변경되면 스크립트에 영향을 미칠 수 있습니다. 또한 DOM 트리가 충분히 깊다면 접근하기가 정말 불편합니다. 다행스럽게도 더 편리한 방법으로 노드에 액세스할 수 있습니다. 이러한 메소드는

getElementsByTagName()
getElementsByName()
getElementById()

로그인 후 복사

먼저 getElementsByTagName()에 대해 이야기해 보겠습니다.
태그 이름을 통해 html 요소 모음을 가져옵니다. 예시는 다음과 같습니다

document.getElementsByTagName(&#39;p&#39;).length;//3

로그인 후 복사

반환되는 것은 컬렉션이므로 배열 첨자 형태나 item 메소드를 통해 접근할 수 있습니다. 비교하려면 배열 액세스 방법을 사용하는 것이 좋습니다. 더 간단한 것.

document.getElementsByTagName(&#39;p&#39;)[0];// <p class="opener"> 
document.getElementsByTagName(&#39;p&#39;).item(0);//和上面的结果一样 
 
document.getElementsByTagName(&#39;p&#39;)[0].innerHTML;//first paragraph

로그인 후 복사

요소의 속성에 액세스하려면 속성 컬렉션을 사용할 수 있습니다. 하지만 더 쉬운 방법은 속성으로 직접 액세스하는 것입니다. 예를 들어보세요

document.getElementsByTagName(&#39;p&#39;)[2].id;//closer

로그인 후 복사

class 속성은 정상적으로 사용할 수 없다는 점에 유의하세요. . 클래스명을 사용하세요. 클래스는 JavaScript 사양에서 예약어이기 때문입니다.

document.getElementsByTagName(&#39;p&#39;)[0].className;//opener

로그인 후 복사

다음 방법을 사용하여 페이지의 모든 요소에 액세스할 수 있습니다

<span style="color: #ff0000;">document.getElementsByTagName(&#39;*&#39;).length;//9</span>

로그인 후 복사

참고: 위 방법은 이전 버전의 IE에서는 지원되지 않습니다. document.all로 대체될 수 있습니다. IE7은 이미 이를 지원하지만 요소 노드뿐만 아니라 모든 노드가 반환됩니다.

Siblings, Body, First, Last Child
nextSibling 및 PreviousSibling은 DOM에 액세스하는 더 편리한 두 가지 방법입니다. 인접한 노드에 액세스하는 데 사용됩니다. 예는 다음과 같습니다.

var para = document.getElementById(&#39;closer&#39;) 
para.nextSibling;//"\n" 
para.previousSibling;//"\n" 
para.previousSibling.previousSibling;//<p> 
para.previousSibling.previousSibling.previousSibling;//"\n" 
para.previousSibling.previousSibling.nextSibling.nextSibling;// <p id="closer">

로그인 후 복사

body는 body 요소에 액세스하는 데 사용됩니다.