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

DOM can describe any HTML as a structure consisting of multiple layers of nodes. Nodes are divided into 12 different types, each of which represents different information and tags in the document. Each node has its own characteristics, data and methods, and has some relationship with other nodes. The relationship between nodes constitutes a hierarchy, while all page tags are represented as a tree structure with a specific node as the root node. This article will describe the node relationship between DOM in detail.

All kinds of relationships in nodes can be described by traditional family relationships, which is equivalent to comparing document trees to genealogies. Next, the DOM node relationship will be divided into two parts: attribute and method.

Attribute parent attribute

ParentNode

Each node has a parentNode attribute that points to the parent node in the document tree. For a node, its parent node can only be of three types: element node, document node, and documentfragment node. If it does not exist, return null

Console.log (myDiv [XSS _ clean]); / / bodyconsole.log (document.body [XSS _ clean]); / / htmlconsole.log (document.documentElement [XSS _ clean]); / / documentconsole.log (document[ XSS _ clean]); / / null

Var myDiv = document.getElementById ('myDiv'); console.log (myDiv [XSS _ clean]); / / bodyvar fragment = document.createDocumentFragment (); fragment.appendChild (myDiv); console.log (myDiv [XSS _ clean]); / / document-fragment

ParentElement

Unlike the parentNode attribute, parentElement returns the parent element node

Console.log (myDiv.parentElement); / / bodyconsole.log (document.body.parentElement); / / htmlconsole.log (document.documentElement.parentElement); / / documentconsole.log (document.parentElement); / / null

[note] in IE browsers, only Element element nodes have this attribute, while in other browsers, all types of nodes have this attribute

123//IE browsers return undefined, other browsers return 123console.log (test.firstChild.parentElement); / / all browsers return console.log (test.parentElement)

Child attribute

ChildNodes

ChildNodes is a read-only class array object NodeList object that holds the first-level child nodes of the node

Var myUl = document.getElementById ('myUl'); / / the result is a class array object [li] console.log (myUl.childNodes) that contains only one li element.

Children

Children is a read-only class array object HTMLCollection object, but it holds the first layer element child node of the node

123var myDiv = document.getElementById ('myDiv'); / / childNodes contains all types of nodes, so output [text] console.log (myDiv.childNodes); / / children contains only element nodes, so output [] console.log (myDiv.children)

ChildElementCount

Returns the number of child element nodes, which is equivalent to children.length

[note] IE8- browsers do not support

Var myUl = document.getElementById ('myUl'); console.log (myUl.childNodes.length); / / 5 Magi IE8-browser returns 2 because empty text node console.log (myUl.children.length) is not included; / / 2console.log (myUl.childElementCount); / / 2 Magi IE8-browser returns undefined

FirstChild

First child node

LastChild

Last child node

FirstElementChild

First element child node

LastElementChild

The last element child node

The above four properties, IE8- browsers and standard browsers are not consistent. IE8- browsers do not consider blank text nodes and do not support firstElementChild and lastElementChild

There are two blank text nodes between the / / ul tag and the li tag, so by standard, the child nodes of ul include [blank text node, li element node, white space text node]. However, in IE8- browsers, the child nodes of ul include only [li element nodes]

12 3console.log (list.firstChild); / / blank text node is returned in standard browser, 1console.log (list.lastChild) is returned in IE8- browser; / / blank text node is returned in standard browser, 3console.log (list.firstElementChild) is returned in IE8- browser; / / undefinedconsole.log (list.lastElementChild) is returned in standard browser; / / undefined is returned in standard browser.

Sibling attribute

NextSibling

The latter node

PreviousSibling

Previous node

NextElementSibling

The latter element node

PreviousElementSibling

Previous element node

Similar to child properties, the performance of the above four properties, IE8- browsers and standard browsers are not consistent. IE8- browsers do not consider blank text nodes and do not support nextElementSibling and previousElementSibling

1 2 3var myLi = document.getElementById ('myLi'); console.log (myLi.nextSibling); / / Blank node, IE8- browser returns 3console.log (myLi.nextElementSibling); / 3 Magi IE8-browser returns undefinedconsole.log (myLi.previousSibling); / / Blank node, IE8- browser returns 1console.log (myLi.previousElementSibling); / / 1Magna IE8-browser returns undefined

Method contains method

HasChildNodes ()

The hasChildNodes () method returns true when it contains one or more child nodes, which is simpler than querying the length property of the childNodes list

123var myDiv = document.getElementById ('myDiv'); console.log (myDiv.childNodes.length); / / 1console.log (myDiv.hasChildNodes ()); / / true

Var myDiv = document.getElementById ('myDiv'); console.log (myDiv.childNodes.length); / / 0console.log (myDiv.hasChildNodes ()); / / false

Contains ()

The contains method takes a node as a parameter and returns a Boolean value indicating whether the parameter node is a descendant of the current node. The parameter is a descendant node, not necessarily a first-tier child node.

Console.log (myDiv.contains (myLi)); / / trueconsole.log (myDiv.contains (myUl)); / / trueconsole.log (myDiv.contains (myDiv)); / / true

[note] IE and safari do not support the document.contains () method, only the contains () method of the element node

/ / IE and safari report error, other browsers return trueconsole.log (document.contains (document.body)); relation method

CompareDocumentPosition ()

The compareDocumentPosition method is used to determine the relationship between nodes and returns a bitmask that represents the relationship.

000000 0 two nodes are the same 000001 1 two nodes are not in the same document (that is, one node is not in the current document) 000010 2 parameter node in front of the current node 000100 4 parameter node behind the current node 001000 8 parameter node contains the current node 010000 16 the current node contains the private use of the parameter node 100000 32 browser

/ / 20-16-4, because the myUl node is contained by the myDiv node and is also located in the console.log (myDiv.compareDocumentPosition (myUl)) behind the myDiv node; / / 10-8 nodes 2, because the myDiv node contains the myUl node and is also located in front of the myUl node console.log (myUl.compareDocumentPosition (myDiv)); / / 0, the two nodes are the same console.log (myDiv.compareDocumentPosition (myDiv)); / 4 myLi2 is console.log (myLi1.compareDocumentPosition (myLi2) behind the myLi1 node) / 2 console.log (myLi2.compareDocumentPosition (myLi1)) in front of the myLi2 node

IsSameNode () and isEqualNode ()

Both methods accept a node parameter and return true if the incoming node is the same as or equal to the reference node

Same means that two nodes refer to the same object.

The so-called equal means that two nodes are of the same type, have equal attributes (nodeName, nodeValue, etc.), and their attributes and childNodes attributes are also equal (the same position contains the same value)

[note] firefox does not support the isSameNode () method, and IE8- browsers do not support either method

Var div1 = document.createElement ('div'); div1.setAttribute ("title", "test"); var div2 = document.createElement (' div'); div2.setAttribute ("title", "test"); console.log (div1.isSameNode (div1)); / / trueconsole.log (div1.isEqualNode (div2)); / / trueconsole.log (div1.isSameNode (div2)); / / false

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.