Add, delete, modify, and query html dom nodes

Add, delete, modify, and query html dom nodes

In the previous blog, we have gained initial access to the DOM basics, but we learned how to better apply them. Today we will look at the addition, deletion, modification, and query of DOM nodes.

Wherever we are, we always need to get something to operate it first. So how can we get it?

Each component of HTML can be considered as a node (document node, element node, text node, attribute node, and comment node, where the attribute node belongs to the element node ).

W3C provides easy and simple methods and attributes for locating nodes, so that we can quickly perform operations on nodes.

GetElementById (), getElementsByTagName (), getElementsByName (), getAttribute (), setAttribute (), and removeAttribute ().

1. getElementById () method

The getElementById () method accepts a parameter: Get the element ID. If the corresponding element is found, this

The HTMLDivElement object of the element. If it does not exist, null is returned.

 

Document. getElementById ('box'); // obtain the element node whose id is "box ".

PS: id indicates the uniqueness of an element node. Two or more element nodes cannot be created with the same name id. When we get a specific element node through getElementById (), this Node object is obtained by us. Through this Node object, we can access a series of its attributes.

 

2. getElementsByTagName () method

The getElementsByTagName () method returns an object array HTMLCollection (NodeList), which stores a list of nodes with the same element name.

Document. getElementsByTagName ('*'); // obtain all elements

 

Whether it's getElementById or getElementsByTagName, not all browsers must be case sensitive when passing parameters. To prevent unnecessary errors and troubles, we must stick to the case-sensitive habit.

3. getElementsByName () method

The getElementsByName () method can obtain elements with the same name and return an object array HTMLCollection (NodeList ).

Document. getElementsByName ('add') // obtain the input element document. getElementsByName ('add') [0]. value // obtain the value document of the input element. getElementsByName ('add') [0]. checked // get the checked value of the input element

 

4. getAttribute () method

The getAttribute () method gets the value of an attribute in an element. It is similar to directly using. properties to obtain attribute values.

Some differences.

Document. getElementById ('box '). getAttribute ('id'); // get the id value of the element document. getElementById ('box '). id; // obtain the id value of the element document. getElementById ('box '). getAttribute ('mydiv '); // gets the custom attribute value of an element.

5. setAttribute () method

The setAttribute () method sets an attribute and value in the element. It requires two parameters: attribute name and value. If the attribute already exists, it will be overwritten.

 

Document. getElementById ('box '). setAttribute ('align ', 'center'); // set attributes and values document. getElementById ('box '). setAttribute ('bbb ', 'ccc'); // you can specify custom attributes and values.

6. removeAttribute () method

 

RemoveAttribute () can remove HTML attributes.

 

Document. getElementById ('box'). removeAttribute ('style'); // remove attributes

III. DOMNode

 

1. node attributes

Nodes can be divided into element nodes, attribute nodes, and text nodes. These nodes have three very useful attributes: nodeName, nodeType, and nodeValue.

2. Hierarchical node attributes

The hierarchy of nodes can be divided into Parent nodes, child nodes, and sibling nodes. When we obtain one of the element nodes, we can use the hierarchical node attribute to obtain the nodes of the corresponding layers.

Iv. node operations

DOM allows you not only to find nodes, but also to create, copy, insert, delete, and replace nodes.

We can associate these methods so that we can build a large knowledge network. Of course, we only know that it is not enough. We need to use more, contact more, and summarize more.