Five common DOM methods in JavaScript

Source: Internet
Author: User

getElementById will return an object corresponding to the element node that has the given ID attribute value.

<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Untitled Document </title>

<body>
<p title= "A gentle reminder" >don ' t forget to buy this stuff.</p>
<ul id= "Purchase" >
<li>a Tin of Beans</li>
<li class= "Sale" >Cheese</li>
<li class= "Sale Important" >Milk</li>
</ul>
<script>
Alert (typeof document.getElementById ("purchase"));
</script>
</body>

The getElementsByTagName method returns an array of objects, each corresponding to a set of elements in the document that have a given label.

<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Untitled Document </title>

<body>
<p title= "A gentle reminder" >don ' t forget to buy this stuff.</p>
<ul id= "Purchase" >
<li>a Tin of Beans</li>
<li class= "Sale" >Cheese</li>
<li class= "Sale Important" >Milk</li>
</ul>
<script>
For (Var i=0;i<document.getelementsbytagname ("Li"). length;i++) {
Alert (typeof document.getelementsbytagname ("Li") [i]);
}
</script>
</body>

Getelementsbyclassname (HTML5), which takes only one argument, the class name, to return an array of elements with the same class name

<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Untitled Document </title>

<body>
<p title= "A gentle reminder" >don ' t forget to buy this stuff.</p>
<ul id= "Purchase" >
<li>a Tin of Beans</li>
<li class= "Sale" >Cheese</li>
<li class= "Sale Important" >Milk</li>
</ul>
<script>
Alert (Document.getelementsbyclassname ("sale Important"). length);
</script>
</body>

GetAttribute is a function that, by appending the name of a parameter, can get the value of this parameter and the corresponding setattribute can set the name and value of the parameter to be assigned by two parameters.

<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Untitled Document </title>

<body>
<p title= "A gentle reminder" >don ' t forget to buy this stuff.</p>
<ul id= "Purchase" >
<li>a Tin of Beans</li>
<li class= "Sale" >Cheese</li>
<li class= "Sale Important" >Milk</li>
</ul>
<script>
var paras=document.getelementsbytagname ("P");
for (Var i=0;i<paras.length;i++) {
var title_text=paras[i].getattribute ("title");
if (Title_text) {
Paras[i].setattribute ("title", "brand new title text");
Alert (Paras[i].getattribute ("title"));
}
}
</script>
</body>

Five common DOM methods in JavaScript

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.