破译起源:为什么 DOM 被称为 DOM?

破译起源:为什么 dom 被称为 dom?

文档对象模型(DOM),基本上是“网页如何在幕后工作”的 Web 开发术语,是每个 Web 开发人员的工具包中都应该有的东西。它就像推动现代网络开发的秘密酱汁。

但是为什么是 DOM?我最近偶然发现了一个关于浏览器如何工作的视频,然后深入研究了一些文章,这是我对 “为什么?”

的理解

每个浏览器都使用**浏览器引擎**,它是网络浏览器的核心组件,负责将网页内容(包括 HTML、CSS 和 JavaScript)渲染为用户可以交互的视觉表示。

“文档”:该术语是指加载到网络浏览器中的网页。它表示网页内容的结构化层次结构,包括标题、段落、图像、链接、表单等元素。 DOM 文档本质上是网页结构的内存表示,由浏览器的渲染引擎在页面加载时创建。

现在有趣的部分是浏览器引擎如何将文档转换为节点树,我们称之为用于绘画的 DOM。

下载完文档后,它被转换为原始数据,是的,0和1。并且这些原始数据字节被转换为字符。这个转换是根据HTML文件的字符编码完成的。

这些字符被进一步解析为令牌。与任何其他编程语言令牌一样,令牌可以被定义为该编程语言中有意义的最小单个元素。这里令牌指的是 HTML 中的标签,即 body,h1,h2,p,跨度等

标记化完成后,下一步就是构建这些标记。 这就是对象发挥作用的地方。一个对象是由这些标记创建的,这些对象包含有关每个实体的大量信息,包括标签开始、标签结束、属性、数据/值等等。

现在,我们有了“文档”和“对象”,但它仍然是非结构化的,因为这些对象之间没有关系。标记化后,这些标记将转换为节点。每个节点都与另一个节点有关系,包括父节点、子节点和兄弟节点。这些节点到节点的关系形成了熟悉的树状结构。这个过程称为对象树建模。现在,节点树模型已从 HTML 文档中准备就绪,可以进行绘制了。

回顾一下,名称“文档对象模型”反映了它的目的和功能。它充当网页内容的结构化模型,表示为对象的集合。 “DOM”这个名字是由“文档”(网页)、“对象”(表示元素)和“模型”(结构化表示)融合而来。

我希望这对您有所帮助,如果您有任何具体问题或疑虑,请随时提供任何反馈或询问。

以上就是破译起源:为什么 DOM 被称为 DOM?的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2673012.html

(0)
上一篇 2025年3月7日 13:34:41
下一篇 2025年2月23日 23:06:35

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 最热门的 React 书籍 4

    React,用于构建用户界面的流行 JavaScript 库仍然是 Web 开发的主导力量。随着生态系统的发展,了解最新的实践和模式对于开发人员来说至关重要。这里列出了 2024 年最热门的 React 书籍,可以帮助您保持领先地位并掌握 …

    2025年3月7日
    200
  • 开发社区您好!我的软件开发之旅

    内存已更新当然,贾拉尔!这是您在开发社区网站上发布的第一篇文章的草稿: 开发社区您好! 我很高兴加入这个由开发人员和技术爱好者组成的令人惊叹的社区。我叫 Jalal,我对软件开发和技术充满热情。我想花点时间介绍一下自己并分享一下我迄今为止的…

    2025年3月7日
    200
  • 使用 Cypress 测试 React 应用程序:综合指南

    介绍 测试是开发过程的关键部分,确保您的应用程序按预期运行并随着时间的推移保持稳健。 cypress 是一个强大的端到端测试框架,可提供出色的开发人员体验,并与 react 等现代 javascript 框架无缝集成。在这篇文章中,我们将探…

    2025年3月7日
    200
  • Taliwind CSS VS Boostrap:你应该选择哪一个?

    在不断发展的前端开发世界,选择正确的 CSS 框架至关重要。本博客旨在比较 Tailwind CSS 和 Bootstrap 这两种流行的框架,帮助您决定哪一个更适合您的需求。 背景 Bootstrap 由 Twitter 开发,自 201…

    2025年3月7日
    200
  • 如何使用 TanStack(反应查询)

    在当今的现代web开发中,http请求对于应用程序来说非常关键,因此高效的数据管理的需求变得越来越重要。本文将向您介绍 tanstack、它的主要功能以及如何开始使用。 坦斯塔克 tanstack 是一个令人惊叹的应用程序数据管理库,它解决…

    2025年3月7日
    200
  • LeetCode 冥想:回文子串

    回文子串的描述是: 给定一个字符串 s,返回其中回文子串的数量.当向后读与向前读相同时,字符串是回文。a 子字符串 是字符串中连续的字符序列。 例如: input: s = “abc”output: 3explanation: three …

    2025年3月7日
    200
  • 多页 Vite Vanilla JavaScript

    源代码:https://github.com/mochamadboval/multipage-vite-vanilla-js 主要配置 创建一个 vite vanilla javascript 项目。 npm create vite@lat…

    2025年3月7日
    200
  • Nextjs 中样式的 CSS 模块与样式化组件

    样式是创建 next.js 应用程序的重要组成部分。 流行的选项包括 css 模块和样式组件。两者都有不同的优势和用例。 我们将深入研究这两种方法,比较它们的优点,并帮助确定哪种方法最适合该项目。 什么是 css 模块? 1.创建 css …

    2025年3月7日
    200
  • 构建我的第一个完整应用程序:婚礼任务管理应用程序

    大家好!我叫 terence,目前是辣木学校的学生,也是 doros 的初创公司创始人。我很高兴分享我使用 javascript 构建第一个完整应用程序的旅程。作为在婚礼领域经营一家初创公司的人,我决定创建一个婚礼任务管理应用程序。这个项目…

    2025年3月7日
    200
  • 使用 packagejson 脚本增强“npm run dev”

    npm run dev 是“本地运行我的网站”的标准,但它是如何工作的呢?我们如何扩展它的功能?在这篇文章中,我们将看看: 如何配置 npm run dev 的功能。如何将复杂的命令分解为细粒度的单元。如何并行运行多个命令。如何在不失去正常…

    2025年3月7日
    200

发表回复

登录后才能评论