当前位置：首页 > article >正文

DOM编程

article 2025/2/27 9:20:32

DOM编程

what

主要是对页面中标签的增删改查。

文档对象模型(Document Object Model,简称 DOM)，是W3C组织推荐的处理可扩展标记语言的标准编程接口。在网页上，组织页面(或文档)的对象被组织在一个树形结构中。

why

学习DOM操作就是操作页面中的标签/节点/元素/标记的

对节点的操作

what：什么是节点？

文档是一个文档节点。(页面中的汉字、空格符、特殊符号)
所有的HTML元素都是 元素/标签节点
所有HTML属性都是属性节点
文本插入到HTML元素是 文本节点

查询节点

想要操作页面中的某一个/某一类标签，要先拿到这些标签

get系列
document.getElementById() id名
document.getElementsByClassName() 根据类名
document.getElementsByName() 不常用根据name属性
document.getElementsByTagName() 根据标签名
query系列
document.querySelector() 根据选择器获取一个
document.querySelectorAll() 根据选择器获取全部

增加节点(插入节点)

名称	含义
document.createElement(标签名)	创建一个节点
父.insertBefore(新标签,哪个标签之前)	在哪个标签之前插入节点
父.appendChild(新标签)	在父节点的里边追加子节点
cloneNode()	复制节点，如果参数为true，还会复制当前节点的子孙节点，否则只复制当前节点。

步骤：

创造标签——此时没有样式创建
美化——设置样式，添加内容美化
添加——将造好的标签添加到该添加的地方添加

<script>
        /*
            节点标签从哪里来？要放在哪里？
            1.创建
            document.createElement('标签名字')
            2.美化
            - 内容样式
            - 样式修饰
            - 是否存在子元素
            3.添加
             父元素.appendChild(子元素)
        */
        //创建
        var div_=document.createElement('div');
        //美化
        div_.className='box';
        div_.innerText="你好"
        //添加
        document.body.appendChild(div_);
		//法二：
        document.body.innerHTML+=`<div class='box2'><p>姓名：<span></span></p></div>`
    </script>

创建一个标签，将其追加到最后一个父节点后面，成为最后一个父节点(createElement+appendChild)

<body>
   <div id='max'>
    <p>nihao1</p>
    <p>nihao2</p>
    <p id="third">nihao3</p>
    <p>nihao4</p>
    <p>nihao5</p>
   </div>
    <script>
        //通过创建新元素添加新的元素:添加到div的后面
        var newNode=document.createElement('p');
        newNode.innerText="hahhahhha";
        document.body.appendChild(newNode);
    </script>
</body>

将标签插入到指定的父节点里面(createElement+appendChild)

<body>
   <div id='max'>
    <p>nihao1</p>
    <p>nihao2</p>
    <p id="third">nihao3</p>
    <p>nihao4</p>
    <p>nihao5</p>
   </div>
    <script>
        //将标签插入到 指定父节点里面
        var newNode2=document.createElement('p')
        newNode2.innerText="你好"
        max.appendChild(newNode2);
    </script>
</body>

将创建的节点插入到指定的父节点里面指定的标签之前(createElement+insertBefore)

<body>
   <div id='max'>
    <p>nihao1</p>
    <p>nihao2</p>
    <p id="third">nihao3</p>
    <p>nihao4</p>
    <p>nihao5</p>
   </div>
    <script>
        //将标签插入到指定标前面
        var newNode3=document.createElement('button');
        newNode3.innerText='点击'
        max.insertBefore(newNode3,document.querySelector('third'));
    </script>
</body>

克隆

<body>
   <div id='max'>
    <p>nihao1</p>
    <p>nihao2</p>
    <p id="third">nihao3</p>
    <p>nihao4</p>
    <p>nihao5</p>
   </div>
    <script>
                //克隆
                //值为true时：拷贝该元素和其所有子元素
                //值为false时：只拷贝该元素
                //值为空时：默认为false，只拷贝该元素
               var newNode4=max.cloneNode(true);
               document.body.appendChild(newNode4);
    </script>
</body>

删除节点

名称	含义
父.removeChild（子标签）	删除指定的子标签/子节点
自己.remove()	删除自身

<div id="box">jklsa;ojff,v</div>
    <button onclick="rem()">删除</button>

    <script>
        function rem(){
           box.remove();//自己删除自己(目标节点自删)
          // document.body.removeChild(box);//通过父节点删除目标节点(子节点)
        }
    </script>

修改节点(更新节点)

名称	含义
parent.replaceChild(新标签, 旧标签);	将父标签中的旧标签用新标签替换掉

节点具有的属性(查)

节点元素属性

名称	含义
childNodes	所有直接子节点（文本节点和元素节点）——一般不用
children	所有元素子节点——获取所有的子标签——只要标签
firstElementChild	第一个元素节点(不一定是标签)
firstChild	第一个子节点，标签节点
lastElementChild	最后一个元素节点(不一点是标签)
lastChild	最后一个子节点，标签节点
parentNode	父节点
nextSibling	返回当前元素紧跟的下一个同级节点(包含文本/标签等)
nextElementSibling	返回指定元素之后的下一个兄弟元素节点（相同节点树层中的下一个元素节点）。(不包含标签)
previousSibling	返回当前元素上一个节点紧挨着的
previousElementSibling	返回指定元素的前一个兄弟元素（相同节点树层中的前一个元素节点）(不包含标签)

value	文本框的value值
id	标签的id属性值
name	表单元素的name属性值
className	class属性值
innerHTML	标签中的所有内容(包含标签)
outerHTML	包含标签本身以及标签体
innerText	标签中的所有文本内容(不包含标签本身)
getAttribute(“属性名”)	获取标签属性
setAttribute(“属性名”,“属性值”)	为标签设置属性值，还可以设置自定义属性

修改本身就有的属性只要能直接 . 出来就表示 . 出来的属性都是本身就有的（系统规定的）

名称	含义
nodeValue	节点值（文本节点的值）
nodeType	节点类型。1标签节点 2 属性节点 3文本节点
nodeName	节点名称

节点元素属性

<body>
    <div id="max">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p id="p">4</p>
        <p>5</p>
    </div>

    <script>
        //获取元素中所有的子节点，包含文本节点，例如：空格(一般不用)——childNodes
        console.log(max.childNodes);
        //获取所有的子元素，只要标签
        console.log(max.children);
        //获取第一个子元素
        console.log(max.firstChild);
        //获取第一个标签节点
        console.log(max.firstElementChild);
        //获取最后一个子元素
        console.log(max.lastChild);
        //获取最后一个子标签
        console.log(max.lastElementChild);
        //获取元素的父节点
        console.log(max.parentNode);
        //获取下一个兄弟节点
        console.log(p.nextElementSibling);
        //获取上一个兄弟节点
        console.log(p.previousElementSibling);
    </script>
</body>