1. dom>documentElement>body>tagname
2.我們常用的節點標簽。
元素節點（標簽）
文本節點
屬性節點（標簽里的屬性）
3.document有個屬性nodeType返回的是數字
1.代表元素節點 2.代表屬性節點 3.代表文本節點
4.節點的獲取
元素節點獲取有很多方法
Document.getElementById()
Document.getElementsByClassName()
Document.getElementsByTagName()
Document.querySelector()
Document.querySelectorAll()
屬性節點的獲取
元素.attributes 獲取元素身上所有屬性構成的集合
元素.setAttribute（“屬性名”，“屬性值”）給元素設置屬性和屬性值
元素.getAttribute（“屬性名”）獲取屬性值的方法
元素.removerAttribute("屬性")刪除屬性
文本節點
沒有獲取的方法，沒有意思
5.獲取元素的子節點
元素.childNodes 這個屬性有兼容性 標准瀏覽器會獲取文本節點
而低版本瀏覽器不會。所以建議使用 children這個屬性
獲取單個子節點
獲取第一個子節點
標准下 元素.firstElementChild
非標准下 元素.firstChild
兼容寫法
var list=document.getElementById("list")
var fist=listElementChild||list.fistChild
console.log(fist)
獲取最后一個子節點
元素.lastElementChild 元素.lastChild
獲取是一個兄弟節點
元素.previousSibling 元素.prevElementSibling
獲取下一個兄弟節點
元素.nextSibling 元素.nextElementSibling
6.獲取父節點
元素.parentNode 沒有兼容性
元素.parentNode.parentNode
區分 offsetparent和parentNode
DOM2創建節點
1.生成節點的方法 document。createElement（“div”）
2.插入節點的方法 父節點.appendChild(新節點)
在父節點子節點的后面插入新的節點
3.在指定位置插入新的節點
（1）父元素.insetBefore(新節點，誰的前面) 將新節點插入指定元素前面
4. 刪除元素節點 父元素.removerChild（）
案例分析
防留言板
兼容性
元素沒有子節點，ie低版本讀取不到，而標准瀏覽器會
因為標准瀏覽器會把文本節點當作子節點，而ie6-8不會
超鏈接a的屬性href 分析
<a href="">點擊會刷新頁面，相當於向后台發送一個請求。
<a href="#s">錨點跳轉，跳轉到某一個id叫s的位置上
<a href="javascript">取消刷新頁面的功能
拓展
字符串拼接和DOM創建都是渲染方式
字符串拼接
優點：簡單，層次感強，可以處理大量數據
缺點：字符串拼接會影響到原有子元素事件
DOM創建
優點：每個都是獨立的，不會影響原子元素事件
缺點：處理大量數據會比較麻煩，會造成DOM回流·
什么是DOM回流？
頁面渲染時，我們對HTML結構簡單的增刪查改時，瀏覽器會對所有的dom進行重新排序，這就i是DOM回流，嚴重影響瀏覽器性能
補充：
提升頁面性能優化
1.多采用雪碧圖
2.防止超鏈接默認行為
3.減少DOM回流
4.減少向服務器發送請求次數
作者：晉飛翔
手機號(微信同步)：17812718961
希望本篇文章 能給正在學習 前端的朋友 或 以及工作的朋友 帶來收獲 不喜勿噴 如有建議 多多提議 謝謝！！！