js-获取父节点和兄弟节点——--具体节点调用

最新推荐文章于 2024-05-03 11:08:18 发布

¡Venceremo

最新推荐文章于 2024-05-03 11:08:18 发布

阅读量1.3k

点赞数

文章标签： javascript java html 1024程序员节

本文链接：https://blog.csdn.net/weixin_47295886/article/details/127479917

版权

parentNode：表示当前节点的父节点

previousSibling：表示当前节点的前一个兄弟节点————会获取空白部分

nextSibling：表示当前节点的后一个兄弟节点

//innerText会自动将html去除——没有标签

previousElementSibling：获取前一个兄弟元素：ie8以上才支持

文本框的value属性值就是文本框填写的内容

文档节点的nodeValue是文本内容

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<script>
		//btnid 要绑定的单击函数对象的id属性
		//fun事件回调函数
		function myClick(btnid,fun){
			var btnid = document.getElementById(btnid)
			btnid.onclick = fun;
		}

		window.onload = function () {
			fun1=function () {
				var bj = document.getElementById("bj");
				alert(bj.innerHTML);
			};
			myClick("btn01",fun1);

			fun2 = function () {
				var li = document.getElementsByTagName("li");//返回的值是类数组
				//li.length===封装到数组
				for (var i = 0; i < 11; i++) {
					alert(li[i].innerHTML);
				}
			};
			myClick("btn02",fun2);

			fun3 = function () {
				var gender = document.getElementsByName("gender");//返回的值是类数组
				//innerHTML对于自结束标签没有意义 a innerHTML /a 
				for (var i = 0; i < gender.length; i++) {
					//使用读取属性 读.属性 元素.name  .value
					//除了class属性 需要使用.className
					alert(gender[i].value);
				}
			};
			myClick("btn03",fun3);

			
			fun4 = function () {
				var city = document.getElementById("city");
				var city_li = city.getElementsByTagName("li");//返回的值是类数组
				//innerHTML对于自结束标签没有意义 a innerHTML /a 
				for (var i = 0; i < city_li.length; i++) {
					//使用读取属性 读.属性 元素.name  .value
					//除了class属性 需要使用.className
					alert(city_li[i].innerHTML);
				}
			};
			myClick("btn04",fun4);

			fun5 = function () {
				var city = document.getElementById("city");
				//childNodes获取包括文本节点的所有子节点
				var cns = city.children;//返回的值是类数组
				alert(cns.length);

			};
			myClick("btn05",fun5);

			fun6 = function () {
				var phone = document.getElementById("phone");
				//childNodes获取包括文本节点的所有子节点
				var fir = phone.firstChild;//返回的值是类数组
				alert(fir.innerHTML);

			};
			myClick("btn06",fun6);

			fun7= function () {
				var bj = document.getElementById("bj");
				var parent = bj.parentNode;//返回对象
				//innerText会自动讲将html去除
				alert(parent.innerText);

			};
			myClick("btn07",fun7);

			fun8= function () {
				var android = document.getElementById("android");
				
				var pre_b = android.previousSibling;//返回的值是类数组
				alert(pre_b.innerHTML);

			};
			myClick("btn08",fun8);
			
			fun9= function () {
				var username = document.getElementById("username");
				
				alert(username.value);

			};
			myClick("btn09",fun9);
			fun10= function () {
				var username = document.getElementById("username");
				
			username.value="你是好人"

			};
			myClick("btn10",fun10);
			fun11= function () {
				var bj = document.getElementById("bj");
				//alert(bj.innerHTML);
				//alert(bj.innerText);
				var fc=bj.firstChild;//获取文本节点
				console.log(fc.nodeValue)//nodeValue文本内容

			};
			myClick("btn11",fun11);
		};
	
	</script>
</head>
<style>
	#all {
		width: 1000px;
		margin: 10px auto;
	}

	#left {
		width: 544px;
		height: 670px;
		float: left;
		margin: 10px auto;
	}

	#l_top {
		border: solid black 1px;
		height: 300px;
		width: 500px;
		padding: 20px;
	}

	#l_top ul {
		padding: 0 10px;
	}

	#l_top ul li {
		width: 50px;
		border: black solid 1px;
		background-color: #bfa;
		margin: 10px;
		list-style-type: none;
		display: inline;
	}

	#l_button {
		margin-top: 10px;
		border: solid black 1px;
		height: 40px;
		width: 500px;
		padding: 20px;
	}

	#right {
		float: left;
	}

	#right ul li {
		list-style-type: none;
		margin: 10px;
	}

	#right ul li button {
		height: 40px;
		width: 300px;
	}
</style>

<body>
	<div id="all">
		<div id="left">
			<div id="l_top">
				<h2>你喜欢哪个城市？</h2>
				<ul id="city">
					<li id="bj">北京</li>
					<li>上海</li>
					<li>东京</li>
					<li>首尔</li>
				</ul>
				<h2>你喜欢哪个单击游戏？</h2>
				<ul>
					<li>红警</li>
					<li>实况</li>
					<li>极品飞车</li>
					<li>魔兽</li>
				</ul>
				<h2>你手机的操作系统是？</h2>
				<ul id="phone"><li>IOS</li><li id="android">Android</li>
					<li>Windows Phone</li>
				</ul>
			</div>
			<div id="l_button">
				<form action="">
					gender: <input type="radio" name="gender" value="Male">Male
					<input type="radio" name="gender" value="Female">Female
					<br>
					name: <input type="text" id="username" value="jhisdjo">
				</form>
			</div>
		</div>
		<div id="right">
			<ul>
				<li>
					<button id="btn01">查找所有#bj节点</button>
				</li>
				<li>
					<button id="btn02">查找所有li节点</button>
				</li>
				<li>
					<button id="btn03">查找name=gender的所有节点</button>
				</li>
				<li>
					<button id="btn04">查找#city下的所有li节点</button>
				</li>
				<li>
					<button id="btn05">返回#city下的所有节点</button>
				</li>
				<li>
					<button id="btn06">返回#phone的第一个子节点</button>
				</li>
				<li>
					<button id="btn07">返回#bj的父节点</button>
				</li>
				<li>
					<button id="btn08">返回#android的前一个兄弟节点</button>
				</li>
				<li>
					<button id="btn09">返回#username的value属性值</button>
				</li>
				<li>
					<button id="btn10">设置#username的value属性值</button>
				</li>
				<li>
					<button id="btn11">返回#bj的文本值</button>
				</li>
			</ul>

		</div>
	</div>
</body>

</html>

¡Venceremo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js-获取父节点和兄弟节点——--具体节点调用

previousElementSibling：获取前一个兄弟元素：ie8以上才支持。//innerText会自动将html去除——没有标签。previousSibling：表示当前节点的。文本框的value属性值就是文本框填写的内容。parentNode：表示当前节点的父节点。文档节点的nodeValue是文本内容。前一个兄弟节点————会获取空白部分。nextSibling：表示当前节点。
复制链接

扫一扫