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>