DOM拓展

這是我參與更文挑戰的第1天,活動詳情請查看:更文挑戰

選擇符

選擇符api

利用css匹配規則作的原生js api接口, 提升匹配效率

querySelector()

1. 參數

一個css選擇符

2. 返回

返回第一個匹配CSS選擇符的DOM元素

3. 注意
   1. document下使用則在文檔元素範圍內查找匹配
   2. element下使用則在該element元素後代元素的範圍內查找匹配

querySelectorAll()

幾乎與querySelector()相同 返回一個NodeList對象, 包含全部匹配CSS選擇符的DOM節點, 若無也是返回NodeList對象,不過其爲空

注意

querySelector與querySelectorAll返回的是靜態的NodeList

matchesSelector()

1. 參數

css選擇符

2. 做用

調用該方法的元素若是與css選擇符匹配則返回true, 不然返回false

元素遍歷

childElementCount：

返回子元素（不包括文本節點和註釋）的個數

firstElementChild：

指向第一個子元素； firstChild的元素版

lastElementChild：

指向最後一個子元素； lastChild的元素版

previousElementSibling：

指向前一個同輩元素； previousSibling的元素版

nextElementSibling：

指向後一個同輩元素； nextSibling的元素版。

注意以上都是返回元素節點

html5

getElementByClassName()

1. 參數

一個包含一個或多個類名的字符串

2. 返回

指定的類的全部元素的NodeList

3. 注意
   1. 傳入多個類名時, 類名的前後順序不重要, 返回全部類名符合的元素
   2. 使用這個方法時, 只會匹配調用這個方法的元素的後代元素
   3. 性能問題, 因爲NodeList是動態的, 每次使用都會從新查詢一次以保證NodeList是最新的

outerHTML屬性

返回調用元素和調用元素的全部子節點的引用

insertAdjacentHTML()

1. 參數

   1. 第一個參數必須是下列值之一

      1. "beforebegin" 在當前元素以前插入一個緊鄰的同輩元素
      2. "afterbegin" 在當前元素之下插入一個新的子元素或在第一個子元素以前再插入新的子元素；
      3. "beforeend" 在當前元素之下插入一個新的子元素或在最後一個子元素以後再插入新的子元素
      4. "afterend" 在當前元素以後插入一個緊鄰的同輩元素。

   2. 第二個參數是一個HTML字符串, 若是瀏覽器沒法解析該字符串，就會拋出錯誤

內存與性能問題

在刪除帶有事件處理程序或引用了其餘JavaScript對象子樹時， 就有可能致使內存佔用問題。

假設某個元素有一個事件處理程序（或者引用了一個JavaScript對象做爲屬性）， 在使用前述某個屬性將該元素從文檔樹中刪除後， 元素與事件處理程序（或JavaScript對象）之間的綁定關係在內存中並無一併刪除。 若是這種狀況頻繁出現，頁面佔用的內存數量就會明顯增長。

所以，在使用innerHTML、outerHTML屬性和insertAdjacentHTML()方法時， 最好先手工刪除要被替換的元素的全部事件處理程序和JavaScript對象屬性 (第13章將進一步討論事件處理程序)

不過，使用這幾個屬性——特別是使用innerHTML，仍然仍是能夠爲咱們提供不少便利的。通常來講，在插入大量新HTML標記時，使用innerHTML屬性與經過屢次DOM操做先建立節點再指定它們之間的關係相比，效率要高得多。這是由於在設置innerHTML或outerHTML時，就會建立一個HTML解析器。這個解析器是在瀏覽器級別的代碼（一般是C++編寫的）基礎上運行的，所以比執行JavaScript快得多。不可避免地，建立和銷燬HTML解析器也會帶來性能損失，因此最好可以將設置innerHTML或outerHTML的次數控制在合理的範圍內

雖然inner HTML或outerHTML很方便, 但建立和銷燬時會帶來更高的性能損失, 應該避免頻繁使用