前端入门到弃坑:javascript对象渲染dom结构

我是歌谣 放弃很容易 但是坚持一定很酷 微信公众号关注前端小歌谣 带你进入巅峰前端交流群

1. 什么是DOM

DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作。

浏览器会根据 DOM 模型，将结构化文档（比如 HTML 和 XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口。

DOM 只是一个接口规范，可以用各种语言实现。所以严格地说，DOM 不是 JavaScript 语法的一部分，但是 DOM 操作是 JavaScript 最常见的任务，离开了 DOM，JavaScript 就无法控制网页。另一方面，JavaScript 也是最常用于 DOM 操作的语言。
2. 节点
2.1 什么是节点

DOM 的最小组成单位叫做节点（node）。文档的树形结构（DOM 树），就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。
2.2 节点的类型

浏览器提供一个原生的节点对象Node，以下七种节点都继承了Node，因此具有一些共同的属性和方法。

3. 节点树
3.1 什么是节点树

一个文档的所有节点，按照所在的层级，可以抽象成一种树状结构。这种树状结构就是 DOM 树。它有一个顶层节点，下一层都是顶层节点的子节点，然后子节点又有自己的子节点，就这样层层衍生出一个金字塔结构，倒过来就像一棵树。

浏览器原生提供document节点，代表整个文档。
3.2 节点间的层级关系

除了根节点，其他节点都有三种层级关系。

4. Node.nodeType属性

nodeType属性返回一个整数值，表示节点的类型。

    console.log(document.nodeType);    // 9
    console.log(Node.DOCUMENT_NODE);    // 9
    if (document.nodeType === Node.DOCUMENT_NODE) {
        console.log("equal");
    }   

// equal

原文链接：https://blog.csdn.net/weixin_47782618/article/details/124367081