JS中的节点操作_js中节点操作-优快云博客

本文链接：https://blog.youkuaiyun.com/XVJINHUA954/article/details/111667818

本文围绕JS中的节点操作展开。介绍了节点概述，包括节点的基本属性。阐述了创建节点的语法，以及添加节点的两种方法。还说明了节点间的层级关系，如父级、子级、兄弟节点等，并给出了获取不同类型节点的方式，最后提及了节点操作综合实例。

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

JS中的节点操作

节点概述

网页页面中所有内容都是节点.在DOM中节点我们以Node来表示.
在这里插入图片描述

我们一般使用DOM对节点实现修改,添加,删除操作

一般情况下,节点至少拥有三个基本属性

NodeType：节点类型，这里的类型是标签的名称,比如div等等
NodeName：节点名称，这里的名称是指JS中给这个节点起的一个名字
NodeValue：节点值

创建节点

语法:

document.createElement("tagName")

document.createElement("tagName")方法创建由tagName指定的HTML元素,因为这些元素原本不存在于document里面,而是根据我们的需求动态创建的,所以这种创建方式叫做动态节点,节点创建完以后需要添加到HTML文档中.

那么怎么添加节点呢?

添加节点

Node.appedChild(父节点)

该方法将一个创建的节点元素添加到指定的父节点中的最后一个子节点之后

Node.insertBefore(父节点,子节点)

该方法将一个创建的节点元素添加到指定的父节点中的指定子节点之前

节点之间的层级关系

我们利用DOM将节点划分为不同的层级关系,通过DOM操作获取我们需要的节点元素

父级节点

Node.parentNode

子级节点

Node.childNodes(标准)

使用该方式返回包含指定子节点的集合,这个集合会进行即时更新
注意此方式返回值里面包含了所以的子节点包括孙子级别的,还包含文本节点,如果只想要获取里面的元素节点的话,需要进行专门的处理,因此一般不考虑用这个方式

parentNode.children(非标准)

该方式是一个只读属性,返回所有的元素节点,它只返回子元素节点,不会返回浏览器的格式化节点,以后我们主要使用这个属性.

第一个子节点

parentNode.firstChild

返回第一个子节点,找不到的话返回null,同样包含文本节点

最后一个子节点

parentNode.lastChild

返回最后一个子节点,找不到的话返回null,同样包含文本节点

第一个子元素节点

parentNode.firstElementChild

返回第一个子元素节点,找不到则返回null,只找元素.

最后一个子元素节点

parentNode.lastElementChild

返回最后一个子元素节点，找不到则返回null，只找元素

兄弟节点

上一个元素兄弟节点

self.previousElementSibling

下一个元素兄弟节点

self.nextElementSibling

上面两个只会找到元素
下面两个可以找到所有的节点包含文本节点

上一个兄弟节点

self.previousSibling

下一个兄弟节点

self.nextSibling

JS中节点操作综合实例

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns=" http://www.w3.org/1999/xhtml"> 
<head> 
<title="Javascript的节点操作"></title> 
<script type="text/javascript" src="jquery-1.7.js"></script> 
</head> 
<body> 
<input type="button" id="test" name="nn" value="EFG"> 
<div id = "t">bbb</div> 
<div name="parent_test"> 
<div id = "t1"><span>aaa</span><span>bbb</span><span>ccc</span></div> 
</div> 
<div id = "fuzhi"><span>AAA</span><span>BBB</span><span>CCC</span></div><div id = "m"></div> 
<script type="text/javascript"> 
//搞清楚这三种 元素节点 属性节点 文本节点 
// 1:元素节点(对于元素节点，nodeName保存的始终是元素的标签名，而nodeValue的值始终是null) 
var element_node=document.getElementById('test'); 
//alert(element_node.nodeType); // 1 
//alert(element_node.nodeName); // input 
//alert(element_node.nodeValue); // null 
// 2:属性节点 
var attr_node=document.getElementById('test').getAttributeNode('name'); 
alert(attr_node.nodeType); // 2 
alert(attr_node.nodeName); // name 属性名 
alert(attr_node.nodeValue); // nn 属性值 
// 3:文本节点 
var all=document.getElementById('t').firstChild; 
//alert(all.nodeType); // 3 
//alert(all.nodeName); // #text 
//alert(all.nodeValue); // bbb 文本内容 
var tt1=document.getElementById('t1'); 
//alert(tt1.firstChild.innerHTML); // aaa 
//alert(tt1.lastChild.innerHTML); // ccc 
var tt2=tt1.childNodes[1].innerHTML; 
//alert(tt2);// bbb 
var tt3=tt1.parentNode.getAttribute('name'); 
//alert(tt3); // parent_test 
var tt4=tt1.childNodes[1]; 
//alert(tt4.nextSibling.innerHTML); // ccc 
//alert(tt4.previousSibling.innerHTML); //aaa 
// node方法的详细介绍 
var tt5=document.getElementById('test'); 
var tt6=document.getElementById('t') 
// hasChildNodes()方法：判定一个节点是否有子节点，有返回true，没有返回false 
//alert(tt5.hasChildNodes()); // false 
//alert(tt6.hasChildNodes()); // true 
//removeChild()方法：去除一个节点 
var first_node=document.getElementById('t1').firstChild; 
//document.getElementById('t1').removeChild(first_node); // 删除第一个节点 aaa 
// appendChild()方法：添加一个节点 如果文档树中已经存在该节点，则将它删除，然后在新位置插入。 
var first_node=document.getElementById('t1').firstChild; 
//document.getElementById('t1').appendChild(first_node); // aaa变成了最后一个节点 
// replaceChild()方法：从文档树中删除（并返回）指定的子节点，用另一个节点来替换它 
//insertBefore()方法：在指定节点的前面插入一个节点，如果已经存在，则删除原来的，然后在新位置插入。 
var newd=document.createElement("span"); 
newd.innerHTML="eee"; 
//document.getElementById('t1').appendChild(newd); // 加载一个子节点 
var oldd=document.getElementById('t1').lastChild; 
//document.getElementById('t1').replaceChild(newd,oldd); // 替换最后一个子节点 
//document.getElementById('t1').insertBefore(newd,oldd); // 在指定位置前面插入一个节点 aaabbbeeeccc 
// cloneNode()方法：复制一个节点，该方法有一个参数，true表示同时复制所有的子节点，false表示近复制当前节点。 
var what=document.getElementById('fuzhi').cloneNode(true).innerHTML; 
document.getElementById('m').innerHTML=what; 
</script> 
</body> 
</html>