JavaScript HTML DOM navigation (summary sharing)

This article brings you relevant knowledge about javascript, which mainly introduces issues related to HTML DOM navigation. Let’s take a look at it together. I hope it will be helpful to everyone.

[Related recommendations: javascript video tutorial, web front-end】

JS HTML DOM navigation

With the HTML DOM, you can use node relationships to navigate the node tree.

DOM Node

According to the W3C HTML DOM standard, Everything in an HTML document is a node:

• The entire document is a document node
• Each HTML element is an element node
• The text within an HTML element is a text node
• Each HTML attribute is an attribute node
• All comments are comments Node
  
  With the HTML DOM, all nodes in the node tree are accessible through JavaScript.

Be able to create new nodes, and also modify and delete all nodes.

Node relationship

The nodes in the node tree have a certain hierarchical relationship with each other.

• The terms (parent, child and sibling, parent, child and sibling) are used to describe these relationships
  • In the node tree, the top node is called the root (root node)
  • Every node has a parent node, except the root (the root node has no parent node)
  • Node can have a certain number of children
  • Siblings (brothers or sisters) refer to Nodes with the same parent

eg:

   
       <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>

Navigate between nodes

Through JavaScript, you can navigate between nodes using the following node properties :

• parentNode
• childNodes [nodenumber]
• firstChild
• lastChild
• nextSibling
• previousSibling

Child nodes and node values

## A common mistake in #DOM processing is assuming that element nodes contain text.

Example:

<title>DOM 教程</title>

(in the above example) element node

does not contain text. It contains a text node with the value "DOM Tutorial".

The value of a text node can be accessed through the node's innerHTML attribute:

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

Accessing the innerHTML attribute is equivalent to accessing the nodeValue of the first child node:

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

You can also access the first child node like this:

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

The following three examples retrieve the text of the

element and copy it to ## In the

# element:

Instance 1

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

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

Instance 2

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

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

Instance 3

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

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

InnerHTML

We use innerHTML to retrieve the content of the HTML element.

The DOM root node

has two special properties that allow access to the complete document:

document.body - the body of the document

document.documentElement - the complete document

Instance

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

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

Instance

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

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

nodeName Attribute

nodeName

Attribute specifies the name of the node.

nodeName is read-only

• The nodeName of the element node is equivalent to the label name
• The nodeName of the attribute node is the name of the attribute
• Text node nodeName
always
• #text nodeName of document node
always
• #documentInstance:
  

  <h1>我的第一张网页</h1>
  <p>Hello!</p>
  
  <script>
  document.getElementById("id02").innerHTML  = document.getElementById("id01").nodeName;
  </script>

Return H1

Notes
: nodeName always contains the uppercase
tag name of the HTML element. nodeValue attribute

The nodeValue attribute specifies the value of the node.

The nodeValue of the element node is undefined

• The nodeValue of the text node is the text text
• The nodeValue of the attribute node is the attribute value
• nodeType attribute

nodeType attribute returns the type of node. **nodeType is read-only.

Instance

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

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

Return 1

The most important nodeType attribute is:

Type 2 is deprecated in the HTML DOM. Not deprecated in XML DOM.

【Related recommendations: javascript video tutorial, web front-end】

The above is the detailed content of JavaScript HTML DOM navigation (summary sharing). For more information, please follow other related articles on the PHP Chinese website!