JavaScript基础学习-DOM操作(HTML5新特性)

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 属性，指向文档的元素