JavaScript 知识整理(六) 文档对象模型DOM

最新推荐文章于 2024-07-07 13:41:50 发布

shawn697

最新推荐文章于 2024-07-07 13:41:50 发布

阅读量147

点赞数

文章标签： js dom javascript

本文链接：https://blog.csdn.net/qq_41459262/article/details/114328786

版权

JavaScript 知识整理(六) 文档对象模型

前言

浏览器网页就是一个DOM树形结构

对DOM的操作就是增删改查DOM节点（也就是html标签）

DOM操作都是基于 document 对象操作的

一、获取DOM节点（查）

结社我们有如下html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p id="js">javascript</p>
<div id="list">
    <p class="pp">JavaSE</p>
    <p class="pp">JavaEE</p>
    <p>JavaME</p>
</div>
</body>
</html>

通过id获取(唯一获取，得到的就是文档对象)

<script>
    let js=document.getElementById("js")
</script>

通过标签和类获取(非唯一获取，得到的是文档对象数组)

<script>
    let p = document.getElementsByTagName("p"); //p[index]获取具体文档对象
    let father = document.getElementsByClassName("pp"); //同上注释
</script>

二、删除节点（删）

逻辑：先获取父节点，在删除当前节点（自己删除自己是不可以的）

还是上面的html,我们删除div里的第二个p标签

<script>
    let div=document.getElementsById("list");
    div.removeChild(div.children[1]);
<script>

删除节点时，child属性是在变化的.

三、插入节点（增）

插入节点有两种情况，一种是已有节点插入，另外一个是新建节点插入

还是上面的html。

<script>
    // 已有节点插入
    let js=document.getElementById("js");
    let list=document.getElementById("list");
    list.appendChild(js);
    list.insertBefore(js,list.children[0]);
    // 新建节点后插入
    let h2=document.createElement("h2");
    h2.setAttribute("class","h2");
    list.appendChild(h2);
    list.insertBefore(h2,list.children[0]);
</script>

四、修改节点（改）

修改节点就是选中之后直接修改属性

<script>
    let p1=document.getElementById("p1")
    p1.class="pp";
    p1.innerText="hello";
</script>

本质来讲，js可以完全代替html和css。

shawn697

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JavaScript 知识整理(六) 文档对象模型DOM

JavaScript 知识整理(八) 文档对象模型目录JavaScript 知识整理(八) 文档对象模型前言一、获取DOM节点（查）二、删除节点（删）三、插入节点（增）四、修改节点（改）前言浏览器网页就是一个DOM树形结构对DOM的操作就是增删改查DOM节点（也就是html标签）DOM操作都是基于 document对象操作的一、获取DOM节点（查）结社我们有如下html文件<!DOCTYPE html><html lang="e.
复制链接

扫一扫