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

DOM (document formation Model) is an API (application programming interface) for HTML and XML documents. DOM depicts a hierarchical tree of nodes that allows developers to add, remove, and modify parts of the page. DOM can describe any HTML and XML document as a structure with multiple layers of nodes. Nodes are divided into several different types, each of which represents different information in the document. Each node has its own characteristics, data and methods, and it also 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. There are a total of 12 node types, all of which inherit from a base type-the Node type

Node Typ

The DOM1 level defines a Node interface, and all node types in Javascript inherit from the Node type, so all node types share the same basic properties and methods, and each node has a nodeType attribute that indicates the type of node. Node types are represented by the following 12 numeric constants defined in the Node type, and any node type must be one of them:

Node.ELEMENT_NODE (1)

Node.ATTRIBUTE_NODE (2)

Node.TEXT_NODE (3)

Node.CDATA_SECTION_NODE (4)

Node.ENTITY_REFERENCE_NODE (5)

Node.ENTITY_NODE (6)

Node.PROCESSING_INSTRUCTION_NODE (7)

Node.COMMENT_NODE (8)

Node.DOCUMENT_NODE (9)

Node.DOCUMENT_TYPE_NODE (10)

Node.DOCUMENT_FRAGMENT_NODE (11)

Node.NOTATION_NODE (12)

By comparing the above constants, you can easily determine the type of node

1 if (someNode.nodeType = = Node.ELEMENT_NODE) {/ / invalid in IE 2 alert ("Node is an element"); 3}

To ensure cross-browser compatibility, it is best to compare the nodeType property with a numeric value

1 if (someNode.nodeType = = 1) {2 alert ("Node is an element"); 3}

1. NodeName and nodeValue properties

To understand the specific attributes of a node, you can use these two attributes, and their values depend entirely on the type of node. Before using these two values, it is best to detect the type of node as follows.

1 if (someNode.nodeType = = 1) {2 value = someNode.nodeName; / / nodeName the value is the element's signature 3}

2. Node relationship

Each node has a childNodes property that holds a NodeList object. NodeList is a class array object that holds an ordered set of nodes that can be accessed so far. Note that he is not an instance of Array, he is actually based on the DOM structure to dynamically execute the results of the query, so changes in the DOM structure can be automatically reflected in the NodeList object, nodes in the NodeList can be accessed through square brackets, you can also use the item () method, and there is also some relationship with other nodes. The relationships between nodes constitute a hierarchy, while all page tags are represented as a specific node.

1 var fitstChild = sonmeNode.childNodes [0]; 2 var secondChild = someNode.childNodes.item (1); 3 var count = someNode.childNodes.length

As mentioned earlier, using the Array.prototype.slice () method on an arguments object can convert it to an array, as well as for NodeList.

1 / / invalid in IE8 and previous versions 2 var arrayOfNodes = Array.prototype.alice.call (someNode.childNodes,0); 3 4 / compatible with all browsers 5 function converToArray (nodes) {6 var array = null; 7 try {8 array = Array.prototype.slice.call (nodes,0) / for non-IE browsers 9} catch (ex) {10 array = new Array (); 11 for (var iTuno Len = nodes.length;i < len; iTunes +) {12 array.push (Nodes [I]); 13} 14} 15 return array;16}

Each node has a parentNode attribute that points to the parent node in the document tree. All nodes included in the childNodes list have the same parent, so their paternNode attributes point to the same node. In addition, each node included in the childNodes list is a sibling node to each other. By using the previousSibling and nextSibling attributes of each node in the list, you can access the previousSibling attribute of the first node in the list of other nodes in the same list whose value is null, and the value of the nextSlbling attribute of the last node in the list is also null

The firstChild and lastChild attributes of the parent node point to the first and last node in the childNodes list, respectively. Where someNode.firstChild equals someNode.childNodes [0] and someNode.lastChild equals someNode.childNodes [someNode.childNodes.length-1]

HasChildNodes () returns true if the node contains one or more child nodes

The last attribute that all nodes have is ownerDocument, which points to the document node that represents the entire document, through which we can access the document node directly without having to go back to the top in the node hierarchy.

3. Operation relationship

AppendChild (), which is used to add a node to the end of the childNodes list, the corresponding pointer relationship is updated, and a new node is returned when the update is complete.

1 var returnNode = someNode.appendChild (newNode); 2 console.log (returnNode = someNode.firstChild); / / true3 console.log (returnNode = newNode); / / true

If the parameter passed into the appendChild () method is already part of the document, it will be transferred from its original location to the new location, for example

1 var returnNode = someNode.appendChild (someNode.firstChild); 2 console.log (returnNode = sonmeNode.firstChild); / / false3 console.log (returnNode = someNode.lastChild); / / true

InsertBefore () places the node at a specific location in the list. Accept two parameters: the inserted node and the reference node. The inserted node is returned as the previous sibling node of the reference node. If the reference node is null, it is the same as appendChild ()

1 / / insert becomes the first node 2 returnNode = someNode.insertBefore (newNode,someNode.childNodes [0]); 3 / / insert becomes the last node 4 returnNode = someNode.insertBefore (newNode,someNode.lastChild); 5 / insert into the first 6 returnNode of the last node = someNode.insertBefore (newNode,someNode.childNodes [someNode.childNodes.length-1])

ReplaceChild () replaces a node, accepting two parameters: the inserted node and the node to be replaced. The node to be replaced is returned by this method and removed from the document tree.

1 / / replace the first child node 2 var returnNode = replaceChild (newNode,someNode.firstChild)

RemoveChild () removes a node, takes a parameter that is the node to be removed, and returns it.

1 / / remove the first child node 2 var returnNode = removeChild (someNode.childNodes [0])

4. Other methods

There are two methods available for all types of nodes: cloneNode () and normalize ()

The cloneNode () method accepts a Boolean argument indicating whether to perform a deep copy, and if the parameter is true, a deep copy is performed. That is, copy the node itself and the entire child node tree. When the parameter is false, a shallow copy is performed, that is, only the node itself is copied. The copy of the node returned after replication belongs to the document, but no parent node is specified for it. Therefore, the copy of this node becomes an "orphan" unless it is added to the document through appendChild (), insertBefore (), or replaceChild (), for example:

12 3 4 5 6 7 / if we have saved the reference of the element in myList, 8 9 var deepList = myList.cloneNode (true); 10 console.log (deepList.childNodes.length); / / 311 12 var shallowList = myList.cloneNode (false); 13 concole.log (shallow.childNodes.length) / / 0

The cloneNode () method does not copy the JavaScript attributes added to the DOM node, such as event handlers, and so on.

The only function of normalize () is to deal with the text nodes in the document. Due to the implementation of the parser or the DOM operation, the text nodes may not contain text, or there may be two text nodes in succession. When this method is called on a node, the above two cases are checked in that node. If an empty text node is found, delete it. If adjacent text nodes are found, they are merged into one text node.

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.