DOM - 的查询节点

最新推荐文章于 2023-06-18 13:40:42 发布

老王笔记

最新推荐文章于 2023-06-18 13:40:42 发布

阅读量357

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/JSWANGCHANG/article/details/102639266

版权

JS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1，根据ID查询节点
   document.getElementById()
2，根据层级节点结构查询
   1， parentNode
       作用：根据当前节点的层级结构，返回父元素节点；
   2， childNodes
       作用：根据当前节点的层级结构，返回当前元素的所有子元素数组；
       注意：能够获取所有的元素节点和文本节点。换行符、空格、Tab等都会被获取为文本节点-Text；
   3, children
       根据当前节点的层级结构，返回当前元素的所有子元素数组；(区别childNodes，不会返回space,Tab等，只返回元素)
   4， nextSibling
       获取当前节点的下一个兄弟节点
   5， nextElementSibling
       获取当前节点的下一个元素兄弟节点
   6， previousSibling
       获取当前节点的上一个节点
   7, previousElementSibling
       获取当前节点的上一个元素兄弟节点
3，通过标签名称获取页面元素
   语法： document|elem.getElementsByTagName("标签名");
   返回值：返回包含指定标记的元素列表；
   eg:
       element.getElementsByTagName("p");

4, 通过元素的name属性值获取元素；
   语法: document.getElementsByName("name");
   返回值:包含指定name属性的元素数组

5, 通过元素的class属性值获取元素
   document|elem.getElementsByClassName("clssName");
   返回值：包含指定class属性的所有元素;

