1114面試題做用域

面試題做用域

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