The HTML DOM tree

What is DOM?

DOM defines standards for accessing HTML and XML documents:

“The W3C Document Object Model (DOM) is a platform – and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of documents.” The W3C DOM standard is divided into three distinct parts:

Core DOM – The standard model for any structured document

XML DOM – Standard model for XML documents

HTML DOM – Standard model for HTML documents

What is the HTML DOM?

The HTML DOM defines the objects and attributes of all HTML elements, as well as the methods to access them.

In other words, the HTML DOM is the standard for how to get, modify, add, or remove HTML elements

Node parents, children, and siblings

Nodes in a node tree have hierarchical relationships with each other.

We often use the terms parent, child and sibling to describe these relationships. The parent node has children. Sibling children are called siblings (brothers or sisters).

In the node tree, the top node is called the root. Every node has a parent except the root, which has no parent. A node can have any number of children. Siblings are nodes that have the same parent node.

Finding HTML elements

Find HTML element by id (return element with specified ID)

document.getElementById("id");
Copy the code

Find HTML elements by tag name (returns a node list (set/array of nodes) containing all elements with specified tag name)

document.getElementsByTagName("tagname");
Copy the code

Find HTML elements by class name (return node list containing all elements with specified class name)

document.getElementsByClassName("classname");
Copy the code

Note: getElementsByClassName() is not valid in Internet Explorer 5,6,7,8.

Node pointer

FirstChild returns the firstChild of the selected node

node.firstChild;
Copy the code

Note: This property returns NULL if the selected node has no children.

The lastChild attribute returns the lastChild of the document.

node.lastChild;
Copy the code

③ the parentNode property returns the parentNode of a node. node.parentNode; Note: NULL is returned if the specified node has no parent.

④ the childNodes property returns a collection of childNodes containing the selected node.

node.childNodes;
Copy the code

Tip: even Spaces count toward child nodes. If the selected node has no child nodes, this property returns the NodeList that does not contain the node. If you need to loop through the list of childNodes, using the nextSibling attribute is more efficient than using the childNodes list of the parent object.

⑤ The previousSibling attribute can return the following nodes of a node (at the same tree level)

node.previousSibling;
Copy the code

Note: If this node is not present, then this property returns NULL.

The nextSibling attribute returns the nodes immediately following an element (in the same tree hierarchy).

node.nextSibling;
Copy the code

Note: If this node is not present, then this property returns NULL.

Node operation

① Creating a Node

Document.createelement (' element tag ');Copy the code

Such as:

var node = document.createElement('input'); node.type = 'text'; Node. value=' Text box reserved information '; nodde.style.color='red';Copy the code

② Insert a node

Adds a new child node to the end of the child node list of the current node.

parentNode.appendChild('nodeName');
Copy the code

Insert a new child node in front of a known child node. parentNode.insertBefore(‘nodeName’); ③ Replace nodes

Replace a child node with another node.

parentNode.replaceChild('newNode','oldNode');
Copy the code

④ Deleting a Node

Note: To remove an HTML element, you must know the parent element of the element.

Can I delete an element without referring to its parent?

I’m sorry. The DOM needs to know what element you need to remove, as well as its parent element. Here’s a common workaround: Find the child element you want to remove, and then use the parentNode attribute to find the parent element:

parentNode.removeChild('nodeName');
Copy the code

Attribute operation

① Get attributes

Gets the attribute value of the specified attribute in the element node.

node.getAttribute('attrName');
Copy the code

② Setting properties

Creates or changes the attributes of the element node.

node.setAttribute('attrName','attrValue');
Copy the code

③ Delete attribute

Deletes the specified attribute from the element.

node.removeAttribute('attrName');
Copy the code