操作DOM对象（重点）

最新推荐文章于 2024-07-30 10:56:44 发布

siiove

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量345

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_46423017/article/details/127093408

版权

1、DOM是什么：

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

2、核心

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

DOM分层：

根节点：在最顶层的<html>节点，称为根节点
父节点：一个节点之上的节点是该节点的父节点（parent）
子节点：一个节点之下的节点是该节点的子节点（child）
兄弟节点：如果多个节点在同一个层次，并拥有相同的父节点，这几个节点就是兄弟节点（sibling）
后代：一个节点的子节点的结合可以称为是节点的后代（descendant）
叶子节点：在树型结构最底部的节点
元素节点：在html中，<body>、<p>、<a>等一系列标记，是这个文档的元素节点。元素节点组成了文档模型的语义逻辑结构
文本节点：包含在元素节点中的内容部分，如<p>标签中的文本。一般情况下，不为空的文本节点都是可见并呈现与浏览器中的
属性节点：元素节点的属性，如<a>标签的href属性。一般情况下，大部分属性节点都是隐藏在浏览器背后，并且不可见的。属性节点总是被包含在元素节点当中

3、获得dom节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="father">
    <h1>标题一</h1>
    <P id="p1">p1</P>
    <p class="p2">p2</p>
</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();

输出效果：

最低0.47元/天解锁文章

siiove

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
操作DOM对象（重点）

1、DOM是什么：2、核心DOM分层：3、获得dom节点4、更新DOM节点更新节点操作文本操作css可以通过JavaScript去改变样式5、删除DOM节点删除节点6、创建插入DOM节点插入节点创建一个新的标签insertBefore
复制链接

扫一扫

专栏目录