操作元素属性：操作元素自带（原生）属性、操作自定义属性
1、操作元素自带属性
（1）元素自带属性比如说：input标签的type和value等属性，自己本身就有的属性
（2）操作原生属性：拿input标签举例
① username.type = “password”：
<body>
<input type="text" value="hello" id="username">
<script>
username.type = "password"
</script>
</body>看上面代码给input增加id选择器，然后用id选择器来获取和操作自己本身自带的属性type：username.type = “password” ；
② rember.checked = false：
<body>
<input type="checkbox" checked id="rember">
<script>
console.log(rember.checked)
</script>
</body>结果：
console.log(rember.checked)的结果是true，也就是选中了为true，选不中为false
解释说明：type = "checkbox"是选框，加上checked属性就是选中的意思，看结果，我们现在获取这个属性，来改变选框的选中状态，改为没勾选状态，代码如下：
<body>
<input type="checkbox" checked id="rember">
<script>
console.log(rember.checked)
rember.checked = false
</script>
</body>结果：
2、操作元素自定义属性
给元素自定义属性的运用场景，比如说：很多li标签，我们想给li标签排个序号什么的方便操作，那就需要给li标签加上我们自定义的属性了，比如说像这样的：“index = 1”，“index = 2”；
● 有两种方式可以操作元素自定义属性：
○ 第一种：setAttribute、getAttribute、removeAttribute
○ 第二种：H5约定的“data-***”写法，属性：dataset
(1) 第一种：setAttribute、getAttribute、removeAttribute
● 给div标签增加自定义属性（setAttribute：增加自定义属性）
<body>
<div id="box"></div>
<script>
box.setAttribute("name","111")
console.log(box)
</script>
</body>结果：
解释说明：
给标签增加自定义属性：给div增加一个id选择器，然后用box.setAttribute("key","value")创建自定义属性；
● 获取自定义属性：getAttribute
console.log(box.getAttribute("name"))● 删除自定义属性：removeAttribute
box.removeAttribute("name")注意：获取和删除等属性的代码是在上面的基础上操作的，但看这一句没意义。。
(2) 第二种：H5约定的“data-***”写法，属性：dataset
HTML5新规定了自定义属性的写法，自定义属性都要在前面加上一个“data-”这样才能更好的区分，元素标签哪些属性是自带的，哪些属性是自定义的，上面那个方法它自定义的，属性名我们随便写但是会让人分不清楚到底哪些是自定义的，所以在H5中自定义属性的写法有了规定，如下：
● 增加自定义属性：（标签选择器名.dataset.属性名 = 属性值）
<body>
<div id="box"></div>
<script>
box.dataset.name = "momo"
console.log(box)
</script>
</body>结果：
解释说明：增加自定义属性：box.dataset.name = “momo”，格式：标签选择器名.dataset.属性名 = 属性值，观察结果name属性，前面增加了“data-”符号，这样就可以区分哪些属性是自定义的了。
● 获取自定义属性：（.dataset）
console.log(box.dataset)结果：
解释说明：结果是对象，当你用“.dataset”获取自定义属性时，是获取加在这个标签身上的所有自定义属性，用对象的方式呈现，，
● 删除自定义属性：（delete 标签选择器名.dataset.属性名）
delete box.dataset.name
1334
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
