First, select elements through HTML
Selecting Elements by ID
-document.getElementById (' id ') can be used to select a child element based on the ID in the current DOM tree
650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M01/7E/5C/wKiom1b8_g_wmda3AAF6fOGaY80526.png "title=" Web.png "alt=" Wkiom1b8_g_wmda3aaf6fogay80526.png "/>
Select elements by Tag name
-Node.getelementsbytagname (' tag name ') can return all elements with the specified tag name based on the tag name
650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M00/7E/5C/wKiom1b8_nvg_el4AAGBROULlvA466.png "title=" Web.png "alt=" Wkiom1b8_nvg_el4aagbroullva466.png "/>
Selecting elements through the Name property
-Document.getelementbyname (' Name property ') can return all child element collections with the specified name attribute value in the DOM number
650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M00/7E/58/wKioL1b8_3SDMbJ_AADW2Sc9tbY797.png "title=" Web.png "alt=" Wkiol1b8_3sdmbj_aadw2sc9tby797.png "/>650" this.width=650; "src=" http://s2.51cto.com/wyfs02/M01/ 7e/5c/wkiom1b8_uswryvkaackj-hcoqy460.png "title=" Web.png "alt=" Wkiom1b8_uswryvkaackj-hcoqy460.png "/>
Second, select elements through CSS
Selecting Elements from CSS
-A new method for selecting elements according to the class name is added in HTML5:
Node.getelementsbyclassname (' ClassName '); ie9+, firefox3+, safari3.1+, Chrome, opera9.5+
650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M02/7E/58/wKioL1b9ACjg5XrNAADFmrdUJgI441.png "title=" Web.png "alt=" Wkiol1b9acjg5xrnaadfmrdujgi441.png "/>
650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M02/7E/58/wKioL1b9AEDgEyBRAADfRnrEvoU233.png "title=" Web.png "alt=" Wkiol1b9aedgeybraadfrnrevou233.png "/>
Selecting elements from the CSS selector
-HTML5 also defines the following two ways to select elements based on CSS selectors:
-Node.queryselector (' selector '); Returns the first match of a
-Node.queryselectorall (' selector ');//Returns all matching
650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M01/7E/5C/wKiom1b9AdDhtCk7AAIfR8kKXU0624.png "title=" Web.png "alt=" Wkiom1b9addhtck7aaifr8kkxu0624.png "/>
Third, other selection
document.all
-Document.all is a class array object, which is a collection of all the elements in the page, with the following specific usage:
-Document.all[index]
-document.all[' id ']
-Document.all.id
-document.all[' name ']
-document.all.tags[' TagName ']
650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M02/7E/58/wKioL1b9AwPxhqHlAAELBb_5FH4524.png "title=" Web.png "alt=" Wkiol1b9awpxhqhlaaelbb_5fh4524.png "/>
Document.documentelement
-The Document.documentelement object is a reference to the root element (that is, the
-Document.documentelement = = = Document.lastchild
Document.head
-Document.head object is a reference to the
-Document.head = = = Document.lastChild.firstChild
Document.body
-Document.body object is a reference to the <body> element in an HTML document
-Document.head = = = Document.lastChild.lastChild
Summary: This chapter focuses on the JavaScript DOM selection elements (selecting elements via HTML, selecting elements through CSS, and other selections)
This article from the "Technical Exchange" blog, declined reprint!
DOM-3 of JavaScript Select elements (select elements via HTML, select elements via CSS, other selections)
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
