An important function of JS is to manipulate the DOM and change the page display.
Directory:
1. Basic concepts
2. Node type
3. Node relationship
4. Node operations
The basic concept
DOM is an API for HTML and XML that describes a hierarchical tree of nodes that can add, remove, and modify portions of a page.
DOM can represent any HTML or XML document as a structure of multiple nodes.
The relationships between nodes form the hierarchy, and all page tags are represented as a tree structure with a particular node as the root node. Take the following HTML for example:
<html> <head> <title>Sample Page</title> </head> <body> <p>Hello world! </p> </body> </html>Copy the codeRepresent the HTML document as a hierarchy, as shown below
Boldface in the box indicates the node type.
The Document node (Document in the figure) is the root node of each Document,
In this case, it has only one child node, the element, which we call the document element.
The document element is the outermost element of the document, and all other elements in the document are contained in the document element.
Each document can have only one document element.
In HTML pages, document elements are always elements.
In XML, there are no predefined elements, and any element can be a document element.
Each segment of tag can be represented by a node in the tree, and there are 12 node types in total, all of which are inherited from a base type.
Not all node types are supported by Web browsers, but the most common are element, text, and document nodes (1, 3, and 9 in the numerical constants below), so let’s just focus on these three.
Let’s look at all the node types first.
The node type
All Node types in JS inherit from Node types and therefore share the same basic properties and methods.
Each node has the nodeType attribute, which indicates the type of node.
NodeType has 12 numeric constants, one of which must be of any type.
Node type Possible child node types
The node type can be determined by comparing the above constants:
if (someNode.nodeType == 1) {
alert("Node is an element.");
}
Copy the codeRelationship between nodes
Think of a document tree as a family tree. (As shown below, one node can access other nodes through properties)
Each node has a childNodes property that holds a NodeList object (an array-like object, but not an instance of Array), which is the result of a dynamic query based on a DOM structure.
Nodes in NodeList can be accessed either through square brackets or through the item() method. Example:
Var firstChild = somenode.childNodes [0]; var secondChild = someNode.childNodes.item(1); var count = someNode.childNodes.length;Copy the codeOf all the properties that reflect these relationships, the childNodes property is the more convenient because it allows access to any node in the document tree using a simple relationship pointer.
Node operation
Because relational Pointers are read-only, DOM provides methods for manipulating nodes.
The main topics are add, insert, replace and remove, which we will introduce separately.
1. Add a node at the end
This is our most common operation, appendChild(), which adds a node to the end of the childNodes list.
After a node is added, the new node of childNodes, the parent node, and the relational pointer to the previous last child node are updated accordingly. AppendChild () returns the new node when the update is complete.
// appendChild()
var returnedNode = someNode.appendChild(newNode);
alert(returnedNode == newNode); // true
alert(someNode.lastChild == newNode); // true
Copy the codeIf the node passed into appendChild() is already part of the document, the result is that the node is moved from its original location to the new location.
2. Insert the node
To insert a node at a specific location in the childNodes list, use insertBefore(the node to insert, as the reference node).
After inserting a node, the inserted node becomes the previousSibling of the reference node and is returned by the method.
InsertBefore () performs the same operation as appendChild() if the reference node is null.
ReturnedNode = somenode.insertbefore (newNode, null); alert(newNode == someNode.lastChild); ReturnedNode = somenode.insertbefore (newNode, somenode.firstChild); alert(returnedNode == newNode); //true alert(newNode == someNode.firstChild); ReturnedNode = somenode.insertbefore (newNode, somenode.lastChild); alert(newNode==someNode.childNodes[someNode.childNodes.length-2]); //trueCopy the code3. Replace the node
If you want to replace nodes, use replaceChild(nodes to insert, nodes to replace)
The node to be replaced is returned by this method and removed from the document tree, with the node to be inserted taking its place.
/ / replace node replaceChild () / / replace the first child node var returnedNode = someNode. ReplaceChild (newNode, someNode. FirstChild);Copy the code4. Remove the node
Remove nodes using removeChild(the removed node).
The removed node becomes the return value of the method.
RemoveChild () var formerFirstChild = somenode.removechild (somenode.firstChild);Copy the codeThe removed node is still owned by the document, but has no place in the document.
The previous four methods operate on the children of a node, which means that the parentNode must be obtained (using the parentNode property) to use them.
5. Other methods
CloneNode (), which takes a Boolean parameter indicating whether to perform a deep copy.
True, perform a deep copy, that is, copy the node and the entire number of its children.
False, perform shallow replication, that is, copy only the node itself.
The returned copy of the node is owned by the document, but no parent node is specified.
Therefore, this copy of the node is orphaned unless it is added to the document through appendChild(), insertBefore(), or replaceChild().