JS中节点操作

企鹅d

于 2024-03-17 21:53:33 发布

阅读量1.2k

点赞数 21

文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/libingjiedd/article/details/136791141

版权

本文详细介绍了HTMLDOM中的节点类型、常见的操作方法，如元素、属性和文本节点的识别，以及如何使用JavaScript在页面中查找、添加、删除和复制元素，包括节点的生命周期管理与属性操作。

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

网页中的所有内容都是节点(标签,属性,文本,注释等),在DOM中,节点用node表示

HTML DOM树中的所有节点都可通过JavaScript进行访问,所有html元素(节点)都可以被修改,也可以创建或删除

节点至少拥有nodeType(节点类型),nodeName(节点名称)和nodeValue(节点值)这三个基本属性

🍓DOM的节点

常用的三种节点类型有

🐇.元素节点元素节点返回值为1

🐇.属性节点属性节点返回值为2

🐇.文本节点文本节点返回值为3(文本节点包含文字,空格,换行)

在实际开发中,节点操作主要操作的是元素节点

    <div id="box">hello</div>
</body>
<script>
    var oDiv=document.getElementById("box");//div元素对象
    console.log(oDiv.nodeName)//节点名称 div
    console.log(oDiv.tagName)//标签名称div
    console.log(oDiv.nodeType)//1   节点类型
    console.log(oDiv.nodeValue);//null  节点值
    var attr=oDiv.getAttribute("id");
    console.log(attr.nodeName)//节点名称 属性名
    console.log(attr.nodeType)//2   节点类型
    console.log(attr.nodeValue);//  节点值   属性值

var ch= oDiv.firstChild;//第一个字节点
alert(ch)//[object Text]文本对象节点
console.log(ch.nodeName)//节点名称文本
console.log(ch.nodeType)//3 节点类型
console.log(ch.nodeValue);// 节点值文本值

🍓DOM的更删改查

🐇.查找元素节点

🐇.父节点查找子节点

1. 通过父节点对象查找子节点对象(可能会有文本节点) 兼容性好
1.1 父节点对象.firstChild 查找父元素下的第一个节点可能会有文本节点换行
1.2父节点对象.lastChild 查找父元素下的最后一个节点
1.3父节点对象.childNodes 多个查找父元素下的所有个节点

2.通过父节点对象查找子节点对象 ie9以上支持
2.1父节点对象.firstElementChild 查找父元素下的第一个子元素节点
2.2父节点对象.lastElementChild 查找元素的最后一个子元素节点
2.3父节点对象.children 多个查找父元素下的所有的子元素节点对象

父元素节点.children[索引] 返回第索引个子元素,没有兼容性问题

举个栗子:

父元素节点.children[0] 返回第一个子节点

父元素节点.children[父元素节点.children.length-1] 返回最后一个子节点

    <ul id="box">
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ul>
</body>
<script>
    var oUl=document.getElementById('box');
    console.log(oUl.firstChild);   //第一个字节点  可能会有文本节点  换行
    console.log(oUl.firstElementChild);  //第一个元素节点
    console.log(oUl.firstChild.nodeType);//3
    console.log(oUl.firstChild.nodeValue);//
    console.log(oUl.firstChild.length);//7   空格和li  把空格去掉就没有,长度为3   换行也属于空格
    //判断childNodes[i].nodeType
    var elArr=[];
    for(var i=0;i<oUl.childNodes.length;i++){
        if(oUl.childNodes[i].nodeType===1){
            elArr.push(oUl.childNodes[i])
        }
    }
    console.log(elArr)

🐇.通过子节点查找父节点

子节点.parentNode 查找离元素最近的父节点,如果找不到父节点就返回为空
子节点.parentElement 查找父元素

    <ul id="box">
        <li id="list">列表1</li>
        <li>列表2</li>
        <li>列表3</li>
    </ul>
</body>
<script>
    var oLi=document.getElementById('list');
consol.log(oLi.parentNode)  //查找父节点
consol.log(oLi.parentElement)  //查找父元素</code></pre>

🐇.兄弟节点的操作

node.nextSibling 查找下一个兄弟节点找不到返回null,包含所有的节点可能为文本节点或元素节点
node.previousSibling 查找上一个兄弟节点找不到返回null,包含所有的节点可能为文本节点或元素节点
ie9以上支持
node.nextElementSibling 查找下一个元素兄弟节点
node.previousElementSibling 查找上一个元素兄弟节点

    <ul id="box">
        <li >列表1</li>
        <li id="list">列表2</li>
        <li>列表3</li>
    </ul>
</body>
<script>
    var oLi=document.getElementById('list');
// oLi.nextSibling

console.log(oLi.nextSibling)  //查找 下一个兄弟节点  可能为文本
console.log(oLi.nextElementSibling)  //查找下一个元素兄弟节点

// oLi.previousSibling

console.log(oLi.previousSibling)        //查找上一个兄弟节点  可能为文本
console.log(oLi.previousElementSibling) //查找上一个元素兄弟节点</code></pre>

🍓页面中想要添加一个新的元素

1.创建元素

2.添加元素

🐇创建元素节点对象

document.createElement("属性名") 创建元素节点对象

    <div id="box">
        hello world
&lt;/div&gt;
&lt;button id&#61;&#34;btn&#34;&gt;&lt;/button&gt;

</body>
<script>
var oDiv=document.getElementById('box');
var oBtn=document.getElementById('btn');
var oSpan=document.createElement("span") //创建一个元素
// console.log(oSpan);//元素对象 <span></span>
oSpan.innerHTML="我是span"
console.log(oSpan);//元素对象

document.createAttribute("属性名") 创建属性节点对象
document.createTextNode("文本内容") 创建文本节点创建

🐇添加节点

父节点.appendChild(元素对象) 追加元素对象到父元素的内部末尾 直接用父元素调用

    <div id="box">
        hello world
&lt;/div&gt;
&lt;button id&#61;&#34;btn&#34;&gt;&lt;/button&gt;

🐇将一个节点添加到父节点的指定子节点前面

父节点对象.insertBefore(参数1，参数2) 把参数1节点对象插入到参数2节点对象之前

参数1 必须要插入的节点对象

参数2 必须参照物节点对象

放在谁的内部,谁调用insertBefore()

父节点.append("shuxing") 追加节点括号中只可以写块或者字符串

		<div class="box">
			<span id="con">
				hello
			</span>
		</div>
	</body>
	<script type="text/javascript">
		var oDiv = document.getElementsByClassName("box")[0]
		var oSpan = oDiv.firstElementChild;
		var p=document.createElement("p")
		oDiv.insertBefore(p, oSpan);

🍓节点的删除和替换节点

🐇删除

父节点.removeChild(要删除的节点) 删除节点

要删除的节点.remove() 删除节点兼容性没有上一个好

		<div id="box">
			hello world
			<span>hello</span>
		</div>
		<button type="button" id="btn">删除</button>
	</body>
	<script type="text/javascript">
		var oBtn=document.getElementById("btn")
		var oDiv=document.getElementById("box")
		var oSpan=oDiv.firstElementChild;
		oBtn.onclick=function(){
			// oDiv.removeChild(oSpan);
			oSpan.remove();
		}