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 属性,指向文档的元素
所有博客均为自己学习的笔记。如有错误敬请理解。