【DOM】节点简单介绍

news2024/10/25 20:13:51

🌱 DOM 中的节点是什么

DOM 中的节点代表文档中的所有内容。HTML 文档的每个部分都被视为一个节点，其中包括元素、文本、属性和注释。

节点：文档层次结构中任何对象的通用术语。
节点类型：DOM 提供不同的节点类型

节点类型

文档节点（Document Node）
元素节点（Element Node）
文本节点（Text Node）
属性节点（Attribute Node）

🌱 DOM 中的元素节点是什么

我们看到的一个个标签元素在DOM节点树中就是元素节点，它是我们操作节点的核心，即使我们要操作属性节点和文本节点，也要先找到它们的元素节点

节点与元素节点

所有元素节点都是节点，但并非所有节点都是元素节点。文本、注释和属性也是节点，但它们不是元素节点

DOM 树表示

html (ELEMENT_NODE)
└── head (ELEMENT_NODE)
    ├── title (ELEMENT_NODE)
    │   └── "Sample Web Page" (TEXT_NODE)
    ├── meta (ELEMENT_NODE)
    ├── meta (ELEMENT_NODE)
    ├── style (ELEMENT_NODE)
    │   └── "body { font-family: Arial, sans-serif; } ..." (TEXT_NODE)
└── body (ELEMENT_NODE)
    ├── header (ELEMENT_NODE)
    │   ├── h1 (ELEMENT_NODE)
    │   │   └── "Welcome to My Sample Web Page" (TEXT_NODE)
    │   └── nav (ELEMENT_NODE)
    │       └── ul (ELEMENT_NODE)
    │           ├── li (ELEMENT_NODE)
    │           │   └── a (ELEMENT_NODE)
    │           │       └── "Home" (TEXT_NODE)
    │           ├── li (ELEMENT_NODE)
    │           │   └── a (ELEMENT_NODE)
    │           │       └── "About" (TEXT_NODE)
    │           └── li (ELEMENT_NODE)
    │               └── a (ELEMENT_NODE)
    │                   └── "Contact" (TEXT_NODE)
    ├── section (ELEMENT_NODE)
    │   ├── h2 (ELEMENT_NODE)
    │   │   └── "About This Page" (TEXT_NODE)
    │   ├── p (ELEMENT_NODE)
    │   │   └── "This page is a demonstration ..." (TEXT_NODE)
    │   ├── p (ELEMENT_NODE)
    │   │   └── "Here is a " (TEXT_NODE)
    │   │   └── strong (ELEMENT_NODE)
    │   │       └── "list" (TEXT_NODE)
    │   │   └── " of sample topics:" (TEXT_NODE)
    │   └── ul (ELEMENT_NODE)
    │       ├── li (ELEMENT_NODE)
    │       │   └── "Topic 1" (TEXT_NODE)
    │       ├── li (ELEMENT_NODE)
    │       │   └── "Topic 2" (TEXT_NODE)
    │       └── li (ELEMENT_NODE)
    │           └── "Topic 3" (TEXT_NODE)
    └── footer (ELEMENT_NODE)
        └── p (ELEMENT_NODE)
            └── "Created by: " (TEXT_NODE)
            └── a (ELEMENT_NODE)
                └── "Your Name" (TEXT_NODE)

🌱 DOM 中的节点关系

父节点关系（parentNode）：直接的那个上级节点
子节点关系（childNodes）：直接的下级节点
同级节点关系（sibling）：拥有同一个父节点的节点
childNodes: 子节点的集合：基于Dom动态查询的结果，Dom结构变化能够动态反应出来。

🌱 节点操作

添加，删除，更新（替换）操作对象是node ,不是nodeList

appendChild(node); //像childNodes列表末尾添加一个元素
appendChild：添加的节点必须是通过createElement来创建的，或者通过 cloneNode() 克隆的节点。添加页面中现有的节点相当于节点位置调动，可以使用insertBefor()方法
insertBefor(插入的node, 参考node); 插入要给元素在参考node前面，当参考node为null,添加在末尾。如果插入的节点来自页面元素会直接破坏页面结构相当于调换页面元素的位置.
removeChild(node); 删除指定的node
replaceChild(newNode,oldNode); 替换指定的元素
cloneNode(deep) 复制节点，deep:boolean类型值 true:深复制，复制子节点

查询节点

document.getElementById(); //返回单个元素
document.getElementByTabName(); //返回单个元素
document.getElementsByTabName() //返回集合zi
document.getElementByName(); //
doucemnt.getElementByClassName();