1. DOM擴展

1.1 選擇符API

l querySelector()

接收一個css選擇符，返回與該模式匹配的第一個元素

l querySelectorAll()

接收一個css選擇符，返回所有匹配的NodeList元素

1.2 HTML5

1.2.1 與類相關的擴充

l getElementsByClassName()

接收一個參數，一個包含一或者多個類名的字符串，返回帶有指定類的所有元素的NodeList

l classList屬性，add(value),contains(value),remove(value),toggle(value)

classList獲取元素的所有類屬性，并通過對應的方法操作對應的類

1.2.2 焦點管理

document.activeElement屬性指向當前文檔中獲得焦點的元素

document.hasFocus()判斷當前文檔是否獲取了焦點

1.2.3 HTMLDocument變化

l readyState屬性：

loading:正在加載文檔

complete:已經加載完文檔

l 兼容模式

標準模式：document.compatMode == “CSS1Compat”

混雜模式：document.compatMode == “BackCompat”

l head屬性

var head = document.head || document.getElementsByTagName(“head”)[0];

1.2.4 字符集屬性

document.charset 表示當前文檔中使用的字符集

1.2.5 自定義屬性

HTML5可以為元素添加非標準屬性，但要添加前綴data-

?

獲取設置appId自定義屬性

var appId = div.dataset.appId;

div.dataset.appId = 23456;

?

?

1.2.6 插入標記

l innerHtml：返回當前元素所有子節點對應的HTML標記

l outerHtml：返回當前元素以及對應的所有子元素的HTML標記

1.2.7 scrollIntoView

scrollIntoView()可以在所有的html元素上調用，通過滾動瀏覽器窗口或者每個容器元素，調用元素就可以出現在視口中。

轉載于:https://www.cnblogs.com/SLchuck/p/4490976.html

總結

以上是生活随笔為你收集整理的11. javacript高级程序设计-DOM扩展的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。