- 浅谈图片ALT文字与SEO的关系与应用
- Thinkphp .htaccess文件设置伪静态
- Path.GetExtension 方法
- ASP.NET中Request.InputStream使用
- 小程序中token介绍
- NVARCHAR 和VARCHAR区别和使用 .
- Thinkphp使用七牛云
- 怎么查看nodejs安装路径
- Windows Server 2008 显示桌面图标
- .net如何给cookie赋值与读取
邮箱：
手机：15383239821
JavaScript 操纵 DOM
浏览器解析完 HTML，就要开始解析 HTML 里的 JavaScript 代码。程序员可以通过 JavaScript 代码实现一些动态的网页效果。例如，从服务器拉取一段数据来展示，或做一个酷炫的动画效果，都要用到 DOM。
举个简单的例子（代码如下所示），想要在网页里显示一行字“this is from javascript”，首先要找到那个可以显示文字的标签。这是非常容易的，因为浏览器已经把 DOM 都交给 JavaScript 了。
DOM 里的对象(标签)，正好就是 JavaScript 语言里的对象。JavaScript 可以通过下面的方法修改 DOM 树上的标签对象。
<body>
<p id="display">hello world</p>
<script type="text/javascript">
document.getElementById("display").innerText="this is from javascript";
</script>
</body>
随着对前端知识学习的深入，我们会发现 JavaScript 操纵 DOM 是非常普遍的事情。例如，很多网页一开始加载出来的只是个架子，只显示出一个 loading 图标的转圈动画，只有等 JavaScript 从服务器上请求到真正的数据后操纵 DOM 来显示数据，才能看到内容，这就是典型的异步加载。
以 HTML 5 的游戏为例，里面的人物要随着手指或鼠标运动，普遍的做法是通过 JavaScript 操纵 DOM 改变元素的位置来实现。可以说，DOM 使得 JavaScript 在前端世界里几乎无所不能。
但是，有一点要注意，操纵 DOM 本身是一件效率非常低的事情。一个网页往往很复杂，浏览器构造出来的 DOM 树往往很庞大，有的甚至有几千个节点。
在这么庞大的一棵树上频繁地改动，对浏览器（尤其是移动浏览器）来说是不小的工作量，稍不注意就会出现卡顿。
于是，有人发明了一种便捷的方法，叫作虚拟 DOM。
简单来说，就是用 JavaScript 模拟了一棵简单的 DOM 树，然后在这上面演练所有的 DOM 操作，等时机成熟时再把虚拟 DOM树和真正的浏览器的 DOM 树做对比，算出差异，一次性地改变真正的 DOM 树。
这两个步骤从整体上大大提高了 JavaScript 操纵 DOM 树的效率。
- 上一篇：HTML中的DOM是什么
- 下一篇：HTML DOM Document 对象
-
2024-06-17清楚VO，BO，PO，DO，DTO的区别
-
2013-04-24C# / .net 时间格式转换
-
2012-06-30B2B大型网站怎么做SEO
-
2023-10-11php序列化函数serialize()函数和unserialize()函数
-
2023-09-19thinkphp中m方法与d方法的区别是什么
-
2011-02-19HTTP 错误 403.9 - 禁止访问：连接的用户过多？怎样解决这种问题？
