1.获取节点的方法
节点node：所有页面中包含的东西，都成为节点
- document文档节点
- nodeType:9
- nodeName:document
- nodeValue:null
- 元素节点:元素标签
- nodeType:1
- nodeName:"标签名"
- nodeValue:null
- 文本节点：文字后者标签之间的空格和换行也被当做文本节点
- nodeType:3
- nodeName:"#text"
- nodeValue：文本内容
- 注释节点：注释内容
- nodeType:8
- nodeName:"#conment"
- nodeValue：注释内容
2.描述节点和节点之间的关系属性，基于这些属性可以获取指定的节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>操作DOM节点</title>
</head>
<body>
<div class="box">
<!-- 我就是个注释 -->
<h2 class="title">新闻大纲</h2>
<ul>
<li>我是新闻一条信息</li>
<li id="li2">我是新闻二条信息</li>
<li>我是新闻三条信息</li>
<li id="li4">我是新闻四条信息</li>
<li>我是新闻五条信息</li>
<li>我是新闻六条信息</li>
<li>我是新闻七条信息</li>
</ul>
</div>
</body>
</html>
1.[container].childNodes:获取当前容器中所有的子节点（包含各种类型的节点）
let box=document.querySelector(".box");
console.log(box.childNodes);//NodeList(7) [text, comment, text, h2.title, text, ul, text]
//获取的是一个节点集合，包含容器中的所有类型的节点（空格换行是文本节点）
2.[container].children:获取当前容器中所有的元素子节点（只有元素标签的，在IE低版本浏览器中，也会把我们呢的注释当做元素节点）
let box=document.querySelector(".box");
console.log(box.children);//HTMLCollection(2) [h2.title, ul]
//后去的是一个元素集合，只有元素节点
3.[node].parentNode:获取某一个节点的父节点
let box=document.querySelector(".box");
console.log(box.parentNode);//<body>...</body>
4.[node].previousSibling:获取某一个节点的上一个哥哥节点
let li2=document.querySelector("#li2");
console.log(li2.previousSibling);//#text
//因为li标签上一个标签之间有个空格所以是一个文本节点
5.[node].previousElementSibling:获取某一个节点的上一个哥哥元素节点（不兼容IE低版本）
let li2=document.querySelector("#li2");
console.log(li2.previousElementSibling);
// <li>正式课程讲的内容</li> 是上一个元素
6.[node].nextSibling:获取某一个节点的下一个弟弟节点
let li2=document.querySelector("#li2");
console.log(li2.nextSibling);//#text
//因为li标签下一个标签之间有个空格所以是一个文本节点
7.[node].nextElementSibling:获取某一个节点的下一个弟弟元素节点（不兼容IE低版本）
let li2=document.querySelector("#li2");
console.log(li2.nextElementSibling);
// <li>正式课第二周程讲的内容</li> 下一个标签元素
8.[container].firstChild:获取容器中的第一个子节点
let box=document.querySelector(".box");
console.log(box.firstChild);// #text
9.[container].firstElementChild:获取容器中第一个元素子节点（不兼容IE低版本）
let box=document.querySelector(".box");
console.log(box.firstElementChild);
// <h2 class="title">新闻大纲</h2>
10.[container].lastChild:获取容器中的最后一个子节点
let box=document.querySelector(".box");
console.log(box.lastChild);//#text
11.[container].lastElementChild:获取容器中最后一个元素子节点（不兼容IE低版本）
let box=document.querySelector(".box");
console.log(box.lastElementChild);//<ul>...</ul>
- document文档节点
在控制台输入document回车可查看，返回的html一对标签包含head、body两对标签
3.让所有浏览器都兼容的方法
function children(container) {
// 获取所有的子节点，遍历这些节点，所有NODETYPE===1的就是我们想要的元素子节点
var nodeList = container.childNodes,
result = [];
for (var i = 0; i < nodeList.length; i++) {
var itemNode = nodeList[i];
if (itemNode.nodeType === 1) {
// 元素节点
result.push(itemNode);
}
}
return result;
}
var arr = children(box);
console.log(arr);
