h5新增小功能

class的操作

在之前我们不使用第三方类库操作class是这样的

代码语言：javascript复制

test.Node.className='active'

上面代码对于一个class还好如果有多个呢? 我们还得自己编写追加类名的逻辑，或者引入第三方类库如jquery

其实不用那么麻烦 这里h5为我们提供了一个新功能 classList

代码语言：javascript复制

testNode.classList.add('active') //在原来的类名基础上添加类名active
testNode.classList.remove('active') //移除active
testNode.classList.toggle('active') //存在active则删除 不存在则添加

自定义属性操作

我们一般在html标签键入一些自定义属性 方便操作

代码语言：javascript复制

<div flag="1"></div>

由于自定义属性没有property与之对应，我们不能直接操作

代码语言：javascript复制

//错误的操作
div.flag=0

正确的操作

代码语言：javascript复制

div.setAttribute('flag','0')

h5为我们提供了更加便利的方式

代码语言：javascript复制

//在原来的自定义属性添加前缀 `data-`
<div data-flag="1"></div>

直接操作dataset

代码语言：javascript复制

div.dataset.flag=0

可编辑属性

在之前非表单元素是无法编辑的 而h5为我们提供了 contenteditable="true"使得元素可以被编辑

代码语言：javascript复制

<div contenteditable="true">123</div>

html5 面向对象编程

0 人点赞