開局兩張圖，熟悉一下節點的概念。
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*/