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.
first, the nodenode is derived from the theory of Network, 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 nodes
ELEMENT nodes, such as <body> <p> <div>, are elements that form the structure of the document in the layout of the document.
2. Text node
A text node refers to the contents of an element node, but not all element nodes contain text nodes.
3. Attribute nodes
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.
Node Example:
<p title= "Show me Here" > This is a paragraph </p>
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
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
Document.queryselectorall (' Div.foo ');//returns all DIV element objects with the Foo class styleAttention:
Using the above two methods cannot find elements with pseudo-class state, such as Queryselector (': hover ') will not get the result of the period.
3.getElementById ()
This method returns an object that corresponds to the element node for the given ID attribute value.
document.getElementById (' box ');
4.getElementsByTagName ()
This method returns an array of objects. Each object corresponds to an element of a given tag in the document.
document.getElementsByTagName (' Li ');
5.getElementsByName ()
Get an array of objects by name
third, get the node information (extension)After you get a reference to a node, there are ways to get the information for that node.
1.nodeName Get the node name
Grammar:
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 Getting the node type
Grammar:
Node.nodetype;
ELEMENT node: return 1
Attribute node: returns 2
Text node: return 3
3.nodeValue gets the value of the node
Grammar:
Node.nodevalue;
ELEMENT node: return null
Attribute node: Returns the node value
Text node: Return text content
Iv. handling attribute nodes1. GetAttribute Get Node Property value
Object.getattribute (attribute)
var a = document.getElementsByTagName ("A"), for (var i=0; i<a.length; i++) {alert (A[i].getattribute ("title"));}
2.setAttribute () Set node property values
Object.setattribute (attribute, value)
var link = document.getElementById (' link '); Link.setattribute (' title ', ' Link hint information ');v. Working with text nodes
1. node.innerhtml
Gets the text content that contains the HTML tag under the node
var BODY = document.queryselector (' body '); alert (html.innerhtml);
2. Node.textcontent
Get plain text content under this node
var BODY = document.queryselector (' body '); alert (html.textcontent);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;
The getElementById () method returns an object that corresponds to an element node in the document;
The getElementsByTagName () method returns an array of objects that correspond to the element nodes in the document, respectively;
JS Basics, DOM Document Object model
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
