Node operation

First, the properties of the node

• Everything in the node value page, including labels, attributes, text
• nodeType, node type: 1 if it is a label; if it is an attribute. 2 if it is text; 3 if it is text
• nodeName, node name: if it is a label, it is an uppercase label, if it is an attribute, it is a lowercase attribute; if it is text, it is #text
• nodeValue, the value of the node: if it is a label, it is null; if it is an attribute, it is the attribute value; if it is text, it is the text content

    < p > I am a p </ p > 
    < div style ="color: yellow" > I am a div </ div > 
    < span > I am a span </ span > 
    < script > 
        // If the node is a tag 
        console .log(document.getElementsByTagName( " p " )[ 0 ].nodeType); // 1 
        console.log(document.getElementsByTagName( " p " )[ 0 ].nodeName); // P-----uppercase
        console.log(document.getElementsByTagName("p")[0].nodeValue);//null
        //如果节点是属性
        console.log(document.getElementsByTagName("div")[0].attributes[0].nodeType);//2
        console.log(document.getElementsByTagName("div")[0].attributes[0].nodeName);//style-----小写
        console.log(document.getElementsByTagName("div")[0].attributes[0 ].nodeValue); // color: yellow-----value 
        // if the node is text 
        console.log(document.getElementsByTagName( " span " )[ 0 ].childNodes[ 0 ].nodeType); // 3 
        console.log(document.getElementsByTagName( " span " )[ 0 ].childNodes[ 0 ].nodeName); // #text 
        console.log(document.getElementsByTagName( " span " )[ 0 ].childNodes[ 0 ].nodeValue ); // I am a span-----value 
    </script>

2. Get nodes and elements (12 lines of code)

    < div > 
        < p > I am a p </ p > 
        < div > I am a div </ div > 
        < ul id ="uu" > 
            < li > 1st li </ li > 
            < li > 2nd li </ li > 
            < li id ="three" > 3rd li </ li > 
            < li > 4th li </ li > 
            <li > 5th li</ li > 
        </ ul > 
        < span > I am a span </ span > 
    </ div > 
    < script > 
        // get the tag ul 
        var ulobj = document. getElementById( " uu " );
         // 1. Parent node 
        console.log(ulobj.parentNode); // div 
        // 2. parent element 
        console.log(ulobj.parentElement); // div 
        // 3. child node 
        console.log(ulobj.childNodes); //[text, li, text, li, text, li#three, text, li, text, li, text] 
        // 4. child element 
        console.log(ulobj.children); // [li, li, li#three , li, li] 
        // 5. First child node 
        console.log(ulobj.firstChild); // #text 
        // 6. First child element 
        console.log(ulobj.firstElementChild); // li 
        // 7. The last child node 
        console.log(ulobj.lastChild); // #text 
        // 8. The last child element 
        console.log(ulobj.lastElementChild); // li 
        // 9. The previous sibling of an element node 
        console.log(document.getElementById( " three ").previousSibling); // #text 
        // 10. The previous sibling of an element 
        console.log(document.getElementById( " three " ).previousElementSibling); // li 
        // 11. The next element of an element Sibling node 
        console.log(document.getElementById( " three " ).nextSibling); // #text 
        // 12. The next sibling element of an element 
        console.log(document.getElementById( " three " ).nextElementSibling); // li 
    </ script >

Summary: For any code that gets a node, what Google and Firefox get are related nodes, and for any code that gets an element, what you get is related elements in Google and Firefox.

However, starting from child nodes and siblings, all the code to get the node will get the element in IE8, and the relevant code to get the element will get undefined (indicating that it is not supported)

3. Case

 <!-- Example 1: Click the button to set the p tag in the div to change the background color --> 
    < input type = "button" value = = "change color" id = "btn" > 
    < div id = "dv" > 
        < span > I am a span </ span > 
        < a href ="#" > I am a link </ a > 
        < p > I am a p </ p > 
        < h5 > I am a \(^o^)/~ < / h5 > 
        <div > i am a div </div > 
    </ div > 
    < script > 
        document.getElementById( " btn " ).onclick = function (){
             // Get all the bytes in it and return an array 
            var nodes = document.getElementById( " dv " ).childNodes ;
             // Loop through all child nodes 
            for ( var i = 0 ;i < nodes.length;i ++ ){
                 // Determine whether this child node is a p tag 
                if (nodes[i].nodeType == 1&&nodes[i].nodeName=="P"){
                    nodes[i].style.backgroundColor="yellow";
                }
            }
        };
    </script>