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);