HTML5新增特性

新增類擴充套件

getElementsByClassName方法

getElementsByClassName()：方法接收一個引數，即包含一個或多個類名的字串，返回類名中包含相應類的元素的NodeList。如果提供了多個類名，則順序無關緊要。

// 取得所有類名中包含"username"和"current"元素
// 這兩個類名的順序無關緊要
let allCurrentUsernames = document.getElementsByClassName("username current");
// 取得ID 為"myDiv"的元素子樹中所有包含"selected"類的元素
let selected = document.getElementById("myDiv").getElementsByClassName("selected");
 

classList屬性

通過className 屬性實現新增、刪除和替換。
classList 是一個新的集合型別DOMTokenList 的例項。與其他DOM集合型別一樣，DOMTokenList也有length 屬性表示自己包含多少項，也可以通過item()或中括號取得個別的元素。此外，DOMTokenList 還增加了以下方法。

• add(value)，向類名列表中新增指定的字串值value。如果這個值已經存在，則什麼也不做。
• contains(value)，返回布林值，表示給定的value 是否存在。
• remove(value)，從類名列表中刪除指定的字串值value。
• toggle(value)，如果類名列表中已經存在指定的value，則刪除；如果不存在，則新增。

例：這個

元素有3 個類名。刪除user。 ... HTML5之前的做法： 先把className 拆開，刪除不想要的那個，再把包含剩餘類的字串設定回去。 ``` // 要刪除"user"類 let targetClass = "user"; // 把類名拆成陣列 let classNames = div.className.split(/\s+/); // 找到要刪除類名的索引 let idx = classNames.indexOf(targetClass); // 如果有則刪除 if (idx > -1) { classNames.splice(i,1); } // 重新設定類名 div.className = classNames.join(" "); ``` HTML5中用classList： ``` div.classList.remove("user"); ```

HTMLDocument 擴充套件

readyState 屬性

document.readyState 屬性有兩個可能的值:

• loading，表示文件正在載入；
• complete，表示文件載入完成。

//onload 事件處理程式設定一個標記，表示文件載入完了
if (document.readyState == "complete"){
// 執行操作
}

head 屬性

document.head 屬性，指向文件的元素