5. JS 基础 API

5.1. 新选择器

• JavaScript在HTML5中多了一套原生选择器API
• 其功能类似jQuery选择器
• 写法上类似原本的document.getElementById(‘xxx’)

var element1 = document.getElementById('section1'); √ 已经get
var elements2 = document.getElementsByTagName('div'); √ 已经get
var elements3 = document.getElementsByClassName('section');

• 除了这种简单的类名选择器，H5中新增了很多更高级的API：

document.querySelectorAll('ul');
document.querySelectorAll('.container');
document.querySelector('div#container > .inner');

5.2. Element.classList

• H5中DOM对象多了一个classList属性
• 该属性其实就是是一个数组
• 这个数组中的内容就是当前DOM元素的每一个类
• 具体的操作如下：

5.3. 自定义属性 DATA-* !

• 在HTML5中，如果想要给元素添加一些自定义属性
• 可以DOM对象添加一些data-xxx的属性
• HTML5中**data-**是自定义属性的前缀
• 一般用来记录与当前DOM强相关的数据

<ul id="users">
  <li data-id="1" data-age="18" data-gender="true">张三</li>
</ul>

• 如果需要用JS的方式操作自定义属性，可以通过getAttribute()/setAttribute()方式
• 当然HTML5在JavaScript中提供了一个新的 API：dataset，
• 用于操作元素的自定义属性

var liElement = document.querySelector('#users > li');

// 添加一个自定义属性
liElement.dataset['name'] = '张三';

// 获取liElement中所有的自定义属性
console.log(liElement.dataset);
// output: {id: 1, age: 18, gender: true, name: '张三'}