浏览器、DOM、JavaScript。构建高效 Web 应用所需了解的一切。第二部分 - DOM。

DOM 树。

嗨👋
这篇文章将讨论DOM。这是该系列的第二篇文章。

DOM（文档对象模型）是HTML 、XML 和 SVG 文档的软件接口。它以一组节点和具有属性和方法的对象的形式，提供文档（树）的结构化视图，并定义程序访问该结构的方式。DOM 将网页与脚本或编程语言绑定在一起。

HTML 文档的基础是标签。
根据 DOM，HTML 标签是一个对象，嵌套的标签是它的“子对象”。
所有对象都可以在 JavaScript 中使用，我们可以用它们来修改页面。
例如，document.body就是标签的一个对象<body>。

备注
JavaScript 不是 DOM 的一部分，尽管它（JS）最常用。

这是一个典型的 HTML 页面：

<!DOCTYPE HTML>
<html>
<head>
  <title>About DOM</title>
</head>
<body>
  DOM...
</body>
</html>

这是 HTML 文档作为标签树的视图：

html
    head
        #text
        title
             #text "About DOM"
        #text
    #text
    body
        #text "DOM..."

标签是节点元素（elements）。它们构成树的结构：<html>是根节点，<head>以及<body>它的子节点等。

元素内的文本构成名为的文本节点#text。文本节点仅包含一串文本。它不能有后代（始终位于最底层）。
空格和换行符也是符号。与字母和数字一样，它们构成文本节点，并成为 DOM 树的一部分。

评论

标签前的空格和换行符<head>将被忽略；

标签后没有字符。根据 DOM 规范，</body>此标签后写入的任何内容都将移动到标签的末尾；<body>

<head>标签之前写入的所有内容都被移到了里面<body>。

HTML 中编写的所有内容也都在 DOM 树中，甚至包括注释。

备注
Comments也是一个DOM树节点。

在此示例中，没有由空格和换行符创建的文本节点：

<!DOCTYPE HTML>
<html><head><title>About DOM</title></head><body>DOM...</body></html>

备注
最小化（单行）代码运行速度更快的原因之一。

构建 DOM 时，浏览器会自动修复错误编写的 HTML。例如，如果文件只包含单词world，浏览器就会添加所有必要的标签。DOM 将如下所示：

html
    head
    body
        #text "world"

备注
简而言之，我不考虑空格和换行符的文本节点。

备注：
浏览器也会关闭所有未关闭的标签。但我强烈建议关闭它们。

共有 12 个 DOM 节点：

但最常使用的只有 4 个：document，，，，。elementstext nodescomments

在这里- 您可以实时看到 DOM 模型。

下一篇文章我会讨论阴影和虚拟 DOM。不要错过！

非常感谢你的关注。希望对你有用🙏
关注我，这会激励我写新文章😌
很高兴收到你的反馈。
再见！😉