JavaScript文档对象模型总结

开发工具与关键技术：Adobe Dreamweaver JavaScript
作者：李哲定
撰写时间：2020年4月27日

什么是文档对象模型？
1.文档对象模型，Document Object Model，简称DOM，是W3C组织推荐的处理可扩展置标语音的标准编程接口
2.DOM是一个允许程序和脚本，动态读取和更新文档内容、样式的语言和平台
3.DOM是针对html与xml的应用程序接口，编程人员可以通过dom修改HTML或xml文档中某个元素及其属性和属性值

windiw和document之间的区别
window 是指浏览器，而 document 是你当前正在操作的 HTML 页面，即当前文档。文档界面有许多实用功能，比如 queryselector()，一种用于选择给定页面内任何 HTML 元素的方法：
1.Document.queryselector(’ h1’);
window 表示当前窗口的浏览器，以下代码效果与上述相同：
2.Window.document.queryselector(’ h1’);
无论如何，以下语法更常见，你还会看到更多：
3.Document.methodName();

DOM操作和jQuery
1.此时你可能会想：“我可以只使用jQuery吗？为什么要用createElement？“ 我经常会被问到这些问题。
2.好吧，请注意 jQuery 正逐渐消失。 Bootstrap 5 将从依赖项中删除它，还有更多的库或框架正在删除它。这背后有一个十分正当的理由：原生 DOM API 已经非常完整且成熟到足以使 jQuery 过时。

3.如果你想坚持用原生 JavaScript 实现简单的交互和操作。甚至可以创建自己的迷你框架来抽象出最常见的操作：创建元素、追加、创建文本等。

结论
1.文档对象模型是浏览器创建并保留在内存中的网页的虚拟副本。在创建、修改、删除 HTML 元素时，我们会碰到 “DOM 操作”。在过去即使对于更简单的任务，我们也要依赖于 jQuery，但今天本机 API 已经互相兼容并且足够成熟以使 jQuery 过时。
2.虽然 jQuery 不会很快的消失，但每个 JavaScript 程序员都必须知道该如何使用本机 API 去操作 DOM。这样做有很多理由，其他库会增加 JavaScript 程序的加载时间和大小，更不用说 DOM 操作在技术面试中出现的越来越多。
3.DOM 中可用的每 个HTML 元素都有一个暴露一定数量属性和方法的接口。如果对使用什么方法有疑问，可以参考 MDN上的优秀文档。
4.操作DOM最常用的方法是document.createElement()用于创建新的HTML元素，document.createTextNode()用于在DOM内创建文本节点。需要注意的是 .appendChild()用于将新的HTML元素或文本节点附加到现有元素。
5.虽然很好的了解本机 API 是很好的，但是现代前端库也提供了无可置疑的好处。尽管用“原生” JavaScript 去构建大型JavaScript 程序确实是可行的，但有时 Angular、React、Vue可以提供很多帮助。仅使用 JavaScript 来处理更简单的原型和中小型应用也是明智之举。