dom增删改查

最新推荐文章于 2022-05-15 08:57:57 发布

Hercule2016

最新推荐文章于 2022-05-15 08:57:57 发布

阅读量277

点赞数 1

分类专栏： JS 文章标签： js javascript

本文链接：https://blog.csdn.net/cdut2016/article/details/106822771

版权

JS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

Dom文档对象模型
把整个网页看做是一个对象，通过这个对象可以使用js改变网页中的内容。所以dom是整个JS中最核心的内容。
这里我就直接创建一个实例就可以了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="#">aaaaaaaaaaaaaa</a>
<a href="#">aaaaaaaaaaaaaa11111111111</a>
<a href="#">aaaaaaaaaaaaaa22222222222</a>
<p>ppppppppppppppppppppp</p>
<p>ppppppppppppppppppppp111111111111</p>
<p>ppppppppppppppppppppp222222222222</p>
<p>ppppppppppppppppppppp333333333333</p>
<h1>111111111111111111</h1>
<h1>222222222222222222</h1>
<script>
    //使用js针对标签进行增删改查
    //增加标签
    //创建一个标签对象
    
</script>

</body>
</html>

可以看到原来的网页是这样的：
在这里插入图片描述
现在如果要在网页中加入一个h1标签，那么代码如下：

 var h1 = document.createElement("h1");
    //把h1添加到body中
    document.body.appendChild(h1);

这两行代码是应该写在上面代码的script之间
这时候当你运行代码，其实是没有任何变化的，这时候F12打开控制台。可以看到多了一对h1标签：
在这里插入图片描述
同理如果要添加别的标签也可以如此形式。

下面给出修改操作的内容

  div.innerHTML = "<b>33333333333333</b>";//可以识别里面的标签内容，让标签起效果

这里添加以后浏览器效果如下：
在这里插入图片描述
会多一行被加粗的内容。

而另一种代码形式是:（不会识别其中的标签）

div.innerText = "<b>33333333333333333</b>";//不会识别内容中的标签，而是直接显示出来

在这里插入图片描述

下面保留加粗的那个div
来看一下获取内容

// 获取内容
    alert(div.innerText);

结果：
在这里插入图片描述

修改属性

//修改属性
    div.id = "aa";
    div.title = "bb";

结果如下
在这里插入图片描述
这里很多的属性都可以添加，不过有一点意外：

//修改class
div.class = "cc";

结果：
在这里插入图片描述
可以看到这里并没有任何的改变，
因为实际修改class的代码应该是：

 div.className = "cc";

结果是：
在这里插入图片描述

并且在创建一个标签对象的时候，js可以动态的添加属性

 //修改属性或者添加属性
    div.setAttribute("id","ii");

原来的id是aa，这里直接把id改成“ii”
结果如下：
在这里插入图片描述
而且还可以获取属性的值

//获取属性的值
    alert(div.getAttribute("id"));

在这里插入图片描述
删除属性：

//删除属性
div.removeAttribute("id");

在这里插入图片描述

接下来由于功能太多了我就不一一演示了，大家可以回去自己试一下，我这里只把代码贴上来，注明代码的功能。

//修改css 只能获取内联css
    // 对象.style.属性名
    div.style.color = "red";//这里是将div中的内容变为红色
    //如果属性有-中划线，全部编程驼峰命名 font-size 变成fontSize
    div.style.fontSize = "3em";
    //获取css的值  只能获取内联css的值，外部css和内部css的值无法获取
    alert(div.style.color)

删除：

 //删除
     document.body.removeChild(div);
     //parentElement 父级元素
     div.parentElement.removeChild(div);

查询：

    //查询
    //查找所有的标签
    //document.all;
    //通过标签名查找
    var ps = document.getElementsByTagName("p");
    //通过名字查找
    var ps = document.getElementsByName("a");
    //通过类名查找
    var ps = document.getElementsByClassName("b");
    //通过id查找 返回的是对象，上面的返回的都是数组  因为id是唯一的
    var c = document.getElementById("c");
    // alert(c.innerText)

    //通过选择器查找  选择器就是css的选择器
    //只会返回一个对象
     var p = document.querySelector("#c");
    //返回数组
    var ps = document.querySelectorAll(".b");

  for(var i = 0 ;i < ps.length;i++){
        alert(ps[i].innerText)
    }

Hercule2016

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
dom增删改查

Dom文档对象模型把整个网页看做是一个对象，通过这个对象可以使用js改变网页中的内容。所以dom是整个JS中最核心的内容。这里我就直接创建一个实例就可以了。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><a href="#">aa
复制链接

扫一扫