Home > Developer > Web Develop
The Dom,document object Modle, the Document Object model, is often used in JS. is actually a model that will be created automatically after we open a webpage. First, we first instantiate a Web page:
<meta charset= "Utf-8" >
<title>bob ' s love</title>
<body>
<p id= "Firstparagraph" >bob ' s love list</p>
<ul class= "Bobsul" >
<li>movie</li>
<li>music</li>
<li>food</li>
</ul>
</body>
Then the structure between the elements of the page like the one above can be represented by the DOM model:
Html
Head body
Meta Title P UL
Li Li Li
HTML as the beginning of a Web page, it has neither a parent element nor a sibling element. Head and body, which are both child elements of the HTML parent element, as well as sibling elements of each other, and because there are other elements inside the BODY element, the body is also the parent element of P,ul. The following meta,title,p,ul is the same as the relationship. The entire DOM model is a mathematical concept tree, and the HTML element is the root element or the root node.
Below, we discuss the following nodes, there are three nodes, respectively, element node, text node, attribute node.
ELEMENT nodes are elements that make up the structure of a Web page, such as the P node above, the UL node, and the Li node.
A text node is a node that forms the content of a Web page, such as the contents of the Li tag in the above.
An attribute node is a more specific refinement or description of the element node, such as the id attribute of the p node above.
So how do we get these nodes down the DOM? We need to take advantage of 3 of the methods in the Document object under the DOM.
1.getElementById
var test = document.getElementById ("Firstparagraph");
In the above example, document.getElementById ("Firstparagraph") is called the method in document getElementById (), An object with ID firstparagraph is returned and assigned to test.
2.getElementByTagName
var test = document.getelementbytagname ("Li");
In the example above, the method on the right returns an array of all objects labeled "Li". In the above page, for example, a 3-length array is returned.
3.getElementByClassName
var test = document.getelementbyclassname ("Bobsul");
In the example above, an object with the class name "Bobsul" of the element is returned. Also, because the class name can be duplicated, it returns an array like Bytagname, except that the length of the array is 1 in the page instance above.
After getting to the element node through the above method, we also need to get and set the attributes of the element node.
1. Get the attribute Object.getattribute (attribute);
2. Set attribute Object.setattribute (Attribute,value);
Dom in the B.js
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
