JS获取元素节点和子节点的三种方法(dom查询)

深藏阁楼爱情的钟 2023-01-20 15:58 313阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzgzNjYw_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzgzNjYw_size_16_color_FFFFFF_t_70 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzgzNjYw_size_16_color_FFFFFF_t_70 2]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    		<title>Untitled Document</title>
    		<link rel="stylesheet" type="text/css" href="style/css.css" />
    		<script type="text/javascript">
    		
    			/* * 定义一个函数，专门用来为指定元素绑定单击响应函数 * 参数： * idStr 要绑定单击响应函数的对象的id属性值 * fun 事件的回调函数，当单击元素时，该函数将会被触发 */
    			function myClick(idStr , fun){ 
    				var btn = document.getElementById(idStr);
    				btn.onclick = fun;
    			}
    		
    			window.onload = function(){ 
    				
    				//为id为btn01的按钮绑定一个单击响应函数
    				var btn01 = document.getElementById("btn01");
    				btn01.onclick = function(){ 
    					//查找#bj节点
    					var bj = document.getElementById("bj");
    					//打印bj
    					//innerHTML 通过这个属性可以获取到元素内部的html代码
    					alert(bj.innerHTML);
    				};
    				
    				
    				//为id为btn02的按钮绑定一个单击响应函数
    				var btn02 = document.getElementById("btn02");
    				btn02.onclick = function(){ 
    					//查找所有li节点
    					//getElementsByTagName()可以根据标签名来获取一组元素节点对象
    					//这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
    					//即使查询到的元素只有一个，也会封装到数组中返回
    					var lis = document.getElementsByTagName("li");
    					
    					//打印lis
    					//alert(lis.length);
    					
    					//变量lis
    					for(var i=0 ; i<lis.length ; i++){ 
    						alert(lis[i].innerHTML);
    					}
    				};
    				
    				
    				//为id为btn03的按钮绑定一个单击响应函数
    				var btn03 = document.getElementById("btn03");
    				btn03.onclick = function(){ 
    					//查找name=gender的所有节点
    					var inputs = document.getElementsByName("gender");
    					
    					//alert(inputs.length);
    					
    					for(var i=0 ; i<inputs.length ; i++){ 
    						/* * innerHTML用于获取元素内部的HTML代码的 * 对于自结束标签，这个属性没有意义 */
    						//alert(inputs[i].innerHTML);
    						/* * 如果需要读取元素节点属性， * 直接使用 元素.属性名 * 例子：元素.id 元素.name 元素.value * 注意：class属性不能采用这种方式， * 读取class属性时需要使用 元素.className */
    						alert(inputs[i].className);
    					}
    				};
    				
    				//为id为btn04的按钮绑定一个单击响应函数
    				var btn04 = document.getElementById("btn04");
    				btn04.onclick = function(){ 
    					
    					//获取id为city的元素
    					var city = document.getElementById("city");
    					
    					//查找#city下所有li节点
    					var lis = city.getElementsByTagName("li");
    					
    					for(var i=0 ; i<lis.length ; i++){ 
    						alert(lis[i].innerHTML);
    					}
    					
    				};
    				
    				//为id为btn05的按钮绑定一个单击响应函数
    				var btn05 = document.getElementById("btn05");
    				btn05.onclick = function(){ 
    					//获取id为city的节点
    					var city = document.getElementById("city");
    					//返回#city的所有子节点
    					/* * childNodes属性会获取包括文本节点在呢的所有节点 * 根据DOM标签标签间空白也会当成文本节点 * 注意：在IE8及以下的浏览器中，不会将空白文本当成子节点， * 所以该属性在IE8中会返回4个子元素而其他浏览器是9个 */
    					var cns = city.childNodes;
    					
    					//alert(cns.length);
    					
    					/*for(var i=0 ; i<cns.length ; i++){ alert(cns[i]); }*/
    					
    					/* * children属性可以获取当前元素的所有子元素 */
    					var cns2 = city.children;
    					alert(cns2.length);
    				};
    				
    				//为id为btn06的按钮绑定一个单击响应函数
    				var btn06 = document.getElementById("btn06");
    				btn06.onclick = function(){ 
    					//获取id为phone的元素
    					var phone = document.getElementById("phone");
    					//返回#phone的第一个子节点
    					//phone.childNodes[0];
    					//firstChild可以获取到当前元素的第一个子节点（包括空白文本节点）
    					var fir = phone.firstChild;
    					
    					//firstElementChild获取当前元素的第一个子元素
    					/* * firstElementChild不支持IE8及以下的浏览器， * 如果需要兼容他们尽量不要使用 */
    					//fir = phone.firstElementChild;
    					
    					alert(fir);
    				};
    				
    				//为id为btn07的按钮绑定一个单击响应函数
    				myClick("btn07",function(){ 
    					
    					//获取id为bj的节点
    					var bj = document.getElementById("bj");
    					
    					//返回#bj的父节点
    					var pn = bj.parentNode;
    					
    					alert(pn.innerHTML);
    					
    					/* * innerText * - 该属性可以获取到元素内部的文本内容 * - 它和innerHTML类似，不同的是它会自动将html去除 */
    					//alert(pn.innerText);
    					
    					
    				});
    				
    				
    				//为id为btn08的按钮绑定一个单击响应函数
    				myClick("btn08",function(){ 
    					
    					//获取id为android的元素
    					var and = document.getElementById("android");
    					
    					//返回#android的前一个兄弟节点（也可能获取到空白的文本）
    					var ps = and.previousSibling;
    					
    					//previousElementSibling获取前一个兄弟元素，IE8及以下不支持
    					//var pe = and.previousElementSibling;
    					
    					alert(ps);
    					
    				});
    				
    				//读取#username的value属性值
    				myClick("btn09",function(){ 
    					//获取id为username的元素
    					var um = document.getElementById("username");
    					//读取um的value属性值
    					//文本框的value属性值，就是文本框中填写的内容
    					alert(um.value);
    				});
    				
    				
    				//设置#username的value属性值
    				myClick("btn10",function(){ 
    					//获取id为username的元素
    					var um = document.getElementById("username");
    					
    					um.value = "今天天气真不错~~~";
    				});
    				
    				
    				//返回#bj的文本值
    				myClick("btn11",function(){ 
    					
    					//获取id为bj的元素
    					var bj = document.getElementById("bj");
    					
    					//alert(bj.innerHTML);
    					//alert(bj.innerText);
    					
    					//获取bj中的文本节点
    					/*var fc = bj.firstChild; alert(fc.nodeValue);*/
    					
    					alert(bj.firstChild.nodeValue);
    					
    					
    				});
    				
    			};
    			
    		
    		</script>
    	</head>
    	<body>
    		<div id="total">
    			<div class="inner">
    				<p>
    					你喜欢哪个城市?
    				</p>
    
    				<ul id="city">
    					<li id="bj">北京</li>
    					<li>上海</li>
    					<li>东京</li>
    					<li>首尔</li>
    				</ul>
    
    				<br>
    				<br>
    
    				<p>
    					你喜欢哪款单机游戏?
    				</p>
    
    				<ul id="game">
    					<li id="rl">红警</li>
    					<li>实况</li>
    					<li>极品飞车</li>
    					<li>魔兽</li>
    				</ul>
    
    				<br />
    				<br />
    
    				<p>
    					你手机的操作系统是?
    				</p>
    
    				<ul id="phone"><li>IOS</li> <li id="android">Android</li><li>Windows Phone</li></ul>
    			</div>
    
    			<div class="inner">
    				gender:
    				<input class="hello" type="radio" name="gender" value="male"/>
    				Male
    				<input class="hello" type="radio" name="gender" value="female"/>
    				Female
    				<br>
    				<br>
    				name:
    				<input type="text" name="name" id="username" value="abcde"/>
    			</div>
    		</div>
    		<div id="btnList">
    			<div><button id="btn01">查找#bj节点</button></div>
    			<div><button id="btn02">查找所有li节点</button></div>
    			<div><button id="btn03">查找name=gender的所有节点</button></div>
    			<div><button id="btn04">查找#city下所有li节点</button></div>
    			<div><button id="btn05">返回#city的所有子节点</button></div>
    			<div><button id="btn06">返回#phone的第一个子节点</button></div>
    			<div><button id="btn07">返回#bj的父节点</button></div>
    			<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
    			<div><button id="btn09">返回#username的value属性值</button></div>
    			<div><button id="btn10">设置#username的value属性值</button></div>
    			<div><button id="btn11">返回#bj的文本值</button></div>
    		</div>
    	</body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzgzNjYw_size_16_color_FFFFFF_t_70]: /images/20221021/fc549857dc604f19b66cb829f13d3fb4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzgzNjYw_size_16_color_FFFFFF_t_70 1]: /images/20221021/fc5f321ca2424ff88f4792afa2c36e8f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NzgzNjYw_size_16_color_FFFFFF_t_70 2]: /images/20221021/5ef45e2f485b4c76bf9d0a63182285df.png