js節點的類型

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.減小向服務器發送請求次數　　

 

 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　發表人：晉飛翔

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 QQ：318080891