JavaScript DOM 原生部分(四):节点操作

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

注意事项

1. 性能优化

   • 批量添加节点时,优先使用文档片段(DocumentFragment)批量操作,减少 DOM 重绘次数.
   • 避免在循环中直接操作 DOM,可先拼接节点或使用片段,最后一次性插入.

2. 节点存在性检查

   • 操作节点前(如删除、替换),需检查节点是否存在,避免报错:

     constchild=document.getElementById('child');if(child){child.remove();}

3. 克隆节点的 id 问题

   • 克隆节点时,若节点有唯一id,需修改克隆后的节点id,避免页面中 id 重复.

4. 事件绑定的影响

   • 使用remove()删除节点时,原生事件(如addEventListener)会被移除.

5. 文本节点的空白问题

   • childNodes会包含空白文本节点(如换行、空格),若只需获取元素节点,优先使用children、firstElementChild等属性.

总结

• 原生 JavaScript 节点操作更底层、灵活,适合需要精细控制的场景,需熟悉节点关系和各类方法的语法.
• 核心原则:减少不必要的 DOM 操作,批量操作优先使用文档片段,确保操作前节点存在,避免性能问题和报错.