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