作业：
   模拟商品购物车数量加减按钮；
   1，文本框初始值为1
   2，点击 + 按钮，允许将文本框值+1操作
   3，点击 - 按钮时，允许将文本框的值进行 -1操作；但值不能小于1

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
	#buttonSub,#buttonAdd{
		height:40px;
		width:40px;
		box-sizing:border-box;
		border: none;
		border-radius:3px;
	}
	#inputNum{
		height:40px;
		width:80px;
		text-align:center;
		border: 1px solid #000;
		box-sizing:border-box;
		font-size:24px;
		vertical-align:middle;
	}
  </style>
 </head>
 <body>
	<div id = "d1">
		<h2 id="hTitle">月牙湾</h2>
		<p>是谁的心啊</p>
		<p>孤单地留下</p>
		<p id = "p3">他还好吗</p>
		<p>我多想爱他</p>
		<p>那永恒的泪凝固成一句话</p>
	</div>
	<div id="d2">
		<h2 id="hTitle2">翻天印</h2>
		<p>一印无名</p>
		<p>吾号翻天</p>
		<p>天地昭昭</p>
		<p>永镇乾坤</p>
	</div>
	请选择您的口味:
	<input type="checkbox" name="eating" value="0">acid
	<input type="checkbox" name="eating" value="1">sweet
	<input type="checkbox" name="eating" value="2">bitter
	<input type="checkbox" name="eating" value="3">spicy
	<input type="checkbox" name="eating" value="4">salty
	<br>
	<button onclick="getParent()">获取title父元素</button>
	<button onclick="getChild()">获取div的子元素数组</button>
	<button onclick="getChildren()">直接获取div的子元素数组</button>
	<button onclick="getNextSibling()">获取下一个兄弟节点</button>
	<button onclick="getNextEleSibling()">获取下一个兄弟节点</button>
	<button onclick="getPreSibling()">获取上一个兄弟节点</button>
	<button onclick="getLabel()">获取文档标签</button>
	<button onclick="getEleLabel()">获取元素标签</button>
	<button onclick="getEleByName()">打印勾选的复选框</button>
	<br>
	作业
	<br>
	/*this表示当前元素*/
	<button id = "buttonSub" onclick="btnOper(this)">-</button>
	<input type="text" name="account" value="1" id="inputNum">
	<button id = "buttonAdd" onclick="btnOper(this)">+</button>
	<br>
	<button id = "buttonSub" onclick="btnOper(this)">-</button>
	<input type="text" name="account" value="1" id="inputNum">
	<button id = "buttonAdd" onclick="btnOper(this)">+</button>
	<br>
	<button id = "buttonSub" onclick="btnOper(this)">-</button>
	<input type="text" name="account" value="1" id="inputNum">
	<button id = "buttonAdd" onclick="btnOper(this)">+</button>
	<br>
	<button id = "buttonSub" onclick="btnOper(this)">-</button>
	<input type="text" name="account" value="1" id="inputNum">
	<button id = "buttonAdd" onclick="btnOper(this)">+</button>
	<br>
	<button id = "buttonSub" onclick="btnOper(this)">-</button>
	<input type="text" name="account" value="1" id="inputNum">
	<button id = "buttonAdd" onclick="btnOper(this)">+</button>
	<script>
		function getParent(){
			var ele = document.getElementById("hTitle");
			var div = ele.parentNode;
			console.log(div);
			div.style.color = 'pink';
		}
		function getChild(){
			var ele = document.getElementById("d1");
			var child = ele.childNodes;
			//child会将换行符或空格，Tab等识别为text，要打印子 元素需要加一层判断；
			for (var i=0;i < child.length ; i ++)
			{
				if (child[i].nodeType == 1)
				{
					console.log(child[i]);
				}
			}
			//console.log(child);
		}
		function getChildren(){
			var ele = document.getElementById("d1");
			var children = ele.children;
			console.log(children);
			for (var i = 0; i < children.length; i++)
			{
				console.log(children[i]);
			}
		}
		function getNextSibling(){
			var ele = document.getElementById("hTitle");
			console.log(ele.nextSibling);
		}
		function getNextEleSibling(){
			var ele = document.getElementById("hTitle");
			console.log(ele.nextElementSibling);
			console.log(ele.nextElementSibling.nextElementSibling);
		}
		function getPreSibling(){
			var ele = document.getElementById("p3");
			console.log('本节点:')
			console.log(ele);
			console.log('上一个兄弟节点是:')
			console.log(ele.previousSibling);
			console.log('上一个兄弟元素节点是:')
			console.log(ele.previousElementSibling);
			console.log('下一个兄弟节点是:')
			console.log(ele.nextSibling);
			console.log('下一个兄弟元素节点是:')
			console.log(ele.nextElementSibling);
		}
		function getLabel(){
			var pElement = document.getElementsByTagName("p");
			for (var i = 0; i < pElement.length; i ++)
			{
				pElement[i].style.background = "yellow";
			}
		}
		function getEleLabel(){
			var pElement2 = document.getElementById("d2").getElementsByTagName("p");
			for (var i = 0; i < pElement2.length;i ++ )
			{
				pElement2[i].style.color = "pink";
			}
		}
		function getEleByName(){
			//获取所有name为eating的元素
			var ele = document.getElementsByName("eating");
			//遍历元素
			for (var i = 0; i<ele.length ; i++ )
			{
				//如果复选框被勾选则打印 
				if (ele[i].checked)
				{
					console.log(ele[i].value);
				}
			}
		}
		//不推荐方法
		var ele = document.getElementsByName("account");
		function subAccount(){
			n = parseInt(ele[0].value);
			if (n > 1)
			{
				ele[0].value = n - 1;
			}else{
				ele.visible = false;
			}
		}
		function addAccount(){
			n = parseInt(ele[0].value);
			ele[0].value = n + 1;
		}
		//推荐的方法
		function btnOper(btn){
			//通过兄弟元素来操作
			//如果是+ ,则获取上一个 元素
			if (btn.innerText == '+')
			{
				++btn.previousElementSibling.value ;
			}else{
			//如果是-则获取下一个元素
				var ele = btn.nextElementSibling;
				var value = Number(ele.value);
				if (value > 1)
				{
					ele.value = value - 1;
				}
			}
		}
	</script>
 </body>
</html>

老王笔记

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
DOM - 的查询节点

1，根据ID查询节点 document.getElementById()2，根据层级节点结构查询 1， parentNode 作用：根据当前节点的层级结构，返回父元素节点； 2， childNodes 作用：根据当前节点的层级结构，返回当前元素的所有子元素数组；注意：能够获取所有的元素节点和文本节点。换行符、空格...
复制链接

扫一扫