Home > Developer > JavaScript
The entire DOM is called the DocumentObject model, the Document object, and is an API for HTML and XML documents. It depicts a hierarchical node tree that runs a developer to add, remove, and modify portions of a page. Dom was developed by Netscape and Microsoft, but now it has become a truly cross-platform, language-neutral way of performing and manipulating pages.
A The understanding of DOM
Three letters in the DOM, D can be understood as the entire Web-loaded page document; O can be understood as window-like
Objects and so on, you can call properties and methods, where we're talking about the document object; M can be seen as the tree structure of the Web page documents.
1 node
When you load an HTML page, the Web browser generates a tree structure that represents the internal structure of the page, which the DOM understands as being composed of nodes. As shown in the following figure
From the tree structure above, we can see that HTML tags have no parents, no brothers, so the HTML tag is the root tag, the head tag is the HTML child tag, and the meta and title tag is a sibling relationship. If you treat each label as a node, then these nodes are grouped into a tree of nodes.
2 node types
The nodes in the DOM are roughly divided into: element nodes, text nodes, and attribute nodes
Two Find elements
W3 provides a convenient and simple way to locate nodes, so that we can quickly manipulate the nodes,
Listed below:
When we get to a particular element node through getElementById (), the node object is captured by us, and through this node object we can access his series of attributes.
So how do these attribute values get out?
Let's look at a simple little example:
<span style= "FONT-SIZE:18PX;" ><body>
<div id= "box" title= "test Page" class= "CLA" style= "Color:blue" >
to Learn js, the front desk are not afraid.
</div >
</body>
window.onload=function () {
var obj= document.getelementbyid (' box ');
alert (obj.tagname);
alert (obj.innerhtml);
alert (obj.id);
alert (obj.title);
alert (obj.style.color);
alert (obj.classname);
}; </span>As for the other methods are no longer one by one explained, want to know can check the relevant information.
Three DOM node
1 Node Nodes properties
The nodes can be divided into three kinds, as mentioned above, and these nodes have three very useful properties, respectively: NodeName,
NodeType, and NodeValue. The following are their instructions:
2 Hierarchical Node Properties
The hierarchical structure of a node can be divided into two types: parent node and child node, sibling node. When we get one of the element nodes, we can use the hierarchical node property to get the node of its related level.
Four Node operations
The DOM can not only find nodes, it can also create nodes, replicate nodes, insert nodes, delete nodes, and replace nodes.
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
