[JavaScript] 常用DOM操作总结

最近在学习JavaScript，写下人生第一篇随笔总结一下DOM的相关操作。

一、查找节点

getElementById：根据ID查找元素

var element = element.getElementById(id)
// id：目标元素ID的字符串
// 返回一个元素对象

getElementsByClassName：根据类名查找元素

var elements = element.getElementsByClassName(classNames)
// classNames：目标元素类名的字符串，多个类名用空格分开
// 返回一组元素对象（HTMLCollection）

getElementsByTagName ：根据标签查找元素

var elements = element.getElementsByTagName(tagName)
// tagName：目标元素标签名的字符串
// 返回一组元素对象（HTMLCollection）

getElementsByName ：根据元素的name属性查找

var elements = element.getElementsByName(name) 
// name：目标元素name属性的值
// 返回一组元素对象（NodeList）

querySelector ：使用选择器查找单个元素

var element = element.querySelector(selectors)
// selectors：目标元素的CSS选择器字符串
// 返回第一个满足指定选择器组的元素

querySelectorAll ：使用选择器查找一组元素

var elementList = element.querySelectorAll(selectors)
// selectors：目标元素的CSS选择器字符串
// 返回一组满足指定选择器组的元素（non-live的NodeList）

document.write：向文档流写入

document.write(text)
// text: 要写入文档的文本的字符串

document.write需要向文档流中写入内容，所以在已完成加载的文档上调用此方法会清空该文档的内容。

createElement：创建元素节点

var element = document.createElement(tagName)
// tagName: 要创建元素的类型的字符串
// 返回创建的元素对象

MDN文档上介绍此方法还有一个可选参数options，了解不多就不写上了。

createTextNode：创建文本节点

var text = document.createTextNode(text)
// text：要放入文本节点的内容
// 返回创建的文本节点

cloneNode：克隆一个节点

var dupNode = node.cloneNode(deep)
// node：将要被克隆的节点
// deep：可选。是否采用深度克隆
// 返回调用该方法的节点的一个副本

deep参数可传入true或false。如果为true，则该节点的所有后代节点也都会被克隆；如果为false，则只克隆该节点本身。

appendChild：在父节点末尾插入新节点

parentNode.appendChild(newNode)
// parentNode: 新插入节点的父节点
// newNode: 要追加给父节点（通常为一个元素）的节点

insertBefore：在某个子节点前插入新节点

parentNode.insertBefore(newNode, referNode)
// parentNode: 新插入节点的父节点
// newNode: 用于插入的节点
// referNode: 新节点将要插在这个节点之前

removeChild：删除子节点

parentNode.removeChild(childNode)
// parentNode: 要移除节点的父节点
// childNode: 要移除的子节点

setAttribute：设置元素的属性值

element.setAttribute(name, value)
// name：属性名的字符串
// value：属性的值

getAttribute：获取元素的属性值

var attribute = element.getAttribute(name)
// name：目标属性名的字符串
// 返回目标属性值的字符串

removeAttribute：删除元素某个属性

element.removeAttribute(name)
// name：要删除的属性名的字符串

element.attribute：读写HTML元素的属性

element.style.property：读写HTML元素的样式

element.className：读写元素的类名

element.innerHTML：读写元素的HTML内容，包括HTML标签，保留空格和换行

element.innerText：读写元素的文本，去除HTML标签、空格和换行

node.parentNode：返回指定的节点在DOM树中的最近的父节点

node.childNodes：返回指定节点的子节点的集合（NodeList），包含元素节点和文本节点等

node.children：返回指定节点的子元素节点的集合（HTMLCollection）

node.firstChild：返回指定节点的第一个子节点，可能为元素节点或文本节点等

node.lastChild：返回指定节点的最后一个子节点，可能为元素节点或文本节点等

node.firstElementChild：返回指定节点的第一个子元素节点

node.lastElementChild：返回指定节点的最后一个子元素节点

node.previousSibling：返回指定节点的前一个兄弟节点，可能为元素节点或文本节点等

node.nextSibling：返回指定节点的下一个兄弟节点，可能为元素节点或文本节点等

node.previousElementSibling：返回指定节点的前一个兄弟元素节点

node.nextElementSibling：返回指定节点的下一个兄弟元素节点