學習筆記13--DOM擴充套件
Selector API
querySelector()
接受一個css選擇符,返回第一個匹配的元素
// 在整個文件範圍查詢
var divEl = document.querySelector("div");
// 在某個元素後代範圍內查詢
divEl.querySelector("div");
querySelectorAll()
接受一個css選擇符,返回第一個NodeList例項(靜態,非實時)
var list = document.querySelectorAll("div");
matchesSelector()
接受一個css選擇符,如果呼叫元素與該css選擇符匹配,返回true,否則返回false
元素遍歷
childElementCount()
返回子元素的個數(不包括文字節點和註釋)
firstElementChild()
指向第一個子元素(ELement型別)
lastElementChild()
指向最後一個子元素(ELement型別)
previousElementSibling()
指向前一個同胞元素(ELement型別)
nextElementSibling()
指向後一個同胞元素(ELement型別)
/**
<ul id ="myList">
<li>1</li>
<li>2</li>
</ul>
*/
var list = document.querySelector("#myList");
console.log(list.childNodes.length);//5
console.log(list.childElementCount);//2
HTML5
HTML5新增了很多API
與類相關
1.
document.getElementsByClassNameName();
2.
classList
屬性
HTML5新增了操作類名的方式。為所有的元素新增classList屬性。
classList是DOMTockenList的例項
add(value)
將給定的值新增到列表中,如果值已存在,就不新增。
contains()
remove()
從列表中刪除指定的值
toggle()
如果列表中存在,刪除它,否則,新增它
焦點管理
activeElement
屬性,改屬性始終引用DOM樹中的獲得焦點的元素。元素獲得焦點的方式有頁面載入,使用者輸入,在程式碼中呼叫focus()
document.hasFocus()
確定文件是否獲得焦點
HTMLDocument的變化
1.document.readyState
該屬性有兩個可能的值,
loading
正在載入文件
complete
文件載入完成
2.document.compatMode
屬性,表示瀏覽器渲染頁面的模式
標準模式值為”CSS1Compat”
混雜模式值為”backCompat”
3.head屬性
4.字符集屬性 document.charset文件實際使用的字符集 document.defaultCharset瀏覽器預設字符集
5.自定義屬性
data-
dataset
屬性的值是一個DOMStringMap的一個例項。包含鍵值對。在對映中,data-name形式自定義屬性有對應的屬性。
//<div class="mod-relation" data-version="1.0.0"></div>
//訪問自定義屬性
document.querySelector(".mod-relation").dataset.version;//1.0.0
//修改自定義屬性
document.querySelector(".mod-relation").dataset.version = 5;