[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标签、空格和换行

六、节点间关系

1.父子关系

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

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

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

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

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

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

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

2.兄弟关系

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

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

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

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