:节点操作)
文章目录
- 一.节点的类型与基础概念
- 二.创建节点
- 1.创建元素节点( createElement )
- 2.创建文本节点( createTextNode )
- 3.创建文档片段( createDocumentFragment )
- 三.添加节点
- 1.追加子节点( appendChild )
- 2.插入节点到指定位置( insertBefore )
- 3.追加多个节点( append ,ES6+)
- 四.删除节点
- 1.删除子节点( removeChild )
- 2.节点自删除( remove`,ES6+)
- 五.替换节点
- 六.复制节点(克隆节点)
- 七.查找节点关系
- 八.常用节点操作表
- 注意事项
- 总结
DOM 节点操作是 JavaScript 操作网页结构的核心,包括创建节点、添加节点、删除节点、替换节点、复制节点和查找节点关系等.这些操作能动态修改网页的 DOM 树结构,实现页面的动态交互.
一.节点的类型与基础概念
DOM 节点主要分为几类:
- 元素节点(如
div、p、ul):nodeType = 1 - 属性节点(如
class、src):nodeType = 2 - 文本节点(如元素内的文本):
nodeType = 3 - 注释节点:
nodeType = 8
操作节点时,通常以元素节点为核心,以下示例均围绕元素节点展开.
二.创建节点
1.创建元素节点( createElement )
用于创建新的 HTML 元素,是最常用的创建节点方法.
// 创建一个 div 元素constnewDiv=document.createElement('div');// 为元素设置属性和内容newDiv.id='new-box';newDiv.className='content';newDiv.textContent='这是新创建的节点';2.创建文本节点( createTextNode )
用于创建纯文本节点,可附加到元素节点中(也可直接用textContent/innerHTML替代).
// 创建文本节点consttextNode=document.createTextNode('Hello DOM');// 将文本节点添加到新创建的 div 中newDiv.appendChild(textNode);3.创建文档片段( createDocumentFragment )
文档片段是轻量级的文档对象,用于批量添加节点,避免频繁操作 DOM 导致的性能损耗(仅需一次 DOM 重绘).
// 创建文档片段constfragment=document.createDocumentFragment();// 批量创建 li 节点并添加到片段中for(leti=0;i<5;i++){constli=document.createElement('li');li.textContent=`列表项${i+1}`;fragment.appendChild(li);}// 将片段一次性添加到 ul 中(片段本身不会被插入,仅插入其子节点)constul=document.querySelector('ul');ul.appendChild(fragment);三.添加节点
将创建好的节点添加到 DOM 树中,常用方法有appendChild、insertBefore.
1.追加子节点( appendChild )
将节点添加到父节点的子节点列表的末尾.
// HTML:<div id="parent">父节点</div>constparent=document.getElementById('parent');// 创建子节点constchild=document.createElement('p');child.textContent='子节点';// 追加到父节点末尾parent.appendChild(child);// 结果:<div id="parent">父节点<p>子节点</p></div>2.插入节点到指定位置( insertBefore )
将节点插入到父节点的某个子节点之前,语法:父节点.insertBefore(新节点, 参考节点).
// HTML:<div id="parent"><p id="old-child">旧子节点</p></div>constparent=document.getElementById('parent');constoldChild=document.getElementById('old-child');constnewChild=document.createElement('span');newChild.textContent='新子节点';// 将新节点插入到旧子节点之前parent.insertBefore(newChild,oldChild);// 结果:<div id="parent"><span>新子节点</span><p id="old-child">旧子节点</p></div>// 若参考节点为 null,则等同于 appendChildparent.insertBefore(newChild,null);3.追加多个节点( append ,ES6+)
append是比appendChild更灵活的方法,支持同时添加多个节点或文本,且可添加字符串(自动转为文本节点).
parent.append(newChild,'直接添加文本',anotherChild);四.删除节点
1.删除子节点( removeChild )
通过父节点删除子节点,语法:父节点.removeChild(子节点).
// HTML:<div id="parent"><p id="child">要删除的节点</p></div>constparent=document.getElementById('parent');constchild=document.getElementById('child');// 删除子节点parent.removeChild(child);// 若不确定父节点,可通过 node.parentNode 获取child.parentNode.removeChild(child);2.节点自删除( remove`,ES6+)
更简洁的方法,节点可直接删除自身,无需通过父节点.
child.remove();// 直接删除当前节点五.替换节点
使用replaceChild将父节点中的某个子节点替换为新节点.
语法:
父节点.replaceChild(新节点, 旧节点)// HTML:<div id="parent"><p id="old-node">旧节点</p></div>constparent=document.getElementById('parent');constoldNode=document.getElementById('old-node');constnewNode=document.createElement('h3');newNode.textContent='新节点';// 替换节点parent.replaceChild(newNode,oldNode);// 结果:<div id="parent"><h3>新节点</h3></div>六.复制节点(克隆节点)
使用cloneNode复制现有节点
语法:
节点.cloneNode(是否深克隆)- 浅克隆(
false,默认):仅复制节点本身,不复制子节点和内容. - 深克隆(
true):复制节点本身及所有子节点和内容.
// HTML:<div id="original"><p>原始内容</p></div>constoriginal=document.getElementById('original');// 浅克隆:仅复制 div 标签,不包含子节点constcloneShallow=original.cloneNode(false);console.log(cloneShallow);// <div id="original"></div>// 深克隆:复制 div 及内部的 p 节点constcloneDeep=original.cloneNode(true);cloneDeep.id='clone';// 避免 id 重复document.body.appendChild(cloneDeep);七.查找节点关系
通过节点的属性获取其在 DOM 树中的关系节点,常用属性如下:
| 属性 | 作用 |
|---|---|
parentNode | 获取当前节点的父元素节点(返回 null 表示无父节点) |
children | 获取当前节点的所有子元素节点(HTMLCollection,仅元素节点) |
childNodes | 获取当前节点的所有子节点(NodeList,包括文本、注释节点) |
firstChild | 获取第一个子节点(包括文本节点) |
firstElementChild | 获取第一个子元素节点(仅元素节点) |
lastChild | 获取最后一个子节点(包括文本节点) |
lastElementChild | 获取最后一个子元素节点(仅元素节点) |
previousSibling | 获取上一个兄弟节点(包括文本节点) |
previousElementSibling | 获取上一个兄弟元素节点(仅元素节点) |
nextSibling | 获取下一个兄弟节点(包括文本节点) |
nextElementSibling | 获取下一个兄弟元素节点(仅元素节点) |
// HTML:<ul id="list"><li>项1</li><li id="item2">项2</li><li>项3</li></ul>constlist=document.getElementById('list');constitem2=document.getElementById('item2');console.log(item2.parentNode);// <ul id="list">(父节点)console.log(list.children);// HTMLCollection(3) [li, li#item2, li](子元素节点)console.log(item2.previousElementSibling);// <li>项1</li>(上一个兄弟元素)console.log(item2.nextElementSibling);// <li>项3</li>(下一个兄弟元素)八.常用节点操作表
| 操作场景 | 原生 JS 方法 |
|---|---|
| 创建元素节点 | document.createElement() |
| 追加子节点 | parent.appendChild(child) |
| 插入到指定位置 | parent.insertBefore(new, old) |
| 删除节点 | child.remove()/parent.removeChild(child) |
| 替换节点 | parent.replaceChild(new, old) |
| 克隆节点 | node.cloneNode(true) |
| 获取父节点 | node.parentNode |
| 获取子元素节点 | node.children |
注意事项
性能优化
- 批量添加节点时,优先使用文档片段(
DocumentFragment)批量操作,减少 DOM 重绘次数. - 避免在循环中直接操作 DOM,可先拼接节点或使用片段,最后一次性插入.
- 批量添加节点时,优先使用文档片段(
节点存在性检查
- 操作节点前(如删除、替换),需检查节点是否存在,避免报错:
constchild=document.getElementById('child');if(child){child.remove();}
- 操作节点前(如删除、替换),需检查节点是否存在,避免报错:
克隆节点的 id 问题
- 克隆节点时,若节点有唯一
id,需修改克隆后的节点id,避免页面中 id 重复.
- 克隆节点时,若节点有唯一
事件绑定的影响
- 使用
remove()删除节点时,原生事件(如addEventListener)会被移除.
- 使用
文本节点的空白问题
childNodes会包含空白文本节点(如换行、空格),若只需获取元素节点,优先使用children、firstElementChild等属性.
总结
- 原生 JavaScript 节点操作更底层、灵活,适合需要精细控制的场景,需熟悉节点关系和各类方法的语法.
- 核心原则:减少不必要的 DOM 操作,批量操作优先使用文档片段,确保操作前节点存在,避免性能问题和报错.
