JavaScript Dom_ Gets the element method _getelementbyid () Gets the node of the specific ID element

Source: Internet
Author: User

First, the tag node is obtained by the ID attribute value of the tag.

  Accepts a parameter: Returns the Htmldivelement object of the element if the corresponding element is found, or null if it does not exist.

<script type= "Text/javascript" >    function() {        var box = document.getElementById (' box ');        // gets the element node with the ID of box         alert (box.id);    } </script> 

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.

<script type= "Text/javascript" >    function  () {                                 if( document.getElementById) {                // determine if getElementById            var box is supported document.getElementById (' box ');            alert (box.id);        } Else {            alert ("Browser is incompatible, please replace")        }    }; </script>

Ii. operation of element node properties

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.

   

<script type= "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 = ' play <strong>js</strong> ');//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>

Third, the operation of HTML attributes

<script type= "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>

JavaScript Dom_ Gets the element method _getelementbyid () Gets the node of the specific ID element

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.