Detailed explanation of DOM operations in JavaScript

1. What is DOM

JavaScript consists of three parts: ECMAScript, DOM and BOM. DOM represents the method and interface for describing web page content, that is, the document Object Model (Document Object Model). On a web page, the objects that organize the page (or document) are organized in a tree structure. The standard model used to represent the objects in the document is called DOM, and the tree structure is what we often call the DOM tree.

The introduction of DOM in Wikipedia is more accurate: DOM is a cross-platform and language-independent application programming interface that processes current HTML, XHTML or XML documents as a tree structure, in which each node is an object, each node represents a part of the document.

2. DOM node

1. Type of node

The DOM tree is composed of many different types of nodes, and these node types have a nodeType value. We can use the nodeType value to determine whether what we obtain or want is a node of the corresponding type.

Node type	Element node (label node)	Attribute node	Text node (space, newline, Text)	Comment node	document node
nodeType value	1	2	3	8	9

In addition to judging the type by the nodeType value, we can also use nodeName to view the node names of element nodes and attribute nodes, and use nadeValue to view the attribute values ​​of attribute nodes.

2. Get the element node

document.getElementById(id);
document.getElementByTagName(tagname);
document.getElementByClassName(classname);

Usually you want to do this in JavaScript When updating or using element nodes in HML, they must be obtained before calling. Then we obtain it by setting the Id attribute or Class attribute of the element, or by using the tag name. But be aware that the getElementById() method does not work in XML. In XML documents, searches must be performed by having the id attribute, and this type must be declared in the XML DTD.

After obtaining the node we want, we can also operate other nodes through the relationship of the nodes. Here we take the p element as the initial element node as an example.

　

2.1 Child node

p.children();
p.childNodes();

Get The child nodes under p, while p.children() can only get the child nodes of the element node, while p.childNodes() will get all types of child nodes, which means that it will parse blank text nodes.

　2.2 Parent node

p.parentNode();
p.offsetParent();

Obtain the parent node of p. p.offsetParent() obtains the ancestor node with positioning attributes, that is, starting from the parent node. If the parent node is not positioned attribute, then look for the parent node of the parent node until a node with a positioning attribute is found.

　2.3 Brother Node

//下一个兄弟节点 p.nextElementSibling();
p.nextSibling();//上一个兄弟节点 p.previousElementSibling();
p.previousSibling();

Whether there is an Element here is very important. Just like getting child nodes, p.nextSibling() and p.previousSibling() will parse blank nodes and get p space or enter below.

　2.4 First and last child nodes

//获取p的第一个子节点p.firstElementChild();
p.firstChild();//获取p的最后一个子节点p.lastElementChild();
p.lastElementChild();

The difference is the same as above.

3. Node operation

In addition to adding and deleting modification nodes in HTML, we can also operate nodes in JavaScript.

　3.1 Create node

//创建节点/创建文本节点createElement();
createTextNode()；

Creating text nodes is generally used to add content to element nodes. It creates static text and cannot have HTML format like innerHTML, so creatTextNode() is safer, and innerText There are browser compatibility issues.

　

3.2 Add Node

The nodes we create will not be automatically added to HTML, we need to operate the created nodes.

//向尾部添加子节点 appendChild(); 
//向目标节点之前添加insertBefore(newElement,targetElement);

The second parameter of insertBefore() is an optional parameter. If you do not write the second parameter, it will be added to the end by default, which is equivalent to appendChild();

　

3.3 Replace

//将旧节点换为新节点replaceChild(newElement,oldElement);

　p.replaceChild(newElement,oldElement), Here, whether it is a new node or an old node, it must be a child node of p.

　

3.4 Delete

removeChild();

Note that the child nodes are deleted.

　

3.5 Clone/Copy

//深复制或浅复制cloneNode(boolean);

When the Boolean value of the parameter is true, it is a deep copy. That is, the node itself and all child nodes below it are copied.

When the Boolean value of the parameter is false, it is shallow copy, and only the node itself will be copied.

　

3.6 Determination

##

hasChildNode();

Determine whether there are child nodes and return a Boolean value.

　3.7 Properties

//获取节点属性getAttribute();//设置节点属性setAttribute();//删除节点属性removeAttribute();

 　要注意的一点就是class属性不能通过setAttribute(); 设置。

三、DOM的优缺点

　　DOM的优点主要表现在：易用性强，并且遍历简单，支持XPath，增强了易用性。

　　DOM的缺点主要表现在：效率低，解析速度慢，内存占用量过高。

The above is the detailed content of Detailed explanation of DOM operations in JavaScript. For more information, please follow other related articles on the PHP Chinese website!