面試題作用域

+function(){

　　　　console.log(a)

　　　　var a=5;

　　　　function a(){}

　　　　console.log(a)

　　　　function b(){}

　　　　b=6

　　　　console.log(b)

　　　　var c=d=b

　　}()

　　　console.log(d)

　　　console.log(c)

畫圖分析

1. DOM document object model

(1) 節點樹狀圖

Document>documentElement>body>tagname

2. 我們常用的節點型別

元素節點(標籤)

文字節點（文字節點）

屬性節點(標籤裡的屬性)

1. document有個屬性叫nodeType 返回的是數字

1代表元素節點  2代表屬性節點  3代表文字節點

2. 節點的獲取

元素節點獲取有很多方法

Document.getElementById()

Document.getElementsByClassName()

Document.getElementsByTagName()

Document.querySelector()

Document.querySelectorAll()

屬性節點的獲取

元素.attributes 獲取元素身上所有屬性構成的集合（陣列）

得到裡面的值 元素.attributes[1].value

元素.getAttribute(“屬性名”) 獲取屬性值的方法

元素.setAttribute(“屬性名”,”屬性值”)  給元素設定屬性和屬性值

元素.removeAttribute(“屬性”)  刪除屬性

文字節點

沒有獲取的方法，沒有意思

5.獲取元素的子節點

元素.childNodes  這個屬性有相容性 標準瀏覽器會獲取到文字節點

而低版本瀏覽器不會。所以建議使用children這個屬性。

獲取單個子節點

獲取第一個孩子

標準下 元素.firstElementChild

非標準下 元素.firstChild

相容下寫法

var list=document.getElementById("list")

var fist=list.firstElementChild||list.firstChild

console.log(fist)

獲取最後一個子節點

元素.lastElementChild     元素.lastchild

獲取上一個兄弟節點

元素.previousSibling

元素.previousElementSibling

獲取下一個兄弟節點

元素.nextSibling

元素.nextElementSiblin

6.獲取父節點

元素.parentNode  沒有相容性

元素.parentNode.parentNode

區分offsetParent和parentNode的區別

DOM2 動態建立節點

1. 生成節點的方法  document.createElement(“div”)

2.插入節點的方法   父元素.appendChild(新節點)

在父節點中的子節點後面插入新的節點

3.在指定的位置插入新的節點

(1) 父元素.insertBefore(新節點,誰的前面)  將新節點插入指定的元素前面

4,刪除元素節點  父元素.removeChild()

案例分析

　　仿留言板

相容性 。

元素沒有子節點，ie低版本會讀取不到，而標準瀏覽器會。

因為標準瀏覽器會把文字節點當作子節點，而ie6-8不會。

超連結a的屬性href分析

<a href=””> 點選會重新整理頁面，相當於向後臺傳送一次請求。

<a href=”#s”> 錨點跳轉 跳轉到某一個id叫s的位置上

<a href=”javascript:;”> 取消重新整理頁面的功能

拓展

字串拼接和Dom建立都是渲染的方式

字串拼接

優點 簡單，層次感強，可以處理大量資料

缺點：字串拼接會影響到原有子元素的事件

Dom建立

優點:是一個獨立的個體，不會影響到原有的元素

缺點:處理資料量過大會比較麻煩,會造成DOM迴流。

Dom迴流

頁面渲染時，我們對html結構簡單的增刪查改時，瀏覽器會對所有的dom進行重新排列，這就是Dom迴流，嚴重影響瀏覽器的效能。

補充

提升頁面效能優化

1. 多采用雪碧圖

2. 阻止超連結的預設行為

3. 減少Dom迴流

4. 減少向伺服器請求的次數