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()

焦點管理

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;