HTML5新增API之DOM 扩展Node指一个有效的DOM节点，是一个通称。通过Node.dataset['info

获取元素

1、document.getElementsByClassName ('class') 通过类名获取元素，以伪数组形式存在。
2、document.querySelector('selector') 通过CSS选择器获取元素，符合匹配条件的第1个元素。
3、document.querySelectorAll('selector') 通过CSS选择器获取元素，以伪数组形式存在。

类名操作

1、Node.classList.add('class') 添加class
2、Node.classList.remove('class') 移除class
3、Node.classList.toggle('class') 切换class，有则移除，无则添加
4、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');

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

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

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

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