原生JS对Dom的操作汇总

查找

// id查找
var ele = document.getElementById('id');
// name属性值查找
var ele = document.getElementsByName('name');
// 标签查找
var ele = document.getElementsByTagName("p");
// class查找
var ele = document.getElementsByClassName("class");
// 仅仅返回匹配指定选择器的第一个元素
var ele = document.querySelector(".myclass");
var ele = document.querySelector("p.example");
var ele = document.querySelector("a[target]");
// 返回文档中匹配的CSS选择器的所有元素节点列表
var ele = document.querySelectorAll("div.note, div.alert");

创建

// 创建一个节点
var ele = document.createElement(tagname);
// 对某个节点创建属性
var attribute = document.createAttribute(name);
attribute.nodeValue = "属性值";
ele.setAttributeNode(attribute);
// 创建文本节点，返回纯文本内容
var ele = document.createTextNode(text);

插入节点

// 在某个节点前插入节点
document.insertBefore(newNode,reChild);
// 给某个节点添加子节点
parentNode.appendChild(newNode);

复制节点

// 参数是否复制原节点的所有属性
cloneNode(true | false);

删除节点

parentNode.removeChild(node)

查找节点

// 第一个节点
parentNode.firstChild
// 最后一个节点
parentNode.lastChild
// 所有的子节点
parentNode.childNodes
// 相邻的上一个节点
neborNode.previousSibling
// 相邻的下一个节点
nerbourNode.nextSlbling
// 获取父节点
childNode.parentNode

替换节点

parentNode.replaceChild (newnode,oldnode)