HTML5新增API之DOM 扩展

获取元素

一、document.getElementsByClassName ('class') 经过类名获取元素，以伪数组形式存在。
二、document.querySelector('selector') 经过CSS选择器获取元素，符合匹配条件的第1个元素。
三、document.querySelectorAll('selector') 经过CSS选择器获取元素，以伪数组形式存在。复制代码

类名操做

一、Node.classList.add('class') 添加class
二、Node.classList.remove('class') 移除class
三、Node.classList.toggle('class') 切换class，有则移除，无则添加
四、Node.classList.contains('class') 检测是否存在class复制代码

Node指一个有效的DOM节点，是一个通称。

自定义属性

在HTML5中咱们能够自定义属性，其格式以下data-*=""，例如

data-info="我是自定义属性"复制代码

经过Node.dataset['info'] 咱们即可以获取到自定义的属性值。

Node.dataset是以对象形式存在的，当咱们为同一个DOM节点指定了多个自定义属性时，Node.dataset则存储了全部的自定义属性的值。

假设某元素 <div id="demo" data-name="itcast" data-age="10">

var demo = document.querySelector('#demo');

一、读取 demo.dataset['name'] 或者 demo.dataset['age']

二、设置demo.dataset['name'] = 'web developer'

注：当咱们以下格式设置时，则须要以驼峰格式才能正确获取

<div data-my-name="itcast"> 这样获取Node.dataset['myName']