js操作DOM的方法总结整理

一、什么是DOM？
DOM（Document Object Model）文档对象模型。DOM为HTML提供了结构化表示方法，定义了访问和处理文档结构的方法规范。
HTML可以理解为是由DOM节点构成的集合，主要由元素节点、文本节点、属性节点三部分构成。
二、js操作DOM的方法
js操作dom主要分对元素节点、文本节点、属性节点的增删改查：
判断元素节点类型
新增节点：

var newNode=document.createElement("div");  //创建一个元素节点
var textNode=document.createTextNode("hello world!");  //创建一个文本节点
var cloneNode =newNode.cloneNode(true);//克隆一个节点，参数true表示会克隆当前节点以及他的所有子节点，flase表示只克隆当前节点，默认为false
document.createDocumentFragment();//创建文档对象变量，主要用来临时存储节点，大量操纵dom时性能会有很大的提升

删除节点

var deleteNode = parentNode.removeChild(item);//删除指定的子节点，并返回   deleteNode只是在dom树中删除了，但在内存中还可以访问

修改节点

node.appendChild(newNode);// 在指定元素后面新增子节点
parentNode.insertBefore(newNode,node);  //在parentNode的子节点newNode前面插入newNode节点
parentNode.replaceChild(newNode,oldNode);//用oldNode节点替换parentNode的子节点newNode

查找节点

var parentNode=document.getElementById("list");//返回第一个带有指定id的元素
var classList=document.getElementsByClassName("wrapper"); //返回所有带有指定class的元素的集合(返回数组形式)
var tagList=document.getElementsByTagName("li");//返回所有带有指定标签的元素的集合(返回数组形式)   // *表示查找所有标签
var list=document.querySelector(".wrapper");//返回第一个带有指定id或class的元素
var allList=document.querySelectorAll(".wrapper");//返回所有带有指定id或class的元素

除此之外，还可以通过节点之间的关系来查找元素节点，dom节点之间关系图以及操作方法如下图：

element.parentNode    //返回该节点的父节点，每个节点都会有一个父节点，Element的父节点可能是Element，Document或DocumentFragment；
element.parentElement    //返回父节点，只有父节点为元素节点时返回，否则返回null

element.children    //返回所有元素子节点的集合，仅包含元素节点
element.childNodes    //返回当前元素所有的子节点，包含元素节点，文本节点，属性节点。（注释、空格、换行等也会被当作一个节点）

element.firstChild    //返回当前元素的第一个子节点，该子节点可以是任意节点，如果没有则返回null
element.firstElementChild    //返回当前元素的第一个子节点，该子节点只可以是元素节点，如果没有则返回null
element.lastChild    //返回当前元素的最后一个子节点，该子节点可以是任意节点，如果没有则返回null
element.lastElementChild    //返回当前元素的最后一个子节点，该子节点只可以是元素节点，如果没有则返回null

element.previousSibling    //返回该节点的前一个兄弟节点
element.previousElementSibling    //返回该节点的前一个元素兄弟节点
element.nextSibling    //返回该节点的后一个兄弟节点
element.nextElementSibling    //返回该节点的后一个元素兄弟节点

修改元素属性

var node =document.getElementById("list");
// classList方法操作元素的class属性
node.classList.add("test"); //给node节点添加一个class
node.classList.remove("test");//删除node节点名为test的class
node.classList.replace("old-class","new-class");//替换node节点的class
var hasClass = node.classList.contains("test");//node节点是否存在给定的class，如果存在则返回 true，否则返回 false。
node.classList.toggle("test")//如果节点已经存在给定的class则删除，如果没有则添加

node.setAttribute("id","123");//给node节点设置id=123
var id = node.getAttribute("id");//获取node节点的id属性值
var hasAttr =node.hasAttribute("id");//判断node节点是否存在id属性

// dataset方法获取元素的data- 属性值
var dataId=node.dataset.id; //获取node节点的data-id属性值
var dataName=node.dataset.userName;//类似data-user-name属性必须使用驼峰式来访问
'id' in node.dataset     // 判断node节点是否有data-id属性

// style方法修改元素的样式
node.style.color = 'red';   //设置color样式
node.style.setProperty('font-size', '16px');  //设置font-size样式
node.style.removeProperty('color');  //移除color属性

除此之外还有获取元素类型

element.nodeType //返回元素的节点类型 1元素节点 2属性节点 3文本节点 4CDATA节点 5实体引用名称节点 6实体名称节点  7处理指令节点  8注释节点  9文档节点  10文档类型节点 11文档片段节点 12DTD声明节

获取当前节点的文本值

element.innerHtml  //返回当前节点的所有文本包含html
element.innerText //返回当前节点及所有后代节点的文本值,不包含html