JavaScript之Dom节点操作

最新推荐文章于 2022-10-31 17:57:09 发布

c-Tomorrow

最新推荐文章于 2022-10-31 17:57:09 发布

阅读量255

点赞数 1

分类专栏： JavaScript JavaScript学习之路文章标签： JavaScript JavaScriptDom节点操作 JavaScriptDom节点增、删、替换设置元素属性方法

本文链接：https://blog.csdn.net/c__dreamer/article/details/79341514

版权

JavaScript 同时被 2 个专栏收录

52 篇文章 1 订阅

订阅专栏

JavaScript学习之路

50 篇文章 6 订阅

订阅专栏

上次在Dom选择器和Dom节点类型的时候说了Dom查找节点的方法。今天说一下Dom节点的其他方法。

创建节点

增加节点，增加的有三种节点：1.元素节点，2.文本节点3.注释节点。

1.元素节点

var div = document.createElement('div');

2.文本节点

var text = document.createTextNode('this is Text');

3.注释节点

var com = document.createComment("this is comment");

节点插入

创建好的节点保存在JavaScript里面，我们还需要对html进行插入才可以把元素显示到页面里面。

1.appendChild（）这个方法每个Element都有，相当于push，插入在要插入区域的最低端，同样这个方法也是一种剪切操作。

var div = document.createElement('div');
document.body.appendChild(div);

同样也可以指定某个区域进行插入

var div = document.getElementsByTagName('div')[0];
var span = createElement('span');
div.appendChild(span);

2.第二种插入操作是父级对元素的操作.parent.insertBefore(a,b) 意思是将元素a插入到b元素的前面。

var div = document.getElementsByTagName('div')[0];
var span = document.getElementsByTagName('span')[0];
var strong = document.createElement('strong');
div.insertBefore(strong,span);

删除节点

节点的删除有两种：一种是父节点把子节点删除，一种是子节点自己了节自己。

1.parent.removeChild() 父节点把子节点删除，返回删除的子节点，相当于剪切出来。

var div = document.getElementsByTagName('div')[0];
console.log(div.removeChlid(strong));
//<strong></strong>

2.chlid.remove() 自身销毁

strong.remove()

节点的替换

节点的替换有父节点进行操作，parent.replaceChild(new,Origin); 返回被替换掉的元素

var div = document.getElementsByTagName('div')[0];
var span = document.getElementsByTagName('span')[0];
var strong = document.createElement('strong');
console.log(div.replaceChild(strong,span));
//<span></span>

Element节点的一些属性

innerHTML属性，可读可写，写入会覆盖整个文档。

innerText(火狐不兼容)/textContent(老版本IE不好使) 取文本内容

Element节点的一些方法

setAttribute（）设置元素属性

var div = document.getElementsByTagName('div')[0];
div.setAttribute('class','demo');
//这样就给div设置了Class属性

getAttribute（）获取元素属性。

<!DOCTYPE html>
<html>
<head>
	<title>Dom</title>
	<link rel="stylesheet" type="text/css" href="">
</head>
<body>
<div id = "demo" class ="Div">
           <strong>
           </strong>
           <span></span>
           <em></em>
       </div>
</body>
<script type="text/javascript">
var div = document.getElementsByTagName('div')[0];
console.log(div.getAttribute('class'));
</script>
</html>
//Div

JavaScript语言我个人感觉是最有意思的了，我也是一个初学者，遇到问题，喜欢在博客上分享，也希望能帮到大家。

一个初学者，有什么不足或者纰漏的话，希望在下面评论出来，相互学习，共同进步。

--主页传送门--