HTML5笔记 01：简介

一、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 等主流平台的跨平台语言
快速迭代，降低成本
导流入口多（吸引流量），分发效率高