Home > Developer > Web Develop
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.
nodes (node)The term node is derived from the network theory, which represents a network of connection points, the network is composed of nodes.
The same is true for HTML documents, where a document is a collection of nodes.
1. ELEMENT nodesELEMENT nodes, such as <body> <p> <div>, are elements that form the structure of the document in the layout of the document.
2. Text NodeA text node refers to the contents of an element node, but not all element nodes contain text nodes.
3. Attribute NodesElements 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 object1, Queryselector ()HTML5 the new method, you can get the first element that meets the criteria by passing in a legitimate CSS selector
Example: Document.queryselector ("#test"); Returns the first div with ID test
2, Queryselectorall ()HTML5 new method, by passing in a legitimate CSS selector, you can get all eligible elements, return an array of objects
Example: Document.queryselectorall ("Div.foo"); Returns all div element objects with the Foo class style
Note: Using the above two methods cannot find elements with pseudo-class state, such as Queryselector (': hover ') will not get its result.
3, getElementById ()This method returns an object corresponding to the element node for the given ID attribute value.
Example: document.getElementById (' box ');
4, Getelementsbyidtagname ()This method returns an array of objects. Each object corresponds to an element of a given tag in the document.
Example: Document.getelementbytagname (' Li ');
5, Getelementsbyname ()Get an array of objects by name
third, indirect reference node (extension)In addition to referencing nodes directly, you can also refer to relative nodes through relationships between nodes.
1. Referencing child nodesEach 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.
Cases:
DOCUMENT.CHILDNODES[1]; Referencing the root node of a document
DOCUMENT.CHILDNODES[0].CHILDNODES[0]//References
DOCUMENT.CHILDNODES[0].CHILDNODES[1]//References <body> nodes
In addition to using the ChildNodes property, there are two properties that can be used to refer to child nodes, respectively:
Element.firstchild;
Element.lastchild;
They represent the first child node and the last child node, respectively.
2. Referencing the parent nodeThe node hierarchy of HTML is a tree structure, except for the root node, each node has only one parent node, and can have the ParentNode property to reference
Element.parent.Node; Reference parent Node
3. Referring to sibling nodesA node belonging to the same document hierarchy is called a sibling node, and there are two attributes that can be used for sibling inter-node references, respectively:
element.nextsibling; Referencing the next sibling node
element.previous.Sibling; Referencing the previous sibling node
Iv. Acquiring node information (extension)After you get a reference to a node, there are ways to get the information for that node.
1. NodeName Get node nameSyntax: Node.nodename;
For different types of nodes, the return value of nodename varies:
ELEMENT node: Returns the tag name;
Attribute node: Returns the property name;
Text node: Returns text #text
2. NodeType Get node typeSyntax: Node.nodetype;
ELEMENT node: return 1
Attribute node: returns 2
Text node: return 3
3. NodeValue gets the value of the nodeSyntax: Node.nodevalue;
ELEMENT node: return null
Attribute node: Returns the node value
Text node: Return text content
v. Handling attribute Nodes1, get. Attribute Get node Property valuesObject.getattribute (attribute)
Cases:
var a = Document.getelementbytagname (' a ');
for (var i = 0; i<a.length; i++) {
Alert (A[i].get. Attribute (' title '));
}
2, set. Attribute () Setting node property valuesObject.setattribute (attribute, value)
Cases:
var link = document.getElementById (' link ');
Link.setattribute (' title ', ' Link hint information ');
vi. working with text nodes1, node.innerhtmlGets the text content that contains the HTML tag under the node
Cases:
var BODY = document.queryselector (' body ');
alert (html.innerhtml);
2, Node.textcontentGet plain text content under this node
Cases:
var BODY = document.queryselector (' body ');
alert (html.textcontent);
Vii. Blank nodes (extensions) that vary by browserIE browser and Firefox browser to the blank node processing, IE will ignore these nodes, and the Firefox browser recognizes these nodes.
Processing method:
1. Prevent text nodes from appearing in the document
function Clearwhitespace (Element) {
for (var i = 0; i<element.childnodes.length; i++) {
var node = 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);
}
}
}
Dom Summary:A document is a tree;
The nodes are divided into different types, namely: element node, attribute node, text node;
Each node is an object;
9.8 JS Advanced Summary 3
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
