操作DOM对象（重点）

1、DOM是什么：

2、核心

DOM分层：

3、获得dom节点

1、DOM是什么：

DOM= Document Object Model，文档对象模型（记住这个就可以！），DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。
Document（文档）：创建一个网页并将网页添加到Web中，DOM就会根据这个网页创建一个文档对象。如果没有Document，DOM也就无从谈起。
Object（对象）：是一种独立的数据集合。如文档对象，就是文档中元素与内容的数据集合。与某个特定对象相关联的变量被称为这个对象的属性。可以通过某个特定对象去调用的函数被称为这个对象的方法。
Mdel（模型）：代表将文档对象表示为树状模型。在这个树状模型中，网页中的各个元素与内容表现为一个相互连接的节点。

2、核心

浏览器网页就是一个DOM树形结构
更新：更新DOM节点
遍历DOM节点：得到DOM节点
删除：删除一个DOM节点
添加：添加一个新的DOM节点
要操作一个DOM节点，就必须要先获取这个DOM节点。

DOM分层：

根节点：在最顶层的节点，称为根节点
父节点：一个节点之上的节点是该节点的父节点（parent）
子节点：一个节点之下的节点是该节点的子节点（child）
兄弟节点：如果多个节点在同一个层次，并拥有相同的父节点，这几个节点就是兄弟节点（sibling）
后代：一个节点的子节点的结合可以称为是节点的后代（descendant）
叶子节点：在树型结构最底部的节点
元素节点：在html中，、
、等一系列标记，是这个文档的元素节点。元素节点组成了文档模型的语义逻辑结构

文本节点：包含在元素节点中的内容部分，如

标签中的文本。一般情况下，不为空的文本节点都是可见并呈现与浏览器中的

属性节点：元素节点的属性，如标签的href属性。一般情况下，大部分属性节点都是隐藏在浏览器背后，并且不可见的。属性节点总是被包含在元素节点当中

3、获得dom节点


html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div id="father">
    <h1>标题一h1>
    <P id="p1">p1P>
    <p class="p2">p2p>
div>
<script>
    // 对应css选择器
    //通过标签选择器去拿到h1标签
    let h1 = document.getElementsByTagName('h1');
    let p1 = document.getElementById('p1');
    let p2 = document.getElementsByClassName('p2');
    let father = document.getElementById('father');
    //获取父节点下的所有子节点
    let childrens = father.children;
script>
body>

这是原生代码，之后我们尽量都使用JQuery();

输出效果：

相关阅读:
[云原生k8s] k8s资源限制以及探针检查
安卓毕业设计app项目源码移动端的医生寻访平台
【Linux篇】之常用命令
LAMMPS小技巧
Java 全栈体系（四）
【C++泛型学习笔记】类模板、变量模板和别名模板
构建自己的无人驾驶系统
ABP微服务系列学习-搭建自己的微服务结构（一）
实验三十二、OCL电路的研究
【Linux实验】软中断通信

原文地址：https://blog.csdn.net/qq_46423017/article/details/127093408