Home > Developer > JavaScript
Second, Dom object:
The DOM Document Object model, which defines the interface for manipulating document objects.
The DOM represents an HTML document as a family tree, using tokens such as parent, child, sibling (brother) to indicate the relationship between the members of the household.
First, the node
ELEMENT node:
ELEMENT nodes, such as <body> <p> <div>, are elements that form the structure of the document in the layout of the document.
Text nodes:
A text node refers to the contents of an element node, but not all element nodes contain text nodes.
Attribute node:
Elements have more or less attributes, and the function of the attribute is to make a more specific description of the element. Attribute nodes are always included in the element node.
Second, get the Document object:
1.querySelector ()
By passing in a legitimate CSS selector, you get the first element that meets the criteria
2.querySelectorAll ()
By passing in a legitimate CSS selector, you get all eligible elements and return an array of objects
Note: Using the above two methods cannot find elements with pseudo-class state, such as Queryselector (': hover ') will not get the result.
3.getElementById ()
Gets the object that corresponds to the element node for the given ID attribute value.
4.getElementsByTagName ()
Gets all eligible elements of a given label in the document, returns an array of objects
5.getElementsByName ()
Get an array of objects by name
6.getElementsByClassName ()
Get an array of objects by classname
Third, indirect reference node:
1. Refer to child nodes:
Childnodes[]:
Each node has a ChildNodes collection property, and the type is an array object that represents the collection of all child nodes of that node. These child nodes are arranged in the order in which they appear in the document, so that each child node can be accessed sequentially through the index.
FirstChild:
The first child node.
LastChild:
The last child node.
2. Refer to Parent node:
ParentNode:
In addition to the root node, each node has only one parent node.
3. Refer to Sibling nodes:
NextSibling:
References the next sibling node.
PreviousSibling:
References the previous sibling node.
Iv. Obtaining node Information:
1. Get the node name--nodename
ELEMENT node: Returns the tag name;
Attribute node: Returns the property name;
Text node: Return text #text
2. Get the node type--nodetype
ELEMENT node: return 1
Attribute node: returns 2
Text node: return 3
3. Get the value of the node--nodevalue
ELEMENT node: return null
Attribute node: Returns the node value
Text node: Return text content
Five, processing node
1. Attribute node:
Gets the Node property value--getattribute
Set the Node property value--setattribute
2. Text node:
innerhtml--gets the text content that contains the HTML tag under the node
textcontent--get plain text content under this node
3. Blank node:
IE browser and Firefox browser to the blank node processing, IE will ignore these nodes, and the Firefox browser recognizes these nodes.
1. Avoid text nodes appearing in the document.
2. Remove the white space nodes before use.
Functioncleanwhitespace (Element) {
for (vari=0; i < element.childNodes.length; i++) {
Varnode = Element.childnodes[i];
Determine if it is a blank node, or delete the node if it is
if (node.nodetype== 3 &&!/\s/.test (node.nodevalue) {
Node.parentNode.removeChild (node);
}
}
}
CHAPTERIII of JavaScript objects
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
