js原生方法操作Dom总结

原生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：学习过程的简单记录，如有不恰当之处，欢迎指正！

来源：CSDN

作者：Kaycee666

链接：https://blog.csdn.net/weixin_40297452/article/details/104736885

标签

dom