DOM树的增删改

最新推荐文章于 2022-08-10 15:08:45 发布

空忧

最新推荐文章于 2022-08-10 15:08:45 发布

阅读量152

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/qq_44216701/article/details/103833367

版权

web前端专栏收录该内容

54 篇文章 0 订阅

订阅专栏

DOM树的增删改

DOM树是结构
所谓层级结构是指元素和元素之间的关系
父子，兄弟
解析器输出的树是由DOM元素和属性节点组成的
当我们说树中包含DOM节点时，意思就是这个树是由实现了DOM接口的元素组成。这些实现包含了其它一些浏览器内部所需的属性。
当各个节点组成之后像一棵树，就是DOM树。

元素属性的删改查（必须是标签上有的属性）
查看元素属性的值（getAttribute()）
首先要获取到一个元素，再用getAttribute（属性名）查看

<a href="http://www.baidu.com">百度一下</a>
	  <script type="text/javascript">
	  	var a=document.getElementsByTagName("a")[0];
	  	console.log(a.getAttribute("href"));
	  </script>

在这里插入图片描述
元素属性的删（removeAttribute()）

<a href="http://www.baidu.com" class="aaaa">百度一下</a>
	  <script type="text/javascript">
	  	var a=document.getElementsByTagName("a")[0];
	    a.removeAttribute("class");

	  </script>

在这里插入图片描述
元素属性的改（setAttribute（属性名，属性值））

 <a href="http://www.baidu.com" class="aaaa">百度一下</a>
	  <script type="text/javascript">
	  	var a=document.getElementsByTagName("a")[0];
	    a.setAttribute("class","bbbb");

	  </script>

在这里插入图片描述
不光元素的属性有增删改，元素也有。appendChild
要增加元素就要先创建一个

在这里插入代码片<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	  <a href="http://www.baidu.com" class="aaaa">百度一下</a>
	  <h1></h1>
	  <i>1111</i>
	  <b>22222</b>
	  <script type="text/javascript">
	  	var a=document.getElementsByTagName("a")[0];
	    var h1=document.getElementsByTagName("h1")[0];
	    var i=document.getElementsByTagName("i")[0];
	    var b=document.getElementsByTagName("b")[0];
	    //创建标签
	    var span = document.createElement("span");//可以添加标签
	    //创建文本
	    var text = document.createTextNode("今天星期六");//也可以向标签添加文字
	    //把文本加到标签
	    span.appendChild(text);
	    //把标签加到父元素上
	    h1.appendChild(span);
	  </script>
</body>
</html>

在这里插入图片描述
插到指定位置之前

 //把标签加到body的i标签前上
	    document.body.insertBefore(span,i);

在这里插入图片描述
没有向后添加的方法可以自写一个在原型链上要用直接掉；

Element.prototype.insertAtfer= function  (yanja,yushu) {
                	var zhihou=yushu.nextElementSibling;
                	if (zhihou==null) {
                		this.appendChild(yanja);
                	}else {
                		this.insertBefore(yanja,zhihou);
                	}

                }
       document.body.insertAtfer(span,i);

在这里插入图片描述
替换元素（改）

  document.body.replaceChild(span,i);

在这里插入图片描述

空忧

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM树的增删改

DOM树的增删改DOM树是结构所谓层级结构是指元素和元素之间的关系父子，兄弟解析器输出的树是由DOM元素和属性节点组成的当我们说树中包含DOM节点时，意思就是这个树是由实现了DOM接口的元素组成。这些实现包含了其它一些浏览器内部所需的属性。当各个节点组成之后像一棵树，就是DOM树。元素属性的删改查（必须是标签上有的属性）查看元素属性的值（getAttribute()）首先要获取到...
复制链接

扫一扫