DOM操作是跨线程的
浏览器分为渲染引擎和JS引擎

1、跨线程操作

1.1 各线程各司其职

JS引擎不能操作页面，只能操作JS
渲染引擎不能操作JS，只能操作页面
document.body.appendChild(div)

1.2 跨线程通信

当浏览器发现JS在body里面加了个div1对象
浏览器就会通知渲染引擎在页面里也新增一个div元素
新增的div元素所有属性都照抄div1对象

image.png

2、插入新标签的完整过程

image.png
id选择器里面可能有对color的设置，则可能会重新渲染
修改title，重新渲染示例：https://css-tricks.com/css-content/#article-header-id-4

image.png

对div1连续操作，浏览器会合并成一次操作，该怎么解决？？
image.png
image.png
http://js.jirengu.com/yefac/1/edit?html,css,js,output

3、属性同步

3.1 标准属性

对div1的标准属性的修改，会被浏览器同步到页面中
比如id，className，title等

3.2 data-*属性

同上

3.3 非标准属性

对非标准属性的修改，则只会停留在JS线程中，不会同步到页面里
比如x属性

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>JS Bin</title>
  6. </head>
  7. <body>
  8.   <div id="test" x="test" data-x="test">
  9.     <p>id 一开始为 test，后来改为 frank
  10.     <p>你会发现页面中 id 变为 frank
  11.     <p>data-x 属性一开始为 test，后来改为 frank
  12.     <p>你会发现页面中的 data-x 变成了 frank
  13.     <p>x 属性一开始为 test，后来改为 frank
  14.     <p>你会发现页面中的 x 还是 test
  15.   </div>
  16. </body>
  17. </html>
  1. //JS代码
  2. let div1 = document.querySelector('#test')
  3. div1.id = 'frank' // 同步过去了
  4. div1.dataset.x = 'frank' // 同步过去了
  5. div1.x = 'frank' // 没有同步过去
  6. div1.style.border = '1px solid red'

image.png
image.png


3.4 启示

如果你有自定义属性，又想被同步到页面中，请使用data-作为前缀
image.png

4、Property VS Attribute

image.png

5、学习路线

image.png