JavaScript之Dom节点操作

        上次在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语言我个人感觉是最有意思的了,我也是一个初学者,遇到问题,喜欢在博客上分享,也希望能帮到大家。

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

--主页传送门--
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值