html5支持dom,HTML5之新增Dom语法

在jQuery中我们可以通过选择器快速获取元素,这些新的选择器,在html5中提供了一个类似的方法

querySelector方法

返回当前文档中第一个匹配特定选择器的元素

示例代码：

var node = document.querySelector(css选择器);

querySelectorAll

返回当前文档中所有匹配特定选择器的元素(返回值是数组)

示例代码：

var nodeLists = document.querySelectorAll(css选择器);

classList

这个元素返回的是dom元素的class 列表,这个属性本身是只读的，但是我们可以通过几个方法去操作元素的class

可用方法：

add ： 添加一个 class 到元素的 class 列表中

remove ： 从元素的 class 列表中移除一个 class

toggle ： 切换一个 class 是否存在于一个元素的 class 列表中

contains ： 查询一个指定的 class 是否存在于元素的 class 列表中

示例代码：

html5新增dom操作语法

.top{

width: 100%;

height: 100px;

background-color: red;

}

.pink{

border: 10px solid pink;

}

function changeColor() {

// 选择器的方式

// 获取元素

var dom = document.querySelector("header");

// 测试classList属性的方法

// 添加class

dom.classList.add("top");

// 移除class

dom.classList.remove('pink');

// 判断是否含有class

alert(dom.classList.contains('orange'));

// 如果有class 删除 如果没有class 添加

dom.classList.toggle('pink');

}

H5_data*属性

data-*这个属性解决了自定义Html标签内属性取值的问题,只要我们想,可以往HTML标签中添加任意个数的属性

语法:

data-:这个是固定格式

data-xxx:xxx是自定义的值

注意:

属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符

属性值可以是任意字符串

不要使用纯数字,特殊字符等作为自定义值

如果data之后使用-连接多个值,取值时,需要使用驼峰命名

示例代码:

• Owl
• Salmon
• Tarantula

获取方式:

// 假定有这么一个元素

Owl蜘蛛

var domObj = document.getElementById("liObj");

var type = domObj.dataset["type"]

var domObj2 = document.getElementById("liObj2");

var type2 = domObj.dataset["animalType"]

总结:

属性名为:data-xxx

xxx为自定义值,不能使用大写字母(不建议使用纯数字,或者奇怪字符)

获取方式:

在js中获取了元素之后,通过dataset["key"]即可获取保存的值

其中key为data-xxx中 xxx的字母