常用JS dom操作

1、元素

1、创建元素
let para = document.createElement("p"); // 创建新元素<p>
let node = document.createTextNode("这是一个新的文本节点"); // 创建一个新的文本节点
para.appendChild(node); // 将文本节点添加为p元素的子节点
2、添加元素
parent.insertBefore(child1, child0); // 在parent节点的子节点child1节点之前添加child0节点
3、删除元素
parent.removeChild(child); // 删除parent节点的子节点中的child节点
4、替换元素
parent.replaceChild(child1,child0); // 用child0节点替换掉parent子节点中的child1节点

2、选择器

var node = document.getElementById("nodeId");
var parent = node.parentNode; // 父节点
var children = node.childNodes; // 全部子节点
var firstChild = node.firstChild; // 第一个子节点
var lastChild = node.lastChild; // 最后一个子节点　
var previousBrother = node.previousSibling; // 上一个兄弟节点
var nextBrother = node.nextSbiling; // 下一个兄弟节点

3、属性 

 添加属性：
    obj.setAttribute('attr_name','attr_value');
 获取属性值：
    obj.getAttribute('attr_name');
 删除属性：
    obj.removeAttribute('attr_name');