DOM屬性節點加其餘節點的操做

時間 2019-11-15

標籤 dom 屬性節點其餘欄目 HTML 简体版

原文原文鏈接

節點屬性 nodeType 返回值爲數值

節點類型(nodeType) 節點名字(nodeName) 節點值(nodeValue)

元素節點 1 標籤名 null

文本節點 3 #text 文本

註釋節點 8 #comment 註釋的文字

文檔節點 9 #document null

屬性節點 2 屬性名屬性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="box" a="10" b=20 id="cont" title="這是一個div">hello<!--這是一個註釋-->></div>

</body>
<script>

    var obox = document.querySelector(".box")//經過元素屬性操做
    console.log(obox.attributes);//顯示元素的內置屬性
    console.log(obox.attributes[0].class); //undefined
    console.log(obox.attributes[1].a);  //undefined
    console.log(obox.attributes[2]);  //b="20"
    console.log(obox.attributes[3]);   //id="cont"
    console.log(typeof obox.attributes[3]);  object

     console.log(obox.attributes[2]);  //b="20"
     console.log(obox.attributes[2].nodeName); //b
     console.log(obox.attributes[2].nodeValue); //20
     console.log(obox.attributes[2].nodeType);//2

     console.log(obox.nodeName)
     console.log(obox.nodeValue)
     console.log(obox.nodeType)

     console.log(typeof obox.childNodes[0])
     console.log(obox.childNodes[0])
     console.log(obox.childNodes[0].nodeName)
     console.log(obox.childNodes[0].nodeValue)
     console.log(obox.childNodes[0].nodeType)

     console.log(obox.childNodes[1])
     console.log(obox.childNodes[1].nodeName)
     console.log(obox.childNodes[1].nodeValue)
     console.log(obox.childNodes[1].nodeType)

     console.log(document)
     console.log(document.nodeName)
     console.log(document.nodeValue)
     console.log(document.nodeType)


//     僞數組：假數組，可使用索引和長度遍歷
//     可是不能使用數組的方法
//     全部的DOM選擇器，返回的數組，都是僞數組
//     arguments
//
//     真數組：既能經過索引和長度遍歷，也可使用數組的方法





</script>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。