前端必须掌握的DOM节点操作方法！

DOM节点

DOM使用对象的表示方式来表示对应文档的结构和属性。

DOM节点分为元素节点、文本节点、注释节点等。

获取DOM节点

方法一：通过getElementByID获取节点，例如获取文档中id为yiguo的节点并将其保存在变量yiguo中，可以使用的语句为var yiguo=document.getElementByID（‘yiguo’）；得到的是唯一的一个标签对象，因为文档中的ID是唯一的。

方法二：通过getElementByTagName获取节点，获取指定标签名的元素或元素集合。document.getElementByTagName（‘p’）可以得到文档中所有的p标签，使用document.getElementByTagName（‘p’）[i],可以逐一访问获取到的p标签。

方法三：通过getElementByClassName获取节点，获取文档中指定class名的标签。例如document.getElementByClassName（‘yiguo’）可以获取到文档中所有的class=yiguo的标签。

方法四：通过querySelector/querySelectorAll获取节点，获取到的是符合传入css选择器的第一个元素或者全部元素。

DOM节点遍历

获取到一个唯一的节点时，可以通过节点间的直接关系，来遍历DOM树。

var yiguo=document.getElementByID（‘yiguo’）；

yiguo.parentNode；//获取父节点

yiguo.firstChild/yiguo.lastChild；//获取第一个或者最后一个子节点

yiguo.child Nodes/ yiguo.children；//获取所有的子节点/所有的子（元素节点）

yiguo.previousSibling/ yiguo.nextSibling；//获取前一个/后一个兄弟节点

yiguo.previousElement Sibling/yiguo.nextElementSibling；//获取前一个/后一个兄弟元素节点

创建DOM节点

yiguo=document.creatElement（tagname）；//创建指定标签名称的节点

修改DOM节点

textContent获取节点及其后代节点的文本内容。

yiguo.textContent；//一锅

yiguo.textContent=“大锅”；//将一锅修改为大锅

innerText获取节点及其后代节点的文本内容。使用方法与textContent一样，但是兼容的浏览器不一致。

插入DOM节点

appendChild方法在指定元素后追加一个元素节点。

var h2=document.creatElement（h2）；

h2.innerText=“一锅”；

yiguo.appendChild（h2）；//在id为yiguo的标签下插入一个人h2标签，标签内容为“一锅”。

insretBefore方法在指定的节点前面插入一个节点。

yiguo.insertBefore（ul，h2）//在id为yiguo的标签中，h2标签前插入一个ul标签。

删除DOM节点

removeChild方法删除节点。

yiguo.removeChild（h2）；//删除h2节点 等价于h2.parentNode.removeChild（h2）；

innerHTML

innerHTML表示节点的HTML内容，可以批量创建节点、插入节点、删除节点。