JavaScript HTML DOM 탐색(요약 공유)

이 글은 주로 HTML DOM 탐색과 관련된 문제를 소개하는 javascript에 대한 관련 지식을 제공합니다. 모두에게 도움이 되기를 바랍니다.

【관련 권장 사항: javascript 비디오 튜토리얼, web front-end】

JS HTML DOM 탐색

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

DOM 노드

W3C HTML DOM 표준에 따르면 HTML 문서의 모든 것은 노드입니다:

• 전체 문서는 문서 노드입니다.
• 각 HTML 요소는 요소 노드입니다.
• 문서 내의 텍스트 HTML 요소는 텍스트 노드입니다.
• 모든 HTML 속성은 속성 노드입니다.
• 모든 주석은 주석 노드입니다.
  
  HTML DOM을 사용하면 노드 트리의 모든 노드에 JavaScript를 통해 액세스할 수 있습니다.

새 노드를 생성하고 모든 노드를 수정 및 삭제하는 기능.

노드 관계

노드 트리의 노드는 서로 일정한 계층 관계를 가지고 있습니다.

• 이러한 관계를 설명하는 데는 부모, 자식 및 형제, 부모, 자식 및 형제라는 용어가 사용됩니다.
  • 노드 트리에서 최상위 노드를 루트(루트 노드)라고 합니다.
  • 모든 노드에는 부모가 있습니다. 루트 제외(루트 노드에는 상위 노드가 없음)
  • 노드는 특정 수의 하위를 가질 수 있습니다
  • Sibs(형제 또는 자매)는 동일한 상위 노드를 갖는 노드를 나타냅니다.

예:

   
       <title>DOM 教程</title>
   

  
       <h1>DOM 第一课</h1>
       <p>Hello world!</p>
   

从以上的 HTML 中您能读到以下信息：

-  是根节点
-  没有父
-  是  和  的父
-  是  的第一个子
-  是  的最后一个子
**同时：**

-  有一个子：<title>
- <title> 有一个子（文本节点）："DOM 教程"
- </title>
</title> 有两个子：<h1> 和 </h1><p>
- </p><h1> 有一个子："DOM 第一课"
- </h1><p> 有一个子："Hello world!"
- </p><h1> 和 </h1><p> 是同胞</p>

자바스크립트를 사용하면 다음

을 사용하여 노드 간을 탐색할 수 있습니다. parentNode

childNodes[nodenumber]
• firstChild
• lastChild
• nextSibling
• 이전Sibling
• 하위 노드 및 노드 값 ​​

예:

<title>DOM 教程</title>

텍스트 노드의 값은 노드의 innerHTML 속성을 통해 액세스할 수 있습니다.

var myTitle = document.getElementById("demo").innerHTML;

로그인 후 복사
1. innerHTML 속성에 액세스하는 것은 첫 번째 하위 노드의 nodeValue에 액세스하는 것과 같습니다.

var myTitle = document.getElementById("demo").firstChild.nodeValue;

로그인 후 복사
2. 또한 액세스할 수 있습니다. 다음의 첫 번째 자식 노드 :

var myTitle = document.getElementById("demo").childNodes[0].nodeValue;

로그인 후 복사
3. 다음 세 가지 예는

<h1>我的第一张页面</h1>
<p>Hello!</p>

<script>
 document.getElementById("id02").innerHTML  = document.getElementById("id01").innerHTML;
</script>

InnerHTML

us innerHTML을 사용하여 HTML 요소의 콘텐츠를 검색합니다. DOM 루트 노드

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

인스턴스

<h1>我的第一张页面</h1>
<p>Hello!</p>

<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>

<h1>我的第一张页面</h1>
<p>Hello!</p>

<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>

nodeName 속성

속성은 노드의 이름을 지정합니다.
nodeName은 읽기 전용입니다.

속성 노드의 nodeName은 속성의 이름입니다.
텍스트 노드의 nodeName

#text

문서 노드의 nodeName nodeNameAlways

• 예:

<p>Hello World!</p>
<div>
<p>DOM 很有用！</p>
<p>本例演示 <b>document.body</b> 属性。</p>
</div>

<script>
 alert(document.body.innerHTML);
</script>

텍스트 노드의 nodeValue가 텍스트 텍스트입니다. 속성 노드의 nodeValue가 속성 값입니다.
nodeType 속성

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

• 
  
  <p>Hello World!</p>
  <div>
  <p>DOM 很有用！</p>
  <p>本例演示 <b>document.documentElement</b> 属性。</p>
  </div>
  
  <script>
  alert(document.documentElement.innerHTML);
  </script>
  
  
  

  로그인 후 복사
returns 1
• 가장 중요한 nodeType 속성은 다음과 같습니다.

Type 2는 HTML DOM에서 더 이상 사용되지 않습니다. XML DOM에서는 더 이상 사용되지 않습니다.

【관련 추천: javascript 비디오 튜토리얼, web front-end】

위 내용은 JavaScript HTML DOM 탐색(요약 공유)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!