Javascript - dom[含虚拟dom] - 学习/实践

Bertha 。 2022-11-30 12:52 106阅读 0赞

1.应用场景

<table> 
 <tbody> 
  <tr> 
   <td>主要学习JavaScript中有关dom的知识，从而更加深入理解前端开发.</td> 
  </tr> 
 </tbody> 
</table>

2.学习/操作

<table> 
 <tbody> 
  <tr> 
   <td> <p>1.介绍</p> <h2>DOM</h2> <p>DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作（比如增删内容）。</p> <p>浏览器会根据 DOM 模型，将结构化文档（比如 HTML 和 XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口。</p> <p>DOM 只是一个接口规范，可以用各种语言实现。所以严格地说，DOM 不是 JavaScript 语法的一部分，但是 DOM 操作是 JavaScript 最常见的任务，离开了 DOM，JavaScript 就无法控制网页。另一方面，JavaScript 也是最常用于 DOM 操作的语言。后面介绍的就是 JavaScript 对 DOM 标准的实现和用法。</p> <p>&nbsp;</p> <p>2.文档</p> <p><a href="https://wangdoc.com/javascript/dom/index.html" rel="nofollow">https://wangdoc.com/javascript/dom/index.html</a>&nbsp; //阮一峰 - 网道 -&nbsp;&nbsp;JavaScript 教程 - DOM</p> <p><a href="http://www.ruanyifeng.com/blog/2015/02/future-of-dom.html" rel="nofollow">http://www.ruanyifeng.com/blog/2015/02/future-of-dom.html</a>&nbsp; //阮一峰 -&nbsp;也许，DOM 不是答案</p> <p>其中摘录：</p> <p><img alt="" height="653" src="https://img-blog.csdnimg.cn/20200824172421886.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="1200"></p> <p><a href="https://segmentfault.com/a/1190000012921279" rel="nofollow">https://segmentfault.com/a/1190000012921279</a>&nbsp; //React入门看这篇就够了</p> <p><a href="https://github.com/livoras/blog/issues/13" rel="nofollow">如何实现一个 Virtual DOM 算法</a></p> <p><a href="https://www.zhihu.com/question/31809713" rel="nofollow">理解 Virtual DOM</a></p> <p>&nbsp;</p> <p><a href="https://facebook.github.io/react/docs/reconciliation.html" rel="nofollow">Reconciliation diff</a></p> <p><a href="https://doc.react-china.org/docs/reconciliation.html" rel="nofollow">diff算法 - 中文文档</a></p> <p><a href="https://zhuanlan.zhihu.com/p/20346379" rel="nofollow">不可思议的 react diff</a></p> <p><a href="https://github.com/zmmbreeze/blog/issues/9" rel="nofollow">React diff 算法</a></p> <p>&nbsp;</p> <p>补充：</p> <p><a href="https://react.docschina.org/docs/faq-internals.html" rel="nofollow">https://react.docschina.org/docs/faq-internals.html</a>&nbsp; // react官方中文文档 - 关于virtual dom的简单介绍</p> <p><img alt="" height="764" src="https://img-blog.csdnimg.cn/20210108114825871.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="577"></p> <p>&nbsp;</p> <p>&nbsp;</p> <p>后续补充</p> <p>...</p> </td> 
  </tr> 
 </tbody> 
</table>

3.问题/补充

4.参考

<table> 
 <tbody> 
  <tr> 
   <td> <p><a href="https://wangdoc.com/javascript/dom/index.html" rel="nofollow">https://wangdoc.com/javascript/dom/index.html</a>&nbsp; //阮一峰 - 网道 -&nbsp;&nbsp;JavaScript 教程 - DOM</p> <p><a href="http://www.ruanyifeng.com/blog/2015/02/future-of-dom.html" rel="nofollow">http://www.ruanyifeng.com/blog/2015/02/future-of-dom.html</a>&nbsp; //阮一峰 -&nbsp;也许，DOM 不是答案</p> <p><a href="https://time.geekbang.org/column/article/140140" rel="nofollow">https://time.geekbang.org/column/article/140140</a>&nbsp;//22 | DOM树：JavaScript是如何影响DOM树构建的？</p> <p><a href="https://time.geekbang.org/course/detail/100024601-86448" rel="nofollow">https://time.geekbang.org/course/detail/100024601-86448</a>&nbsp;//10 | 理解虚拟DOM及key属性的作用</p> <p><a href="https://react.docschina.org/docs/faq-internals.html" rel="nofollow">https://react.docschina.org/docs/faq-internals.html</a>&nbsp; // react官方中文文档 - 关于virtual dom的简单介绍</p> </td> 
  </tr> 
 </tbody> 
</table>

后续补充

...