DOM and related operations in JavaScript

First, what is DOM

JavaScript consists of ECMAScript, Dom, and BOM, where the DOM represents the method and interface that describes the content of the Web page, the Document Object model. On a Web page, objects that organize pages (or documents) are organized in a tree structure, which represents the standard model of objects in a document called the DOM, and the tree structure is what we often call the DOM tree.

The DOM is more accurate in Wikipedia: Dom is a cross-platform and language-dependent application programming interface that processes the current html,xhtml or XML document as a tree structure, where each node is an object and each node represents a part of the document.

Second, DOM node

1. Types of nodes

The DOM tree is made up of a number of different types of nodes, all of which have a nodetype value, and we can use the NodeType value to determine whether the node we get or want is the corresponding type.

Node type	Element node (label node)	Attribute node	Text nodes (spaces, line breaks, text)	Comment Node	Document node
NodeType value	1	2	3	8	9

In addition to judging types by NodeType values, we can also view the node names of element nodes and attribute nodes through NodeName, and use Nadevalue to view property values for attribute nodes.

2. Get ELEMENT nodes

document.getElementById (ID);d ocument.getelementbytagname (tagname);d ocument.getelementbyclassname (classname);

When you want to change or usean element node in the H ml in JavaScript, you need to get it before it can be called, either by setting the element's id attribute or class property, or by using the tag name. Note, however, that the getElementById () method does not work in XML, and in an XML document, it must be searched by owning the id attribute, which must be declared in the XML DTD.

After we get the node we want, we can also manipulate the other nodes through the relationship of the nodes, where we use the DIV element as the initial element node for example.

　　2.1 Child nodes

Div.children ();d iv.childnodes ();

Gets the child nodes under the Div, and Div.children () can only get to the child nodes of the element node, and div.childnodes () gets all the types of child nodes, that is, the blank text node is resolved.

　　2.2 Parent Node

Div.parentnode ();d iv.offsetparent ();

Gets the parent node of the Div, div.offsetparent () Gets the ancestor node with the positional properties, which is the parent node, and if the parent node does not have a positional property, then the parent node is found until the node with the anchored property is located.

　　2.3 Sibling nodes

div.nextelementsibling ( );d iv.nextsibling ();  //  div.previouselementsibling ();d iv.previoussibling ();

There is no element here is critical, as with the acquisition of child nodes, Div.nextsibling () and div.previoussibling () parse the white space node and get the space below the DIV or carriage return.

　　2.4 First-tailed child nodes

// get the first child node of a DIV div.firstelementchild ();d iv.firstchild (); // gets the last child node of the Div div.lastelementchild ();d iv.lastelementchild ();

The difference is ibid.

3. Node operation

We can add, delete, and manipulate nodes in JavaScript in addition to HTML.

　　3.1 Creating nodes

// Create a node/create a text node createelement (); createTextNode ();

Creating a text node is typically used to add content to an element node, creating static text that cannot be HTML-formatted like innerHTML, so Creattextnode () is more secure, and innertext has browser compatibility issues.

　　3.2 Adding nodes

The nodes we created are not automatically added to the HTML, and we need to manipulate the nodes we created.

// to the target node before adding   

InsertBefore () The second argument is an optional parameter, and if you do not write the second argument then it is added by default to the tail, which is equivalent to appendchild ();

　　3.3 Replacement

// replace the old node with the new node replacechild (newelement,oldelement);

　　Div.replacechild (Newelement,oldelement), where both the new node and the old node must be the child nodes of the Div.

　　3.4 Delete

RemoveChild ();

Note that the child node is deleted.

　　3.5 Cloning/replication

// deep Copy or shallow copy CloneNode (boolean);

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

When the Boolean value of the parameter is false for shallow copying, only the node itself is copied.

　　3.6 Judgement

Haschildnode ();

Returns a Boolean value that determines whether there are child nodes.

　　3.7 Properties

// Get Node Properties getattribute (); // Set node Properties SetAttribute (); // Delete Node Properties removeattribute ();

One thing to note is that the class attribute cannot be passed setattribute ();

Iii. advantages and disadvantages of DOM

The advantages of DOM are mainly in the following: Easy to use, and simple traversal, support XPath, enhanced ease of use.

The main disadvantages of DOM are: low efficiency, slow parsing speed and high memory consumption.

　　

DOM and related operations in JavaScript