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