獲取各種類型的節點
阿新 • • 發佈：2018-09-10
con height tel att charset round comment class nan
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>我是標題</title> </head> <body> <!-- --> <div id="box" class="div" style="width: 30px;height: 50px;" name="nana">我是一個文本節點<!--我是註釋節點--><span name="nana">我是一個span標簽</span></div> <script type="text/javascript"> //元素節點、文本節點、屬性節點、註釋節點 // nodeName nodeValue nodeType -->了解 // 元素節點 標簽名 null 1 // 屬性節點 屬性名 屬性值 2 // 文本節點 #text 文本值 3 // 註釋節點#comment 註釋內容 8 //獲取節點所有的子節點 節點.childNodes//獲取節點所有屬性節點 節點.attributes //1. 元素節點 4種方式獲取 var oDiv = document.getElementById("box"); var oDiv = document.getElementsByClassName("div")[0]; var oDiv = document.getElementsByTagName("div")[0]; //var oDiv = document.getElementsByName("nana")[1]; //console.log( oDiv.innerHTML ); //獲取節點所有的子節點 console.log( oDiv.childNodes ); var oDivChilds = oDiv.childNodes; // //2.文本節點 console.log( oDivChilds[0].nodeName,oDivChilds[0].nodeValue,oDivChilds[0].nodeType ); // //3.註釋節點 // console.log( oDivChilds[1].nodeName,oDivChilds[1].nodeValue,oDivChilds[1].nodeType ); // // //4.獲取元素節點的屬性節點 console.log( oDiv.attributes ); // var oDivAttris = oDiv.attributes; // console.log( oDivAttris[0].nodeName,oDivAttris[0].nodeValue,oDivAttris[0].nodeType ); </script> </body> </html>
獲取各種類型的節點