DOM,Document Object Model文档对象模型

最新推荐文章于 2022-04-25 13:37:39 发布

夏虫语冰彡

最新推荐文章于 2022-04-25 13:37:39 发布

阅读量297

点赞数

文章标签： api DOM对象 dom树 dom编程

本文链接：https://blog.csdn.net/qq_34283987/article/details/77947922

版权

简介

DOM,Document Object Model文档对象模型。
DOM是操作HTML和XML的一组API，可以实现动态改变页面的功能。
DOM节点树：每个HTML或XML文档被浏览器加载后都会在内存中生成一个DOM树。如图：

div p h1以前叫标签，现在叫dom对象、dom节点、dom元素，每个标签都是HTMLElement这个类的对象，形如HTMLXxxElement,如div是HTMLDivElement.

## 节点的三种类型 ## 1）标签节点 div 2）属性节点 id=”div1” 3）文本节点我是div1 如：

<div id = "div1">
我是div1
</div>

DOM编程（CRUD增删改查）

//补充
console.dir(body);
body下有个childNodes 查看子节点

方法(在父节点调用) 返回值说明
hasChildNodes() Boolean 当前节点是否有子节点
appendChild(node) Node 往当前节点上添加子节点
removeChild(node) Node 删除子节点
replaceChild(newNode,oldNode) 同上替换子节点
insertBefore(newNode,refNode) 同上在指定节点的前面插入新节点

document方法
createElement(tagName):创建标签节点
createTextNode(s):创建文本节点

补充:

Node 需要克隆的节点.cloneNode(boolean deep) 复制当前节点.
当deep为true时，不仅复制该节点也复制它的所有后代节点.
当deep为false时,只复制当前节点。

一、增
需求：在div1后面增加一个div5节点
二、删
需求：删除div1
三、改
需求：把div1改成一个文本框
示例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>DOM编程（CRUD）</title>
        <script type="text/javascript">
            function add () {
                //需求：在div1后面增加一个div5节点
                //1.创建标签节点div5
                var div5 = document.createElement("div");
                div5.id="div5";
                //2.创建文本节点
                var div5TextNode = document.createTextNode("我是div5");
                //3.父节点div5增加子节点（文本结点）
                div5.appendChild(div5TextNode);
                //4.获得div2节点
                var div2 = document.getElementById("div2");
                //4.插入同级节点,只能插入到div2前面，不能插入到div1后面
                div2.parentNode.insertBefore(div5,div2);
            }

            function remove () {
                //需求：删除div1
                //1.获得div5
                var div1 = document.getElementById("div1");
                //2.获得父节点
                if(div1!=null){
                    div1.parentNode.removeChild(div1);
                }else{
                    alert('不存在div1节点');
                }

            }

            function update () {
                //需求：把div1改成一个文本框
                //<input type="text" name="username" id="username" value="请输入用户名：" />
                //1.创建一个input对象
                var username = document.createElement("input");
                username.type="text";
                username.name="username";
                username.id="username";
                username.value="请输入用户名：";
                //2.替换
                var div1 = document.getElementById("div1");
                div1.parentNode.replaceChild(username,div1);
            }
        </script>
    </head>
    <body>

        <div id="div1">
            我是div1
        </div>
        <div id="div2">
            我是div2
        </div>
        <div id="div3">
            我是div3
        </div>
        <div id="div4">
            我是div4
        </div>
        <input type="button" name="btn1" id="btn1" value="在div1后增加1个div5" onclick="add();"/>
        <input type="button" name="btn2" id="btn2" value="删除div1" onclick="remove();"/>
        <input type="button" name="btn3" id="btn3" value="替换div1为文本框" onclick="update();"/>
        <input type="button" name="btn4" id="btn4" value="刷新" onclick="location.reload(true);"/>
    </body>
</html>

这里写图片描述

夏虫语冰彡

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DOM,Document Object Model文档对象模型

简介DOM,Document Object Model文档对象模型。 DOM是操作HTML和XML的一组API，可以实现动态改变页面的功能。 DOM节点树：每个HTML或XML文档被浏览器加载后都会在内存中生成一个DOM树。如图： div p h1以前叫标签，现在叫dom对象、dom节点、dom元素，每个标签都是HTMLElement这个类的对象，形如HTMLXxxElement,
复制链接

扫一扫