JavaScript的学习之DOM查询（二）

最新推荐文章于 2024-08-14 15:20:01 发布

花随叶落

最新推荐文章于 2024-08-14 15:20:01 发布

阅读量604

点赞数 13

分类专栏： JavaScript篇文章标签：学习 javascript 前端

本文链接：https://blog.csdn.net/weixin_58573288/article/details/140039591

版权

JavaScript篇专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一、获取元素节点的子节点

通过具体的元素节点调用

getElementByTagName()：是一个方法，返回当前节点的指定标签名后代节点
childNodes：一个属性，表示当前节点的所有子节点
firstChild：一个属性，表示当前节点的第一个子节点
lastChild：一个属性，表示当前节点的最后一个子节点

核心JS代码

<script>
	//完成下面的按钮的功能
	window.onload = function() {
		var btn01 = document.getElementById('btn01');
		// 为id为btn01的按钮绑定一个单击响应函数
		btn01.onclick = function() {
			// 查找#bj节点
			var bj = document.getElementById('bj');
			alert(bj.innerHTML);
		};
		// 查找所有li节点
		var btn02 = document.getElementById('btn02');
		btn02.onclick = function(){
			var lis = document.getElementsByTagName('li');
			// getElementsByTagName获得的是一组元素节点对象
			for(var i = 0;i<lis.length;i++){
				alert(lis[i].innerHTML);
			}
		};
		// 查找name=gender的所有节点
		var btn03 = document.getElementById('btn03');
		btn03.onclick = function(){
			var inputs = document.getElementsByName('gender');
			for (var i=0;i<inputs.length;i++){
				// 对于自结标签可以直接通过标签名来获取
				// 对于class属性不能直接.class，只能通过className方式
				alert(inputs[i].value);
			}
		}
		// 查找#city下所有li节点
		var btn04 = document.getElementById('btn04');
		btn04.onclick = function(){
			var city = document.getElementById('city');
			var lis = city.getElementsByTagName("li");
			for(var i=0;i<lis.length;i++){
				alert(lis[i].innerHTML);
			}
		}
		// 返回#city所有子节点
		var btn05 = document.getElementById('btn05');
		btn05.onclick = function(){
			var city = document.getElementById('city');
			var lis = city.childNodes;
			// children这个表示可以获取当前元素的所有子元素，不包括文本节点
			var lis2 = city.children;
			for(var i=0;i<lis.length;i++){
				// childNodes属性会获取包括文本节点在内的所有节点
				// 根据DOM标签与标签之间空白也会当成文本节点
				// 注意：再IE8及以下的版本浏览器中，不会将空白文本当成子节点
				// 所以该属性在IE8中会返回4个子元素
				alert(lis2[i].innerHTML);
			}
		}
		// 返回#phone的第一个子节点
		var btn06 = document.getElementById('btn06');
		btn06.onclick = function(){
			var phone = document.getElementById('phone');
			// firstChild是获取当前元素的第一个子节点（包括文本节点）
			var fir = phone.firstChild;
			// firstElementChild是获取当前元素的第一个子元素
			// 但是不支持IE8及以下的浏览器使用；
			var fir1 = phone.firstElementChild;
			alert(fir1);
		}
		// 返回#bj的父节点
		// 返回#android的前一个兄弟节点
		// 返回#username的value属性值
		// 设置#username的value属性值
		// 返回#bj的文本值
	}
</script>

代码示例

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script>
			//完成下面的按钮的功能
			window.onload = function() {
				var btn01 = document.getElementById('btn01');
				// 为id为btn01的按钮绑定一个单击响应函数
				btn01.onclick = function() {
					// 查找#bj节点
					var bj = document.getElementById('bj');
					alert(bj.innerHTML);
				};
				// 查找所有li节点
				var btn02 = document.getElementById('btn02');
				btn02.onclick = function(){
					var lis = document.getElementsByTagName('li');
					// getElementsByTagName获得的是一组元素节点对象
					for(var i = 0;i<lis.length;i++){
						alert(lis[i].innerHTML);
					}
				};
				// 查找name=gender的所有节点
				var btn03 = document.getElementById('btn03');
				btn03.onclick = function(){
					var inputs = document.getElementsByName('gender');
					for (var i=0;i<inputs.length;i++){
						// 对于自结标签可以直接通过标签名来获取
						// 对于class属性不能直接.class，只能通过className方式
						alert(inputs[i].value);
					}
				}
				// 查找#city下所有li节点
				var btn04 = document.getElementById('btn04');
				btn04.onclick = function(){
					var city = document.getElementById('city');
					var lis = city.getElementsByTagName("li");
					for(var i=0;i<lis.length;i++){
						alert(lis[i].innerHTML);
					}
				}
				// 返回#city所有子节点
				var btn05 = document.getElementById('btn05');
				btn05.onclick = function(){
					var city = document.getElementById('city');
					var lis = city.childNodes;
					// children这个表示可以获取当前元素的所有子元素，不包括文本节点
					var lis2 = city.children;
					for(var i=0;i<lis.length;i++){
						// childNodes属性会获取包括文本节点在内的所有节点
						// 根据DOM标签与标签之间空白也会当成文本节点
						// 注意：再IE8及以下的版本浏览器中，不会将空白文本当成子节点
						// 所以该属性在IE8中会返回4个子元素
						alert(lis2[i].innerHTML);
					}
				}
				// 返回#phone的第一个子节点
				var btn06 = document.getElementById('btn06');
				btn06.onclick = function(){
					var phone = document.getElementById('phone');
					// firstChild是获取当前元素的第一个子节点（包括文本节点）
					var fir = phone.firstChild;
					// firstElementChild是获取当前元素的第一个子元素
					// 但是不支持IE8及以下的浏览器使用；
					var fir1 = phone.firstElementChild;
					alert(fir1);
				}
				// 返回#bj的父节点
				// 返回#android的前一个兄弟节点
				// 返回#username的value属性值
				// 设置#username的value属性值
				// 返回#bj的文本值
			}
		</script>
	</head>
	<body>
		<div class="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">
				genner:
				<input type="radio" name="gender" value="male" />
				Male:
				<input type="radio" name="gender" value="female" />
				Female:
				<br />
				<br />
				name:
				<input type="text" name="name" value="abcd" />
			</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>