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

How to understand the Node node in JavaScript DOM? in view of this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible method.

In DOM (document object Model), the hierarchical structure of HTML documents is represented as a tree structure, and the tree representation of HTML documents is mainly composed of nodes representing elements or tags and nodes that identify text strings. In JavaScript DOM, Node is often translated into nodes, so let's take a look at the properties and methods of Node through examples.

Introduction to the properties of Node:

NodeType: display node type nodeName: display node name nodeValue: display node value attributes: get an attribute node firstChild: represents * nodes of a node lastChild: represents a node * a child node childNodes: represents all child nodes of the node parentNode: indicates the parent node of the node nextSibling: the next node next to the current node: The previous node next to the current node

Node has a variety of nodes, so let's take some time to get to know them, as well as the nodeType,nodeName and nodeValue properties:

Name: element node

◆ nodeType:ELEMENT_NODE

◆ nodeType value: 1

◆ nodeName: element tag name

◆ nodeValue:null

Var d = document.getElementById ("t"); [xss_clean] (d.nodeType); [xss_clean] (d.nodeName); [xss_clean] (d.nodeValue); / / display 1 DIV null

Name: attribute node

◆ nodeType:ATTRIBUTE_NODE

◆ nodeType value: 2

◆ nodeName: attribute name

◆ nodeValue: attribute valu

Var d = document.getElementById ("t"). GetAttributeNode ("name"); [xss_clean] (d.nodeType); [xss_clean] (d.nodeName); [xss_clean] (d.nodeValue); / / display 2 name aaa

Name: text Node

◆ nodeType:TEXT_NODE

◆ nodeType value: 3

◆ nodeName:#text

◆ nodeValue: text content

Bbb var d = document.getElementById ("t"). FirstChild; [xss_clean] (d.nodeType); [xss_clean] (d.nodeName); [xss_clean] (d.nodeValue); / / display 3 # text bbb

Name: CDATA text node (format for delivering text in XML)

◆ nodeType:CDATA_SECTION_NODE

◆ nodeType value: 4

◆ nodeName:#cdata-section

◆ nodeValue:CDATA text content

Attributes attribute, get an attribute node directly. Note that [] is used here to maintain the compatibility between IE and FF.

Aaabbbccc var d = document.getElementById ("t"). Attributes ["name"]; [xss_clean] (d.name); [xss_clean] (d.value); / / display name aaa

FirstChild and lastChild attributes, which represent the * and * child nodes of a node:

Aaabbbccc var d = document.getElementById ("t"); [xss_clean] (d.firstChild [XSS _ clean]); [xss_clean] (d.lastChild [XSS _ clean]); / / display aaa ccc

The childNodes and parentNode attributes represent all the children of the node and the parents of the node, where the childNodes note is an array:

Aaabbbccc var d = document.getElementById ("t"); [xss_clean] (d.childNodes [1] [xss_clean]); [xss_clean] (d [XSS _ clean] .getAttribute ("name")); / / display bbb ddd

The nextSibling and previousSibling attributes represent the previous and next nodes next to the current node in the childNodes [] array of parentNode, respectively:

Aaabbbccc var d = document.getElementById ("t"). ChildNodes [1]; [xss_clean] (d.nextSibling [XSS _ clean]); [xss_clean] (d.previousSibling [XSS _ clean]); / / display ccc aaa

Introduction to the method of Node:

◆ hasChildNodes (): determines whether a node has child nodes

◆ removeChild (): removes a node

◆ appendChild (): add a node

◆ replaceChild (): replace a node

◆ insertBefore (): specify the node location to insert a node

◆ cloneNode (): copy a node

◆ normalize (): (unknown)

◆ hasChildNodes () method: determines whether a node has child nodes, returns true, and does not return false

Aaabbbccc alert (document.getElementById ("t"). HasChildNodes (); alert (document.getElementById ("m"). HasChildNodes ()); / / * true, second false

The removeChild () method removes a node:

Aaabbbccc var d = document.getElementById ("t") .firstChild; document.getElementById ("t") .removeChild (d); / / aaa is removed

The appendChild () method: add a node, delete it if it already exists in the document tree, and then insert it in a new location.

Aaabbbccc var d = document.getElementById ("t"). FirstChild; document.getElementById ("t") .appendChild (d); / / aaa becomes * a node

The replaceChild () method removes (and returns) the specified child node from the document tree and replaces it with another node.

Aaabbbccc var newd = document.createElement ("span"); new [XSS _ clean] = "eee"; var oldd = document.getElementById ("t"). LastChild; document.getElementById ("t") .replaceChild (newd,oldd); / / * one item becomes eee

The insertBefore () method: inserts a node in front of the specified node, deletes the original if it already exists, and then inserts it in the new location.

Aaabbbccc var newd = document.createElement ("span"); new [XSS _ clean] = "eee"; var where = document.getElementById ("t"). LastChild; document.getElementById ("t") .insertBefore (newd,where); / / there is an extra eee before * *.

The cloneNode () method: copy a node, which takes one parameter, true means to copy all the child nodes at the same time, and false means to copy the current node at the same time.

Aaabbbccc var what = document.getElementById ("t") .cloneNode (false) [xss_clean]; document.getElementById ("m") [xss_clean] = what; / / added an aaabbbccc answer to the question on how to understand Node nodes in JavaScript DOM. I hope the above content can be of some help to you. If you still have a lot of doubts to solve, you can follow the industry information channel for more related knowledge.

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.