第11章 DOM 扩展

第11章 DOM 扩展

11.1 选择符的API

11.1.1 querySelector()方法

11.1.2 quertSelectorAll()方法

11.1.3 matchesSelector()方法

11.2 元素遍历

11.3 HTML5

11.3.1 与类相关的扩充

11.3.2 焦点管理

11.3.3 HTMLDocument 的变化

11.3.4 字符集属性

11.3.5 自定义数据属性

11.3.6 插入标记

11.3.7 scrollntoView()方法

11.4. 专有扩展

11.4.1 文档模式

11.4.2 children属性

11.4.3 contains()方法

11.4.4 插入文本

11.4.5 滚动

11.5 小结

章节内容详解

本章介绍的都是HTML5的API,低版本浏览器不兼容!

11.1.1 querySelector()方法

querySelector()方法接收一个CSS选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null

11.1.2 querySelectorAll()方法

querySelectorAll()方法接收的参数与querySelector()方法一样,返回的是所有元素,是一个NodeList的实例

11.3.1 与类相关的扩充

getElementsByClassName()方法
getElementsByClassName()方法接收一个参数,即一个包含一个或多个类名的字符串,返回带有指定类的所有元素的NodeList。传入多个类名时,类名的先后顺序不重要。

classList属性
可以对className属性进行添加、删除和替换类名,因为className中是一个字符串,所有操作的时候也需要用split切一下,然后再拼接成字符串

add(value):添加class,如果值已经存在,就不添加了
contains(value): 判断是否存在给定的值,如果存在则返回true,否则返回false
remove(value):从列表中删除给定的字符串
toggle(value):如果列表中已经存在给定的值,删除它,如果列表中没有给定的值,添加它

//删除disabled类
div.classList.remove("disabled");

//添加current类
div.classList.add("current");

//切换user类
div.classList.toggle("user");

11.3.5 自定义数据属性

dataset

获取myname自定义属性的值
var oDiv = document.getElementById("myDiv");
var myName = oDiv.dataset.myname;

//设置值
oDiv.dataset.myname = "Michael";

猜你喜欢

转载自www.cnblogs.com/jiaoshou/p/12380025.html
今日推荐