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

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

Element节点的一些属性

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

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

Element节点的一些方法

        setAttribute（） 设置元素属性    

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

        getAttribute（）获取元素属性。

	
	



           
           
           
           
       



//Div

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

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

--主页传送门--