Shulou(Shulou.com)06/03 Report--

This article mainly explains "the detailed introduction of DOM nodes in JavaScript". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Now let the editor to take you to learn "the detailed introduction of DOM nodes in JavaScript"!

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

I. DOM node

In an HTML document is a node, The entire document is a document node every HTML element is an element node, where the text of the HTML element is a text node, every HTML attribute is an attribute node, all comments are comment nodes.

With HTML DOM, all nodes in the node tree can be accessed through JavaScript. You can create new nodes and modify or delete all nodes.

1. Node relationship

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

two。 Child nodes and node valu

A common mistake in DOM processing is to assume that an element node contains text.

DOM Tutorial

The element node (in the example above) does not contain text.

It contains the text node "DOM Tutorial" with value.

The value of the text node can be accessed through the node's innerHTML property.

Var myTitle = document.getElementById ("demo") [xss_clean]

Accessing the innerHTML attribute accesses the same value as the first child node:

Var myTitle = document.getElementById ("demo") .firstChild.nodeValue

Access to the first child node can also be done:

Var myTitle = document.getElementById ("demo"). ChildNodes [0] .nodeValue

Example 1:

Query the text of the element and copy it to the

element.

Project My First Page

Document.getElementById ("id02") [xss_clean] = document.getElementById ("id01") [xss_clean]

Example 2:

Project

My First Page

Document.getElementById ("id02") [xss_clean] = document.getElementById ("id01") .firstChild.nodeValue

Example 3:

Project My First Page Hello!

Document.getElementById ("id02") [xss_clean] = document.getElementById ("id01"). ChildNodes [0] .nodeValue

2. DOM root node

There are two special properties that allow access to the complete document:

Document.body-document body

Project my first page

Document.getElementById ("id02") [xss_clean] = document.getElementById ("id01"). ChildNodes [0] .nodeValue

Document.documentElement-complete documentation

Project

Hello World!

The DOM is very useful!

This example demonstrates the document.documentElement property.

Alert (document.documentElement [XSS _ clean])

1. NodeName attribute

The nodeName attribute specifies the name of a node, and nodeName is read-only.

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

NodeName is read-only.

NodeName an element node has the same node name as the tag name.

The node name of an attribute node is the attribute name.

The nodeName of a text node is always # text.

The node name of the document is always # document.

My First Page

Document.getElementById ("id02") [xss_clean] = document.getElementById ("id01") .nodeName

Note:

NodeName always contains the uppercase tag name of the HTML element.

2. NodeValue attribute

The nodeValue attribute specifies the value of the node. The node value of the element node is undefined, the node of the text node is the text itself, and the node value of the attribute node is the attribute value.

3. NodeType attribute

The nodeType property returns the node type. NodeType is read-only.

Document.getElementById ("id02") [xss_clean] = document.getElementById ("id01") .nodeType

At this point, I believe you have a deeper understanding of the "detailed introduction of DOM nodes in JavaScript". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.