利用 js进行修改/操作 DOM树

最新推荐文章于 2024-05-06 18:26:10 发布

SSS_cool

最新推荐文章于 2024-05-06 18:26:10 发布

阅读量734

点赞数

分类专栏： JavaWeb 文章标签： js java

本文链接：https://blog.csdn.net/alcohol_sun/article/details/118943617

版权

JavaWeb 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

利用 js进行修改/操作 DOM树

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>随便</title>
</head>
<body>
    <h1>标题</h1>
    <div>
        <p>PPP</p>
    </div>

    <div>
        <p>XXX</p>
    </div>
</body>
</html>

上面html代码生成的DOM树如下,每个结点均为一个对象（图中对象标注不完全）
在这里插入图片描述

通过js可以查询树中的任意结点
通过js可以创建结点/创建子树
通过js可以修改树的结果——改变浏览器上的显示

1.通过js可以查询树中的任意结点

在浏览器的开发者工具中通过console（控制台）利用 document.querySelctor( 选择器 ) 可以查询到选择出来的对象
常用选择器：

元素选择器：若传入“h1”，则查出第一个遇到的h1元素结点（DOM树默认深度遍历）
id选择器：若传入“#some-id” ，则查出第一个遇到 id="some-id"的元素结点
类选择器：若传入“.some-class” ，则查出第一个遇到 class有"some-class"的元素结点

2.通过js可以创建结点/创建子树

构造新结点：document.createElement(“h1”)
将新结点添加到DOM树中：parentElement.appendChild(childElement)

3.通过js可以修改树的结果——改变浏览器上的显示

修改文本内容，如给页面添加内容（内容刷新后就没有了）：利用结点元素.innerText
在这里插入图片描述
修改内部结构，如给页面添加图片（实际上添加了一个子树）：利用结点元素.innerHTML 或者构建img结点对象

例1 在这里插入图片描述
例2
例3

修改DOM树的总结

JS代码	含义
document.querySelctor("…")	根据选择器，从DOM树中查询结点对象
document.createElement("…")	根据需要的标签名称，创建对应的结点对象
结点对象.innerText	修改标签中的文本内容
结点对象.innerHTML	修改标签中的内部HTML结构
结点对象.其他属性	修改标签属性，具体属性含义见HTML文档
父亲结点对象.appendChild(子结点)	将子结点插入父亲结点

事件绑定

事件绑定三要素：元素、事件、函数，即当某个元素发生某个事件时会触发某个函数
在这里插入图片描述

SSS_cool

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
利用 js进行修改/操作 DOM树

利用 js进行修改/操作 DOM树<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>随便</title></head><body> <h1>标题</h1> <div> <p>PPP</p> </di
复制链接

扫一扫