DOM操作详解-优快云博客

本文详细介绍了如何使用JavaScript操作DOM树，包括查找、插入、删除、替换和复制节点的方法及具体步骤。例如，使用getElementById()获取元素，appendChild()添加子节点等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、操作DOM树

查找获取节点
getElementById()
getElementsByName()
getElementsByTagName()

插入节点
appendChild() :添加子节点到末尾（特点：类似于剪切粘贴的效果）

insertBefore(newNode,oldNode) :在某个节点之前插入一个新的节点   
步骤1、获取兄弟节点oldNode 2、新建节点document.createElement() 3、新建文本document.createTextNode()4、把文本添加到新建节点下面appendChild()5、获取父节点document.getElementById()6、父节点.insertBefore(新建节点,兄弟节点)

删除节点
removeChild() ：删除节点    通过父节点删除
得到父节点  1、通过id 2、通过属性parentNode获取

替换节点
replaceChild(newNode,oldNode) :替换节点 通过父节点替换
步骤1、获取替换节点oldNode 2、新建节点document.createElement() 3、新建文本document.createTextNode()4、把文本添加到新建节点下面appendChild()5、获取父节点document.getElementById()6、父节点.replaceChild(新建节点,替换节点)

复制节点
cloneNode(boolean) :复制节点 (true复制子节点)
步骤1、获取到节点 2、执行复制方法 3、把复制后的内容放到需要的地方(appendChild)