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

posted on 2022-04-21 10:46  飞飞乐园  阅读(54)  评论(0编辑  收藏  举报