JS系列：关于DOM的增删改

关于DOM的增删改

createElement

创建一个元素标签
createTextNode

appendChild

把一个元素对象插入到指定容器的末尾
[container].appendChild([newEle])

insertBefore

把一个元素对象插入到指定容器中某一个元素标签之前
[container].insertBefore([newEle])

cloneNode

把某一个节点进行克隆
[curEle].cloneNode():浅克隆，只克隆当前的标签
[curEle].cloneNode(true):深克隆，当前标签及里面的内容都一起克隆

removeChild

在指定容器中删除某一个元素
[container].removeChild([curEle])

set/get/removeAttribute

设置/获取/删除 当前元素的某一个自定义属性

   var oBox = document.getElementById('box');

设置自定义属性的两种方法

1.//把当前元素作为一个对象，在对象对应的堆内存中新增一个自定义属性

• oBox.myIndex = 10; //=>设置
• console.log(oBox[‘myIndex’]); //=>获取
• delete oBox.myIndex; //=>删除

2.//=>基于Attribute等DOM方法完成自定义属性的设置

• oBox.setAttribute(‘myColor’, ‘red’); //=>设置
• oBox.getAttribute(‘myColor’); //=>获取
• oBox.removeAttribute(‘myColor’); //=>删除

上下两种机制属于独立的运作机制，不能混淆使用

• 第一种是基于对象键值对操作方式，，修改当前元素对象的堆内存空间来完成的。
• 第二种直接修改页面中html标签结构来完成（这种方法设置的属性可以在页面结构上可以看到）