Get element node & operation attribute node

1.html document writing js code location:

The window.onload event is executed after the entire html document is completely loaded,
so you can get any node of the html document

js-window-onload.html

<! DOCTYPE html > 
< html > 
< head > 
< meta charset = "UTF-8" > 
< title > Insert title here </ title > 
< script type = "text / javascript" > 
    // window.onload event in the entire html The document is fully loaded and then executed 
    // so you can get any node of the html document 
    window.onload =  function () { 

    }; 
</ script > 
</ head > 
< body > 
    <button>Click</button>
</body>
</html>

2. Get element node

①. document.getElementById:

Get the corresponding single node according to the id attribute

②. Document.getElementsByTagName:
Get the array of the specified node name according to the tag name, the length property of the array object can get the length of the array

③. Document.getElementsByName:
According to the name attribute of the node to obtain an array of eligible nodes,
but the implementation of ie is different from the W3C standard:
if a node (li) does not have a name attribute in the html document,　
ie cannot be obtained using getElementsByName Array of nodes, but Firefox can.

dom-getNode.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>

<script type="text/javascript">
    //获取指定的元素节点. 
    window.onload = function() {
        //1.Get the node whose id is bj, and ensure that the id attribute value is unique when writing the document. This method is the method of the document object. 
        =bjNodeVardocument.getElementById ( " bj " ); 
        alert (bjNode); 

        // 2. Get all li nodes, use the tag name to get the collection of nodes, this method is the method of the Node interface, any node has this method 
        var liNodes = document .getElementsByTagName ( " li " ); 
        alert (liNodes.length); 

        var cityNode = document.getElementById ( " city " );
         var cityLiNode = cityNode.getElementsByTagName ( " li " ); 
        alert (cityLiNode.length); 

        // 3. According to the name attribute name of the HTML document element to get the specified node set 
        vargenderNodes = document.getElementsByName ( " gender " ); 
        alert (genderNodes.length) 

        // If the HTML element itself does not define the name attribute, then getElementsByName (), this method is not valid for IE, so use caution 
        var bjNode2 = document.getElementsByName ( " BeiJing " ); 
        alert (bjNode2.length) 
    } 
</ script > 

</ head > 
< body > 
    < p > Which city do you like? </ P > 
    < ul id = "city" > 
        <at thethe above mentioned id = "BJ" name = "BeiJing" > Beijing </ li > 
        < li > Shanghai </ li > 
        < li > Tokyo </ li > 
        < li > Seoul </ li > 
    </ ul > 

    < br > 
    < br > 
    < p > Which stand-alone game do you like? </ p > 
    < ul id = "game" > 
        <li id="rl">红警</li>
        <li>实况</li>
        <li>极品飞车</li>
        <li>魔兽</li>
    </ul>

    <br>
    <br> gender:
    <input type="radio" name="gender" value="male" />Male
    <input type="radio" name="gender" value="female" />Female
</body>
</html>

3. Get the attribute node:
①You can get and set the value of the attribute node directly through the way of cityNode.id

② Get the attribute node through the getAttributeNode method of the element node,
and then read and write the attribute value through nodeValue

dom-getNode2.html

<! DOCTYPE HTML PUBLIC "-// W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd" > 
< html > 
< head > 
< meta http-equiv = "Content-Type" content = "text / html; charset = UTF-8" > 
< title > Untitled Document </ title > 

< script type = "text / javascript" > 
    // Read and write attribute node 
    window.onload =  function () {
         // The attribute node is the attribute of a specified element node 
        // 1.First get the node 
        var nameNode of the specified element= Document.getElementById ( " name " ); 

        // 2. Reads the specified attribute value 
        Alert (nameNode.value); 

        .. 3 // Sets the specified attribute value 
        nameNode.value =  " Jing " 

    } 
</ Script > 

< / head > 
< body > 
    < p > Which city do you like? </ p > 
    < ul id = "city" > 
        < li id = "bj" name = " BeiJing " > Beijing </li>
        <li > Shanghai </ li > 
        < li > Tokyo </ li > 
        < li > Seoul </ li > 
    </ ul > 

    < br > 
    < br > 
    < the p- > Do you like Which stand-alone game? </ the p- > 
    < ul the above mentioned id = "game" > 
        < li id = "rl" > Red Police </ li > 
        < li > Live </ li >
        <li>极品飞车</li>
        <li>魔兽</li>
    </ul>

    <br>
    <br> name：
    <input type="text" name="username" id="name" value="xiaoxiaolin">
</body>
</html>

Get element node & operation attribute node

Guess you like