一猖吴、attribute 與 property
1. 什么是 attribute？什么是 property？
html標簽的預(yù)定義屬性和自定義樹頂統(tǒng)稱為 attribute胶哲；js 原生對象的直接屬性是 property
2. 什么是布爾值屬性昧诱？什么是非布爾值屬性
對象的 property 是（非）布爾值類型的晓淀，稱為（非）布爾值屬性
3. attribute 與 property 的同步關(guān)系
非布爾值屬性：實時同步
布爾值屬性：
???? ① property 永遠都不會同步 attribute；
???? ② 在沒動過 property 的情況下盏档，attribute 會同步 property凶掰，一旦動過 property，attribute 就不會同步 property
4. 用戶與瀏覽器
用戶操作的是 property，瀏覽器識別的是 property
<!--
attribute：屬性節(jié)點
html預(yù)定義屬性 checked
html自定義屬性 dudu
property：js原生對象的直接屬性
每一個預(yù)定義的attribute都會有一個property與之對應(yīng)
-->
<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來設(shè)置多選框是否選中
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 優(yōu)勢
- 跨平臺：唯一一個通吃PC MAC IPhone Android 等主流平臺的跨平臺語言
- 快速迭代，降低成本
- 導(dǎo)流入口多（吸引流量）午衰，分發(fā)效率高
