原生前端之DOM属性操作

Javascript与HTML交互最主要的是使用DOM进行控制HTML的文档信息。对于具有全标签结构的HTML元素可以分为属性和文本两部分，下面我们将对属性这一部分进行详细的讲解。话先不多说先举个栗子压压惊。

这个程序的主要思想是使用DOM提供的函数针对HTML元素的属性进行控制。

id为checkbox的标签是一个复选框。

id为info的标签将显示复选框这个元素的属性名称和属性值。

下方有7个按钮，通过点击按钮进行不同的操作：

显示自定义属性按钮用于显示用户自定义的属性的属性名称和属性值

显示checked的属性值按钮用于显示复选框元素的checked属性的属性值

判断是否有checked的属性值用于显示复选框元素是否具有checked这个属性

删除checked的属性值按钮用于删除复选框元素的checked属性值

删除test的属性值按钮用于删除复选框用户自定义的test属性。

设置checked的属性值按钮用于设置复选框的checked属性的属性值为checked

设置用户自定义的属性值按钮用于设置复选框的用户自定义属性haha的值为hahahahh

整体的效果图如下

 上述的操作使用针对元素属性的6个属性/方法

（1）attributes是元素的属性返回元素具有的属性和属性值，注意这个返回值并不是数组

（2）dataset是元素的属性返回元素中用户自定义的属性和属性值

（3）getAttribute()是元素的方法用于获取指定属性的属性值,参数为属性名

（4）hasAttribute()是元素的方法用于获取元素中是否存在此属性，参数为属性名

（5）removeAttribute()是元素的方法用于删除指定元素的属性，参数为属性名

（6）setAttribute()是元素的方法用于设置元素的属性的属性值，参数为属性名和属性值。