关于js里节点的基本处理方法及区别

目录

一：节点分类

二：节点的访问

    2. 1直接访问

    2.2间接访问：

 2.2.1父节点

 2.2.2兄弟节点

 2.2.3子节点

 三：节点的值的提取方法

四：节点的 增加 删除 修改

---

一：节点分类

      在js里的DOM树状图的每一个对象都被称为节点，根据DOM对象类型被分为三个类型。一个完整的节点包括 三部分： nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）。

节点的分类

类型	概念	nodeType
1.元素节点	DOM树里的每一个标签都是一个元素节点	1
2.文本节点	DOM树里的所以文本内容都是文本节点	2
3.属性节点	DOM树里对象的各种属性被称为属性节点	3

二：节点的访问

    节点的访问可以分为直接访问和间接访问

    2. 1直接访问

                    

		<div class="demo" id="box">
			<div class="content_">这是第一个子节点</div>
			<div class="content_">这是第二个子节点</div>
			<div class="content_">这是第三个子节点</div>
		</div>
		<script>
			let btn = document.getElementsByClassName("content_")
			console.log(btn)
		</script>

利用DOM提供的方法直接访问节点

方法	注意点
document.getElementById("idName")
document.getElementsByClassName("className")	此时返回的是一个伪数组对象
document.getElementsByTagName("tagName")	此时返回的是一个伪数组对象
document.querySelector(" ")	该方法的参数为元素对象的css选择器名称，会返回匹配到的第一个值
document.querySelectorAll(" ")	返回所有匹配到的值，作为伪数组储存
优点：兼容性强，比较准备，能比较准确的找到节点. 缺点：逻辑性不强，且比较繁琐，每次对节点进行操作之前都要获取该节点.

    2.2间接访问：

        通过节点的层级关系进行访问 。通过节点的层级关系，一般将节点分为父节点、子节点和兄弟节点

 2.2.1父节点

     方法： obj.parentNode

        <div class="demo" id="box">
			<div class="content_">这是第一个子节点</div>
			<div class="content_">这是第二个子节点</div>
			<div class="content_">这是第三个子节点</div>
		</div>
		<script>
			let btn = document.querySelector(".content_")
			//得到类名为content_的第一个元素节点
			console.log(btn.parentNode)
			//打印该节点的父节点
		</script>

 2.2.2兄弟节点

兄弟节点的访问方法

方法	返回结果
node.nextSibling	返回下一个兄弟节点的节点内容，找不到就返回null
node.previousSibling	返回上一个兄弟节点的全部节点内容，找不到就返回null

 2.2.3子节点

 

子节点的访问方法

方法	返回值
parentNode.childNodes	返回结果为父节点下的所有子节点的集合，并且作为伪数组存储。包含了空格换行符等所有文本节点，不方便寻找到要进行操作的元素节点，不推荐。
parentNode.children	只返回父节点下的元素节点，便且作为数组储存。其余节点不反悔，推荐使用
parentNode.children[ i ]	通过调正i的的值来获取到特定位置的子节点

​
        <div class="demo" id="box">
			<div class="content_">这是第一个子节点</div>
			<div class="content_"  id="content_1">这是第二个子节点</div>
			<div class="content_">这是第三个子节点</div>
		</div>
		<script>
			let btn = document.querySelector(".demo")
			let child_ =btn.children
			//获得父元素  通过btn.children.length来计算子元素标签的个数
			console.log(child_[child_.length-1])
			//打印最后一个子节点
			console.log(child_[0])
			//打印第一个子节点
		</script>

​

 三：节点的值的提取方法

方法	返回结果	使用范围
node.innerHTML	元素节点内部的所有节点，包括文本和内部的其他元素节点	所有
node..innerText	返回元素节点内部的文本信息，不能解析其内部其他标签	不推荐使用
node.value	返回的值是属性节点的属性值和表单类型的元素节点对应的结果值	不适用于文本标签
node.nodeValue	返回的值是属性节点的属性值	返回属性节点的属性值

	<div class="demo" id="box">
			<div class="content_">这是第一个子节点</div>
			<select label="city" autcomplete="off" id="compare">
				<option >南京</option>
				<option selected>杭州</option>
			</select>
		</div>
		<script>
			let btn = document.querySelector(".content_")
			let btn_compare = document.querySelector("#compare")
			let op = document.querySelectorAll("option")[1]
			console.log(btn.innerHTML,btn.value,btn.nodeValue)
			//输出结果，这是第一个子节点 undefined null 文本标签的元素节点内容不能用后两个提取
			console.log(btn_compare.innerHTML,btn_compare.value,btn.nodeValue)
			//输出结果，全部内容 杭州 null		表单类型的元素标签的值可以用node.
			console.log(op.selected.value)
			 //返回结果伪true
		</script>

四：节点的 增加 删除 修改

节点的增加 删除 修改

方法	参数	效果
document.createElement("   ")	要生成节点的css类型	生成一个新的节点
document.cloneNode(    )	true/false  默认false	复制一个原有的节点。当参数为false的时候，只会复制原节点的子节点，当其参数为true的时候会复制原节点的所有后代节点
parentNode.remove(childNode)	被删除的节点	删除一个节点。在删除一个元素节点的时候，必须通过该元素节点的父节点进行操作，否则不能删除该节点
parentNode.appendChild(   )	要增加的节点	将一个节点加入指定的父节点的尾部
parentNode.insertBefore(newNode,nodeB)	节点A和B	将新增的节点放入指定的节点B之前

        <select class="test" autocomplete="off">
			<option value="郑州">郑州</option>
			<option value="杭州">杭州</option>
		</select>
		<script>
			let test = document.querySelector(".test")
			let new_op = document.createElement("option")
			document.cloneNode()
			new_op.innerHTML="新疆"
			test.appendChild(new_op)
			new_op.selected = "true"
			console.log(test)	
		</script>