h5 api

api

1.element.outerHTML

返回内容包含描述元素（element）及其后代的 html 代码片段

var div = document.createElement('div');
div.className = 'box box1'
console.log(div.outerHTML);//<div class="box box1"></div>

2.element.classList的方法

只读属性。返回一个元素类属性的DOMTokenList集合。

**DOMTokenList** 接口表示一组空格分隔的标记（tokens）。有length属性，表述存储的个数

1.add ( String )

添加类

var div = document.createElement('div');
div.className = 'box box1';

console.log(div.outerHTML);//<div class="box box1"></div>

//添加一个类
div.classList.add('box2')
console.log(div.outerHTML)//<div class="box box1 box2"></div>

//添加多个类
div.classList.add('box3','box4')
console.log(div.outerHTML)//<div class="box box1 box2 box3 box4"></div>

2.remove ( String )

移除类

//移除一个类
div.classList.remove('box2')
console.log(div.outerHTML)//<div class="box box1 box3 box4"></div>

//移除多个类
div.classList.remove('box3','box4')
console.log(div.outerHTML)//<div class="box box1"></div>

3.item ( Number )

返回指定序列的类

//返回指定序列的类
console.log(div.classList)//DOMTokenList [ "box", "box1" ]
console.log(div.classList.length)//2
console.log(div.classList.item(0))//box
console.log(div.classList.item(1))//box1

4.toggle ( String )

切换某个类。不存在添加，存在删除

//toggle
div.classList.toggle('box333')
console.log(div.outerHTML)//<div class="box box1 box333"></div>
div.classList.toggle('box333')
console.log(div.outerHTML)//<div class="box box1"></div>
div.classList.toggle('box333')
console.log(div.outerHTML)//<div class="box box1 box333"></div>
div.classList.toggle('box333')
console.log(div.outerHTML)//<div class="box box1"></div>

5. contains ( String )

判断是否包含某个类.返回布尔值

//contains
console.log(div.classList.contains('box'))//true
console.log(div.classList.contains('box444'))//false

6.replace ( oldClass,newClass )

替换某个类

//replace
var cls = ['box','bar'];
//替换前
console.log(div.outerHTML)//<div class="box box1"></div>
//用类名bar替换box
div.classList.replace(...cls);
console.log(div.outerHTML)//<div class="bar box1"></div>

更多 h5 api 查看