Home > Developer > Web Develop
Introduce several common methods of JS Dom
Get element node getElementById getelementsbytagname getelementsbyclassname
First write a simple Web page to do the test:
/*
Test.html
*/
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "Utf-8"> <title>Test</title></Head><Body> <PID= "ContentId"style= "width:500px; Height:30px;background-color: #ccc">The ID of this paragraph is contentid.</P> <Pclass= "Contentclass"style= "width:500px; Height:30px;background-color: #ccc">This section of class name is Contentclass.</P></Body></HTML>
1. getElementById
1. Define the variable var contentId = document.getElementById ("ContentId") first;
2. Then the output object contentId Returns the element object with ID contentId ( <p id= "contentId" style= "width:500px; height:30px; Background-color: #ccc "> ). See:
2. getElementsByTagName
1. Define the variable var contenttag = document.getElementsByTagName ("P") first;
2. Then I output contenttag , it returns htmlcollection [ <p#contentId>, <p. Contentclass> ] A total of two, one with a # beginning to represent the ID, and the other with a. Beginning to indicate class name.
3. Continue contenttag[0] output <p ID= "ContentId" style = "width:500px; Height:30px;background-color: #ccc">
contenttag[1] output <P class= "Contentclass" style= " width:500px; Height:30px;background-color: #ccc ">
It is getElementsByTagName to return an array !
3. Getelementsbyclassname
1. var contentclass = Document.getelementsbyclassname ("Contentclass");
2. contentclass output htmlcollection [ <p. Contentclass> ] Returns an array of element objects , even if there is only one.
3. contentclass[0] output <P class= "Contentclass" style = "width:500px; Height:30px;background-color: #ccc" >
We often use getattribute,setattribute,childnodes, NodeType, NodeValue, FirstChild, LastChild methods to get some information.
4. get and Set properties using getattribute and setAttribute , respectively:
After changing the Style property:
5. So this is childnodes:
That is, <p></p> when a block element is encountered, there is a line break between the block elements <br> , and the browser treats the child node as a text node when it finds it. You can also see that childNodes returns an array as well.
What if it's <p#contentId>?
There are 12 values for NodeType , three for common use: 1 for ELEMENT nodes, 2 for attribute nodes, and 3 for text nodes.
NodeValue can not only get the value of the text node, but also change the value of the text node.
JS Dom method There are many, you can see this W3school JS reference manual, I believe that the beginner has a great help.
Xd!
"JS Common Dom method"
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
