DOM节点的标准属性：nodeName nodeType nodeValue;
<body>
<section id="box1">
<h1>这是标题</h1>
<p>这是p标签</p>
</section>
1.必须记住：每种节点类型 nodeName nodeType nodeValue三个属性的值是什么？
console.log(document.nodeName) //#document
console.log(document.nodeType) //9
console.log(document.nodeValue) //null
nodeName：节点名字
元素节点的nodeName 与标签名相同
属性节点的nodeName 与属性名相同
文本节点的nodeName 始终是#text
nodeValue：文本节点的值
元素节点的nodeValue 是undefined或null
属性节点的nodeValue 是属性值
文本节点的nodeValue 是文本本身
nodeType：节点类型
元素节点：1 属性节点：2 文本节点：3
2.元素节点对象
var obox1 = document.getElementById("box1")
console.log(obox1.nodeName) //section html元素的，名称
console.log(obox1.nodeType) // 1
console.log(obox1.nodeValue) //null
3.文本节点对象
var obox1 = document.getElementById("box1") //1.先获取元素节点对象
var list=obox1.childNodes;
list[1] // 等同于 obox1.childNodes[1]
NodeList(5) [text,h1,text,p,text] 父元素下共有5个子元素
属性：lastChild 最后一个子节点； firstChild 第一个子节点 通过它们来获取
双标签元素中的文本节点。
var textNodeH1 = list[1].lastChild //h1的文本内容
console.log(textNodeH1.nodeName) //#text
console.log(textNodeH1.nodeType) // 3
console.log(textNodeH1.nodeValue) //这是标题1
4.属性节点对象
var obox1 = document.getElementById("box1")；//1.先获取元素节点对象
var attr = obox1.getAttributeNode('id'); //2.获取元素节点上的属性节点对象
console.log(attr); // id="box1"
console.log(attr.nodeName) //id
console.log(attr.nodeType) // 2
console.log(attr.nodeValue) //box1
var oH1 = document.getElementsByTagName("h1")[0] //直接写[0],表示方法返回的
这个数组的第一个数组元素变量
oH1.parentNode //<section>...</section>
oH1.previousSibling //#text
oH1.nextSibling //#text
oH1.nextSibling.nextSibling //<p>...</p>
5.children
var oSection = document.getElementById("box1");
var arr = oSection.children;
console.log(arr) //HTMLCollection(2) [h1,p]
属性children，与属性childNodes的区别：属性children返回的集合中，不包含空文本
节点
children :返回所有子元素节点列表
childrenNodes：返回所有子节点列表，包含空文本节点
904
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
