开局两张图，熟悉一下节点的概念。
DOM查询
在DOM基础笔记（1）中已经介绍了DOM的查询的三个方法：
1.getElementById() 通过id属性获取一个元素节点对象
2.getElementsByTagName() 通过标签名获取一组元素节点对象
3.getElementsByName() 通过name属性获取一组元素节点对象
但以上的方法只能获取当响应处的节点，如果是个多层关系的结构，想要深入的获取其子节点或者父节点对象该如何操作？
所以DOM里面也有元素节点的子节点和父节点的方法。
获取元素节点子节点
获取元素节点子节点的方法(可以通过具体的元素节点调用)：
1.getElementsByTagName() 返回当前节点的指定标签名后代节点
2.childNodes 表示当前节点的所有子节点。注意标签之间的空白也会被当成文本节点。而children属性可获取当前元素的所有子元素节点，这就很好的避免了标签之间的空白也会被当成文本节点的问题
3.firstchild 返回当前节点的第一个子节点 标签之间的空白也会被当成文本节点
firstElementChild获取当前对象第一个子元素，但是不支持ie8以下的浏览器
4. lastchild 返回当前节点的最后一个子节点 标签之间的空白也会被当成文本节点
lastElementChild获取当前对象最后一个子元素，也不支持ie8以下的浏览器
<script>
// 获取元素节点的子节点
// 可以通过具体的元素节点调用
window.onload = function(){
// 1.getElementsByTagName() 返回当前节点的指定标签名后代节点
var sport = document.getElementById("sport");
var li = sport.getElementsByTagName("li");
// 不可通过id来获取子节点
console.log(li[0]);//结果<li>篮球</li>
console.log(li[0].innerText);//结果为篮球
//2.childNodes 表示当前节点的所有子节点
var son = sport.childNodes;
console.log(son);
//结果：[text, li, text, li, text, li, text, li, text, h1, text]
// 但是html代码里面只有5个子节点
// 当我们这样写html时<ul id="sport"><li>篮球</li><li>足球</li><li>羽毛球</li><li>网球</li><h1>游泳</h1></ul>
// 会发现结果是5个子节点数目正确
// 所有这说明了标签之间的空白也会被当成文本节点
// children属性可获取当前元素的所有子元素节点
var son2 = sport.children;
console.log(son2);//结果五个元素节点，数目正确
// firstchild 返回当前节点的第一个子节点 标签之间的空白也会被当成文本节点
// lastchild 返回当前节点的最后一个子节点 标签之间的空白也会被当成文本节点
var son3 = sport.firstChild;
console.log(son3);//结果为空白
//firstElementChild获取当前对象第一个子元素，但是不支持ie8以下的浏览器
//lastElementChild获取当前对象最后一个子元素，也不支持ie8以下的浏览器
var son4 = sport.firstElementChild;
console.log(son4);//结果为<li>篮球</li>
}
</script>
<body>
<ul id="sport">
<li>篮球</li>
<li>足球</li>
<li>羽毛球</li>
<li>网球</li>
<h1>游泳</h1>
</ul>
</body>
获取父节点和兄弟节点
- parentNode表示当前节点的父节点
- previousSibling表示当前节点的前一个兄弟节点（标签之间的空白也会被当成文本节点）
previousElementSibling; 获取当前对象的前一个元素节点，不支持ie8以下的浏览器 - nextSibling表示当前节点的后一个兄弟节点（标签之间的空白也会被当成文本节点）
nextElementSibling; 获取当前对象的后一个元素节点，不支持ie8以下的浏览器
<script>
window.onload = function(){
// parentNode表示当前节点的父节点
var football = document.getElementById("football");
console.log(football.parentNode);//结果返回<ul id="sport">...</ul>
// previousSibling表示当前节点的前一个兄弟节点（标签之间的空白也会被当成文本节点）
var pre = football.previousSibling;
console.log(pre);//结果返回为#text空白
var pre = football.previousElementSibling;//获取当前对象的前一个元素节点，不支持ie8以下的浏览器
console.log(pre);//结果返回<li>篮球</li>
}
</script>
</head>
<body>
<p id="id">Hello</p>
<ul id="sport">
<li>篮球</li>
<li id="football">足球</li>
<li>羽毛球</li>
<li>网球</li>
<h1>游泳</h1>
</ul>
</body>
通过css选择器查询
1.getElementsByClassName（）：根据class属性元素来查找节点对象，但兼容性较差，不支持ie8。
2.querySelector()
3.querySelectorAll()
.querySelector()和.querySelectorAll()的作用是可以根据一个css选择器来查询一个元素节点对象 而且兼容性不算太差，ie8及以上可以使用。完美的解决了通过class属性来得到元素对象的问题，同时也解决了上一个兼容性差的问题。
不同点：
.querySelector()只能返回唯一一个元素，如果满足条件的有多个元素，他也只会返回第一个元素。
.querySelectorAll()弥补了.querySelector()只能返回唯一一个元素的缺点，会将符合条件的元素封装到一个数组中返回
<script>
window.onload = function(){
// 根据class属性元素来查找节点对象，但兼容性较差，不支持ie8
var box1 = document.getElementsByClassName("box1");
console.log(box1[0]);
//querySelector() querySelectorAll()
var box2 = document.querySelector(".box1 .box2");//()内，使用css选择器语句
console.log(box2.innerText);//结果返回这是box2
var box1 = document.querySelectorAll(".box1");
console.log(box1[1].innerHTML);//结果返回这是box
}
</script>
<body>
<div class="box1">
<h1>这是box1</h1>
<div class="box2">
<h1>这是box2</h1>
</div>
</div>
<div class="box1">
<h1>这是box</h1>
</div>
</body>
DOM增加
1.document.createElement() 用于创建一个元素节点对象，它需要一个标签名作参数，创建元素节点对象
2.document.createTextNode() 用于创建一个文本节点对象，需要文本内容作为参数。
3.appendChild() 用于向父节点中添加一个新的子节点
4.insertBefore(“新的节点”,“旧的节点”); 用于在指定节点前插入新节点
<script>
window.onload = function (){
// DOM增加
// 用于创建一个li元素节点对象
var li = document.createElement("li");
// document.createTextNode()
// 用于创建一个"python"文本节点对象
var python = document.createTextNode("python");
li.appendChild(python);//将python设置为li子节点
var language = document.getElementById("language");
//将li作为language的子节点
language.appendChild(li);
/*此处的结果是
java
C++
C语言
python*/
var java = document.getElementById("java");
// insertBefore("新的节点","旧的节点");
// 用于在指定节点前插入新节点
language.insertBefore(li,java);
/*此处的结果是
python
java
C++
C语言*/
}
</script>
<body>
<ul id="language">
<li id="java">java</li>
<li>C++</li>
<li id="C">C语言</li>
</ul>
</body>
DOM修改
1.innerHTML获取节点中的html代码， innerText获取节点中的文本节点 ，用"="进行赋值修改
2.replaceChild()用于使该节点用指定的子节点替换已有节点
<script>
window.onload = function (){
//DOM改变
var java = document.getElementById("java");
// innerHTML获取节点中的html代码
// innerText获取节点中的文本节点
// 用"="进行赋值修改
java.innerHTML="<li>java</li>";
java.innerText="javascript";
/*此时的结果为:
javascript
C++
C语言*/
var C = document.getElementById("C");
// replaceChild()用于使该节点用指定的子节点替换已有节点
language.replaceChild(java,C);
/*此时的结果为:
C++
javascript*/
}
</script>
<body>
<ul id="language">
<li id="java">java</li>
<li>C++</li>
<li id="C">C语言</li>
</ul>
</body>
DOM删除
removeChild()用于该节点删除一个子节点
<script>
window.onload = function (){
//DOM删除
// removeChild()用于该节点删除一个子节点
language.removeChild(java);
/*此时的结果为:
C++
C语言t*/
}
</script>
<body>
<ul id="language">
<li id="java">java</li>
<li>C++</li>
<li id="C">C语言</li>
</ul>
</body>
与innerHtml相结合
在上面的增删改查中，我们发现有些操作过于繁琐了，例如DOM的增加，我们需要先创建元素节点对象，后创建文本节点对象，之后再通过document这个接口来获取相应的父元素，再通过appendChild()才能把新的元素节点添加到网页中。既然innerHtml可以改变父节点中的html代码，我们可以通过其来改变html代码来进行添加。当然此文没有涉及到框架的内容，现在市面上很多框架可以简化这些操作。
这里以上面的DOM增加来做例子
language.innerHTML += "<li>php</li>";//在language的节点对象末尾加入<li>php</li>
//此方法等于重写language的元素节点对象
/*显示的结果是
python
java
C++
C语言
php*/
//此方法最优，没有重写元素节点对象
// 用于创建一个li元素节点对象
var li = document.createElement("li");
li.innerHtml="php";
language.appendChild(li);
/*显示的结果是
python
java
C++
C语言
php*/