Home > Developer > JavaScript
It provides a convenient and simple method and properties for locating nodes so that we can quickly operate on the nodes.
respectively: getElementById (), getElementsByTagName (), Getelementsbyname (), getattribute (), SetAttribute (), and RemoveAttribute ( )。
1, getElementById () method:
Accept a parameter: Gets the label node by its ID property value. If the corresponding element is found, the element's Htmldivelement object is returned, and NULL is returned if it does not exist.
<Scripttype= "Text/javascript">window.onload= function(){ varBox=document.getElementById ('Box'); //gets the element node with the ID of boxalert (box.id); }</Script></Head><Body> <DivID= "box">Test Div</Div></Body>
The result is: Htmldivelement (the Node object representing the Div)
The ID represents the uniqueness of an element node and cannot create the same named ID for two or more element nodes at the same time.
Some low-version browsers will not recognize the getElementById () method is recommended case sensitivity to avoid incompatibility, such as ie5.0-, then need to make some judgments, can be combined with browser detection to operate.
<Scripttype= "Text/javascript">window.onload= function () { if(document.getElementById) {//determine if getElementById is supported varBox=document.getElementById ('Box'); alert (box.id); }Else{alert ("Browser not compatible, please replace") } };</Script></Head><Body> <DivID= "box">Test Div</Div></Body>
When we get to a particular element node through getElementById (), the node object is acquired by us, and through this node object, we can access a series of its properties.
<Scripttype= "Text/javascript">window.onload= function () { if(document.getElementById) {//determine if getElementById is supported varBox=document.getElementById ('Box'); alert (box.tagname); //DIValert (box.innerhtml)//Test Div Gets the text content of the current element node (including HTML tags)Alert (box.innerhtml= 'Go <strong>js</strong> play'); //set the text content of the current node, you can use HTML tags, you can also parse }Else{alert ("Browser not compatible, please replace") } };</Script></Head><Body> <DivID= "box">Test Div</Div></Body>
<Scripttype= "Text/javascript">window.onload= function () { if(document.getElementById) {//determine if getElementById is supported varBox=document.getElementById ('Box'); alert (box.id); //gets the value of the id attributeAlert (box.id=' Person'); //set the value of the ID propertyalert (box.title); //gets the value of the titleAlert (Box.title='title ...'); //set the value of the titlealert (Box.style); //Gets the Css2properties object (that is, the Style Property object)alert (Box.style.color); //gets the value of a color in a style objectAlert (Box.style.color='Blue'); //set the value of a color in a style objectalert (box.classname); //Get classAlert (Box.classname='Barbox'); //Set Classalert (BOX.BBB); //gets the value of the custom attribute, which is not supported by IE (if a browser is not supported, then a compatible operation must be done or not used as far as possible) }Else{alert ("Browser not compatible, please replace") } };</Script></Head><Body> <DivID= "box"class= "pox"title= "title"style= "color: #F00;"BBB= "AAA">Test Div</Div></Body>
JavaScript's Dom_ Get element 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
