DOM属性节点加其他节点的操作

 节点属性 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>