在JavaScript中,可以使用DOM(文档对象模型)操作来对HTML文档中的节点进行增、删、改、查等操作。以下是一些常用的DOM操作方法:
-
获取节点:
getElementById(id)
:通过元素的ID获取元素。getElementsByClassName(className)
:通过元素的类名获取元素集合。getElementsByTagName(tagName)
:通过元素的标签名获取元素集合。querySelector(selector)
:通过CSS选择器获取第一个匹配的元素。querySelectorAll(selector)
:通过CSS选择器获取所有匹配的元素集合。
-
创建节点:
document.createElement(tagName)
:创建一个新的元素节点。document.createTextNode(text)
:创建一个新的文本节点。
-
插入节点:
parentNode.insertBefore(newNode, referenceNode)
:将新节点插入到指定节点之前。parentNode.appendChild(newNode)
:将新节点添加到指定节点的子节点列表末尾。
-
删除节点:
parentNode.removeChild(childNode)
:从DOM中删除指定节点。
-
替换节点:
parentNode.replaceChild(newChild, oldChild)
:用新节点替换指定节点。
-
复制节点:
Node.cloneNode(deep)
:复制指定节点,可以选择是否复制子节点。
-
移动节点:
parentNode.insertBefore(node, referenceNode)
:将指定节点移动到指定节点之前。
以下是一个简单的示例,演示了如何使用DOM操作在HTML文档中添加一个新的元素:
DOM操作示例
在这个示例中,当用户点击"添加段落"按钮时,会调用addParagraph
函数,该函数会创建一个新的元素,并添加到id为"container"的元素中。