一、attribute 与 property
1. 什么是 attribute？什么是 property？
html标签的预定义属性和自定义树顶统称为 attribute；js 原生对象的直接属性是 property
2. 什么是布尔值属性？什么是非布尔值属性
对象的 property 是（非）布尔值类型的，称为（非）布尔值属性
3. attribute 与 property 的同步关系
非布尔值属性：实时同步
布尔值属性：
① property 永远都不会同步 attribute；
② 在没动过 property 的情况下，attribute 会同步 property，一旦动过 property，attribute 就不会同步 property
4. 用户与浏览器
用户操作的是 property，浏览器识别的是 property
<!--
attribute：属性节点
html预定义属性 checked
html自定义属性 dudu
property：js原生对象的直接属性
每一个预定义的attribute都会有一个property与之对应
-->
<input type="checkbox" checked="checked" dudu='dudu' name="dudu">多选框
<script>
var dudu = document.querySelector("input[type=checkbox]");
// 改变布尔值属性
dudu.setAttribute('checked', 'checkedA');
dudu.checked = 'checkedP';
dudu.setAttribute('checked', 'checkedAA');
// 改变非布尔值属性
// dudu.setAttribute('name', 'duduA');
// dudu.name = 'duduP';
// dudu.setAttribute('name', 'duduAA');
</script>
<hr>
<input type="checkbox" name="test">多选框
<input type="button" value="点我一下">
<script>
var checkbox = document.querySelector("input[name=test]");
var btn = document.querySelector("input[type=button]");
// 浏览器靠property来设置多选框是否选中
btn.onclick = function () {
checkbox.checked = true;
}
// 用户操作的是property的值
checkbox.onclick = function () {
console.log(checkbox.checked);
console.log(checkbox.attributes.checked.nodeValue); // 会报错，checkbox.attributes.checked为undefined
}
</script>
二、一些功能
1. 类的处理
<input type="checkbox" checked="checked" class="d1 d2 d3 d4">多选框
<script>
var input = document.querySelector("input[type=checkbox]");
console.log(input.className);// d1 d2 d3 d4 字符串类型，处理不方便
console.log(input.classList);// DOMTokenList(4) ["d1", "d2", "d3", "d4", value: "d1 d2 d3 d4"]
// 添加类
input.classList.add('d5');
// 删除类
input.classList.remove('d2');
// 切换类
input.classList.toggle('d1');
</script>
2. 自定义属性集合
<div id="test" dudu="dudu" data-fei="fei"></div>
<script>
var div = document.querySelector("#test");
// 本来情况
div.setAttribute("dudu", "dudu1");
// 自定义属性集合
console.log(div.dataset);// DOMStringMap {fei: "fei"}
div.dataset.fei = 111;
</script>
3. 可编辑
<!-- 可编辑的div -->
<div id="test" style="width: 100px; height: 100px; background-color: pink;" contenteditable="true">
大河之剑天上来！
</div>
三、Html5 优势
- 跨平台：唯一一个通吃PC MAC IPhone Android 等主流平台的跨平台语言
- 快速迭代，降低成本
- 导流入口多（吸引流量），分发效率高
