JavaScript DOM 操作常用方法详解

DOM 元素获取方法

getElementById()：用于获取文档中指定唯一 ID 属性的元素节点。

getElementsByName(name)：根据元素的 name 属性获取元素集合，返回值是一个数组对象。

getElementsByTagName()：获取文档中所有指定标签名的元素，返回一个包含这些元素的子元素集合。

getAttribute()：用于读取指定属性名的当前属性值。

document.getElementsByTagName("a")[0].getAttribute("target");

DOM 元素属性操作

setAttribute()：用于添加一个新属性，或修改现有属性的值。

document.getElementsByTagName("INPUT")[0].setAttribute("type","button");

节点属性与层级关系

节点属性：

节点名称（只读）：通过 nodeName 属性获取。

节点值：通过 nodeValue 属性获取。

节点类型（只读）：通过 nodeType 属性获取。

子节点：

ele.childNodes：返回包含所有子节点的数组。

firstChild：指向第一个子节点。

lastChild：指向最后一个子节点。

父节点：

parentNode：返回当前节点的父节点，每个节点仅有一个父节点。

兄弟节点：

nextSibling：返回当前节点之后紧跟的下一个兄弟节点。

previousSibling：返回当前节点之前紧邻的上一个兄弟节点。

节点的插入与删除

插入节点：

appendChild()：将新节点插入到指定父节点的末尾。

insertBefore(newnode, node)：将 newnode 节点插入到 node 节点之前。

删除节点：

removeChild(node)：成功删除节点时返回被移除的节点，若失败则返回 null。

节点的替换与创建

替换元素节点：

replaceChild(newnode, oldnode)：使用 newnode 替换掉 oldnode，实现子节点对象的更替。

创建元素节点：

createElement()：用于创建一个新的元素节点。

创建文本节点：

createTextNode()：用于创建包含指定文本内容的文本节点。

节点的复制操作

复制节点：

需要被复制的节点.cloneNode(true/false)：调用此方法可生成节点的副本。

参数为 true 时，复制当前节点及其所有子节点；参数为 false 时，仅复制当前节点本身。

以上介绍了 JavaScript 操作 DOM 的一些常用方法，供参考使用。