1. 程式人生 > >JavaScript獲取相關節點

JavaScript獲取相關節點

color 簽名 tel 標簽 節點類 name 相關 val 子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="dv">
    <span>這是div中的第一個span標簽</span>

    <p>這是div中的第二個元素,第一個p標簽</p>
    <ul id="uu">
        <li>喬峰</
li> <li>鹿茸</li> <li id="three">段譽</li> <li>卡卡西</li> <li>雛田</li> </ul> </div> <script src="common.js"></script> <script> var ulObj = my$("uu"); //ul標簽的父級節點 console.log(ulObj.parentNode);
//ul標簽的父級元素 console.log(ulObj.parentElement); var divOBJ = my$("dv"); //div的子節點 console.log(divOBJ.childNodes); //div的子元素 console.log(divOBJ.children); //div var dvObj = document.getElementById("dv"); //獲取裏面的每個子節點 for (var i = 0; i < dvObj.childNodes.length; i++) {
var node = dvObj.childNodes[i]; //nodeType:--->節點類型:1---標簽,2---屬性,3---文本 //nodeName:--->節點名字:大寫的標簽名----標簽,小寫的屬性名---屬性,#text---文本 //nodeValue:--->節點值:標簽---null,屬性---屬性的值,文本---文本內容 console.log(node.nodeType + "======" + node.nodeName + "======" + node.nodeValue) } //div var dv1Obj = document.getElementById("dv"); //獲取的是屬性的節點 var node1 = dv1Obj.getAttributeNode("id"); console.log(node1.nodeType + "======" + node1.nodeName + "======" + node1.nodeValue); </script> </body> </html>

JavaScript獲取相關節點