11月13日学习内容整理：js局部查找，节点操作，模态框-优快云博客

本文介绍如何使用DOM API进行节点操作，包括创建、添加、删除、替换和复制标签等，并提供了一个模态对话框的具体实现案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、局部查找

先定位到某个标签名，再由这个标签调用直接查找

不支持ID属性和自定义属性

二、节点操作（对标签的增删改查）

1、创建标签

》》》document.createElement（"标签名"）创建一个指定名称的标签

2、添加标签：都可以赋值给一个变量

》》》追加一个子节点

父节点对象.appendchild（子节点对象）

注意：必须都是标签对象不能用引号表示而且必须是父标签添加子标签

》》》把节点放到某个节点的前边。这个不常用

父节点对象.insertBefore(新节点对象,某个节点对象)

3、删除标签

》》》父节点对象.removechild（子标签对象）

注意：必须都是标签对象而且是父节点删除子节点

4、替换标签

》》》父节点对象.replacechild（新节点对象，旧节点对象）

注意：仍然都是标签对象而且只能父节点标签调用

5、复制标签

》》》被复制节点对象.clonenode（）

》》》参数

（true）代表复制包括嵌套内容的整个标签内容

（）不写true就代表只复制标签本身，嵌套里的不复制

三、模态对话框

button标签自带有默认点击提交的功能，跟submit类似，点击button以后跟点击submit提交按钮效果一样，页面会刷新

具体的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .back{
            height: 2000px;
            background-color: wheat;
        }
        .shade{
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: gray;
            opacity: 0.5;
        }
        .model{
            position: fixed;
            top: 100px;
            left: 300px;
            width: 500px;
            height: 300px;
            background-color: white;
            /*margin-top: -150px;*/
            /*margin-left: -250px;*/
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<div class="back">
    <button class="show">添加</button>
</div>

<div class="shade hide item"></div>

<div class="model hide item">
    <form action="">
        <p>姓名<input type="text"></p>
        <p>年龄<input type="text"></p>
        <p>班级<input type="text"></p>
        <p>
            <input type="button" value="取消" class="cancel">
            <input type="button" value="确认">
        </p>
    </form>
</div>
<script>
    var ele_show=document.getElementsByClassName("show")[0];
    var ele_cancel=document.getElementsByClassName("cancel")[0];
    var ele_shade=document.getElementsByClassName("shade")[0];
    var ele_model=document.getElementsByClassName("model")[0];
    // 显示遮罩层
    ele_show.onclick=function () {
//         ele_shade.classList.remove("hide");
//         ele_model.classList.remove("hide");
        var eles=document.getElementsByClassName("item");
        for(var i=0;i<eles.length;i++){
            eles[i].classList.remove("hide")
        }

    };
    // 隐藏遮罩层
    ele_cancel.onclick=function () {
         ele_shade.classList.add("hide");
         ele_model.classList.add("hide");
    }
</script>
</body>
</html>