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

DOM is an abbreviation for Document Object Model (document object Model). DOM is divided into core DOM, XML DOM, and HTML DOM. The main thing we come into contact with is that HTML DOM,HTML DOM defines the objects and attributes of all HTML elements and the methods to access them. In other words, HTML DOM is the standard for how to get, modify, add, or delete HTML elements. When we interact with each other through js, we are specifically manipulating the DOM node. In HTML DOM, everything is a node.

DOM node: the node exists as a node tree in the document, as shown in the figure:

Nodes are divided into 12 different types, including element node (1), attribute node (2) and text node (3). At the same time, each type 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. The diagram is as follows:

After understanding the basic concepts of nodes, let's first familiarize ourselves with the three basic attributes of nodes: nodeName, nodeType, and nodeValue.

NodeName:

Each node in the document has the following attributes.

NodeName: a string whose content is the name of a given node.

Var name = node.nodeName

* if the node is an element node, nodeName returns the name of the element

* if it is an attribute node, nodeName returns the name of the attribute

* if it is a text node, nodeName returns a string with the content # text

Note: nodeName is a read-only attribute.

NodeType:

NodeType: returns an integer that represents the type of a given node.

The integer values returned by the nodeType attribute correspond to 12 node types, three of which are commonly used:

Node.ELEMENT_NODE-1-element node

Node.ATTRIBUTE_NODE-2-attribute nod

Node.TEXT_NODE-3-text node

NodeType is a read-only property

NodeValue:

NodeValue: returns the current value (string) of a given node

If the given node is an attribute node, the return value is the value of the attribute.

If the given node is a text node, the return value is the content of the text node.

If the given node is an element node, the return value is null

NodeValue is a read / write attribute, but you cannot set a value on the nodeValue attribute of an element node

However, you can set a value for the nodeValue property of the text node.

DOM is mainly used to implement interaction, so how can we manipulate DOM nodes to achieve interaction? Four words: add, delete, change and search! For specific implementation, please take a look at ↓↓↓.

Check:

Before making additions, deletions and modifications to the DOM node, you must first find this node element. The way to find it can be using node methods or node attributes:

Node method:

Method description getElementById () returns the currently selected single node object getElementsByTagName () returns the currently selected node array NodeList object getElementsByClassName () returns the currently selected node array NodeList object, multiple class names separated by spaces / / IE9+querySelector () receives a css selector, returns the first matched node element, and returns null / / IE8+querySelectorAll () to receive a css selector and return all matched node element NodeList objects

Note: NodeList is like an array, but not an array, and is used to hold an ordered set of nodes. It has the length attribute, which can be accessed through square brackets or the item () method.

Use node attributes to get child nodes, parent nodes, and sibling nodes:

Child nodes:

1 Node.childNodes; / / get child node list NodeList; Note Line breaks are counted as text nodes in the browser. If you get the node list in this way, you need to filter with the nodeType attribute. 2 Node.firstChild; / / get the first child element 3 Node.lastChild; / / get the last child element 4 / * childNodes will get the textNode, while the children attribute will only get the element node * /

Parent node:

1 Node [XSS _ clean] / / return parent node 2 Node.ownerDocument / / return ancestor node (entire document)

Sibling node:

1 Node.previousSibling / / returns the previous node, if not, null2 Node.nextSibling / / returns the latter node

Increase:

To add a new node, you first need to create a node, and then insert the newly created node into the DOM, so the methods of creating a node and inserting a node are described below, and the method of copying a node is also described in creating a node.

Create an element node:

CreateElement () / / create a new element node according to the specified tag name

Create code snippets (to avoid frequent refresh of DOM, you can first create code snippets and add them to the DOM after all node operations are completed)

CreateDocumentFragment ()

Create an attribute node:

Node.setAttribute (attr,value); / / create a new attribute node based on the specified attribute name

Create a text node:

Node.createTextNode (value) / / creates a new text node based on the specified text

Copy the node:

ClonedNode = Node.cloneNode (boolean) / / only one parameter, pass in a Boolean value, true means to copy all child nodes under this node; false means to copy only this node

Insert the node:

1 / * insert node*/2 parentNode.appendChild (childNode); / / append the new node to the end of the child node list 3 parentNode.insertBefore (newNode, targetNode); / / insert newNode before targetNode 4 5 / * insert html code * / 6 node.insertAdjacentHTML ('beforeBegin', html); / / insert code 7 node.insertAdjacentHTML (' afterBegin', html) before the element / / insert code 8 node.insertAdjacentHTML ('beforeEnd', html) before the first child element of the element; / / insert code 9 node.insertAdjacentHTML (' afterEnd', html) after the last child element of the element; / / insert code after the element

Additional: DOM does not provide an insertAfter () method

1 function insertAfter (newElement,targetElement) {2 / / gets the parent node of the target element 3 var parentElement= target element [XSS _ clean]; 4 / / if the target element is the last element, the new element is inserted after the target element 5 if (parentElement.lastChild==targetElement) {6 parentElement.appendChild (newElement) 7} else {/ / if the target element is not the last element, the new element is inserted in front of the next sibling node of the target element, that is, 8 parentElement.insertBefore (newElement,targetElement.nextSibling) after the target element; 9} 10}

Change:

Replace the node:

ParentNode.replace (newNode, targetNode); / / replace targetNode with newNode

Delete:

Remove the node:

1 parentNode.removeChild (childNode); / / remove target node 2 [XSS _ clean] .removeChild (node); / / use if the parent node is not clear

-Segmentation line-

Only nodes cannot fully interact with each other, so let's take a look at how to manipulate styles:

Get the style directly from the node:

1 node.style.color / / Readable and writable only get inline style 2 3 / * get the final style and be compatible with all browser styles * / 4 function getStyle (ele,style) {5 return ele.currentStyle? Obj.currentStyle [style]: window.getComputedStyle (ele) [style]; / / compatible with ie and ff;, compatible with chrom, opera, safir6}

Get and modify element styles:

HTML5 provides a new attribute for the element: classList to add, delete, change and query the element stylesheet. Do the following:

1 node.classList.add (value); / / add the specified class 2 node.classList.contains (value) for the element; / / determine whether the element contains the specified class, and return true3 node.classList.remove (value) if it exists; / / delete the specified class 4 node.classList.toggle (value); / / delete it, and add the specified class if not

How to modify DOM properties:

Node.getAttribute ('id') / / get, including the data attribute Node.setAttribute (' id') / / set Node.removeAttribute () / / remove Node.attributes / / get all the features of DOM

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.