html

ref - HTML 教程 ref - Web API 教程

dom 元素的 property 和 attribute 的区别

attribute 是html 的预定义和自定义属性（都被一个dom 对象的attributes 的属性维护着） property 是js 对象身上的直接属性

eg: <input type="checkbox" checked="checked" custom="ste">，其中操作的和展示的都是 property 的值。

dom 对象新增了classList

<div id="test" class="c1 c2 c3"></div>

<script type="text/javascript">
const testNode = document.querySelector("#test");
testNode.classList.add("c4");
testNode.classList.remove("c1");
testNode.classList.toggle("c5"); // 如果dom 节点有c5，则删除；如果没有c5，则新增c5
</script>

dataset

<div id="test" data-user-id="420***1X"></div>

<script type="text/javascript">
const testNode = document.querySelector("#test");
console.log(testNode.dataset.userId); // 420***1X 获取数据
testNode.dataset.userId = '123456'; // 修改数据
</script>

contenteditable

<div contenteditable="true">This is editable area.</div

img

img 自带的懒加载属性loading

<img src="image.png" loading="lazy" alt="…" width="200" height="200">

由于行内图片的懒加载，可能会导致页面布局重排，所以使用这个属性的时候，最好指定图片的高和宽。