原生JS对dom节点的操作包括:查找、创建、添加、删除、替换、插入、复制、移动等。
1、访问节点
document.getElementById("id");// 通过id查找
document.getElementByName("name");// 通过name查找
document.getElementsByClassName("class");// 通过class命名查找
document.getElementsByTagName("div");// 通过标签名查找
querySelector(); //要在较新的浏览器上才能使用
querySelectAll();//要在较新的浏览器上才能使用
2、创建节点
document.createElement();//创建元素
document.createDocumentFragment();//创建内存文档碎片
document.createTextNode();//创建文本节点
appendChild(node) //在父元素下追加none节点
3、创建完节点之后可以将创建好的节点添加进指定节点中
var ele = document.getElementById("my_div");
var newEle= document.createElement("div");
ele.appendChild(newEle);
4、删除节点
var ele = getElementById('my_div');
ele.removeChild(newEle);
5、替换节点
var oldElm = document.getElementById('old')
var newElm = document.createElement("span")
var parentElm = document.getElementById('parent')
newElm.textContent = 'hello world'
parentNode.replaceChild(newElm, oldElm)
6、插入节点
ele.insertBefore(newEle,oldEle);//在oldEle之前插入 newEle节点
7、复制节点
var cloneEle = oldEle.cloneNode(true);//深度复制,复制节点下面所有的子节点
cloneEle = oldEle.cloneNode(false);//只复制当前节点,不复制子节点
8、移动节点
var cloneEle = oldEle.cloneNode(true);//被移动的节点
document.removeChild(oldEle);//删除原节点
document.insertBefore(cloneEle,newEle);//插入到目标节点之前
ps:学习过程的简单记录,如有不恰当之处,欢迎指正!