js常见问题总结-DOM节点增删改查

DOM节点的增删改查

1.查找节点

getElementById()

getElementsByClassName()

getElementsByTagName()

querySelector()

querySelectorAll()

firstChild

Children

lastChild

childNodes

someNode.previousSibling

someNode.nextSibling

someNode.parentNode

getAttribute

2.增加节点

2.1 创建节点

createElement()：创建一个dom节点

document.createElement('div');

2.2 父节点插入子节点

appendChild()：子节点末尾追加

const element = document.createElement('div');
element.textContent="新加的按钮";
document.body.appendChild(element);

2.3 同级插入节点

节点.insertBefore(插入的标签，参照标签)

const newNode = document.createElement('div');
document.body.insertBefore(newNode);

3.修改节点

3.1 替换节点

replaceChild()：替换子节点。接受两个参数，第一个为要插入的节点，第二个为要替换的节点

const newNode=document.createElement('span');
const oldNode=document.querySelector('#root');
document.body.replaceChild(newNode,oldNode);

3.2 clone节点

var box =document.getElementById("box");
//复制box节点(浅拷贝）
var new_box1 =box.cloneNode(false);
console.log(new_box1);
//复制box节点（深拷贝）
var new_box2 =box.cloneNode(true);
console.log(new_box2);

4.删除节点