javascript基础（DOM查询）（二十六）

最新推荐文章于 2023-07-20 04:25:16 发布

咸鸭蛋炒饭

最新推荐文章于 2023-07-20 04:25:16 发布

阅读量442

点赞数

分类专栏： HTML5基础篇文章标签： javascript html 经验对象 dom

本文链接：https://blog.csdn.net/u010853130/article/details/54928322

版权

HTML5基础篇专栏收录该内容

121 篇文章 7 订阅

订阅专栏

1.DOM查询：

<!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">
		
			/*
			 * 定义一个函数，专门用来为指定id的元素绑定单击响应函数
			 * 	参数：
			 * 		idStr 要绑定的元素的id属性值
			 * 		fun  要绑定的单击响应函数，该函数在元素的单击事件触发时执行
			 */
			function myClick(idStr , fun){
				
				//根据idStr来获取元素
				var btn = document.getElementById(idStr);
				
				//为btn绑定单击响应函数
				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节点
					var lis = document.getElementsByTagName("li");
					
					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 gender = document.getElementsByName("gender");
					
					//遍历gender
					for(var i=0 ; i<gender.length ; i++){
						//innerHTML不能用于自结束标签
						//alert(gender[i].innerHTML);
						/*
						 * 读取元素的属性：
						 * 		元素.属性名
						 * 		元素.id 元素.value 元素.src 元素.type
						 * 
						 * 		由于class是JS中的保留字，所以不能直接.class来读取class属性值
						 * 			而需要使用className代替
						 * 
						 */
						//alert(gender[i].className);
						alert(gender[i].value);
					}
					
				};
				
				//为id为btn04的按钮绑定一个单击响应函数
				var btn04 = document.getElementById("btn04");
				btn04.onclick = function(){
					
					//获取id为city的节点
					var city = document.getElementById("city");
					
					//查找#city下所有li节点
					var lis = city.getElementsByTagName("li");
					
					alert(lis.length);
					
				};
				
				//为id为btn05的按钮绑定一个单击响应函数
				myClick("btn05",function(){
					//获取id为city的节点
					var city = document.getElementById("city");
					
					//返回#city的所有子节点
					var cns = city.childNodes;
					
					/*
					 * 根据DOM标准，空白的内容也会被当成子节点
					 * 	注意在IE8及以下的浏览器中没有将空白当成子节点
					 * 	所以IE8中childNodes不会返回空白的节点
					 */
					
					//遍历cns
					/*for(var i=0 ; i<cns.length ; i++){
						alert(cns[i]);
					}*/
					
					//alert(cns.length);
					
					/*
					 * children可以用来获取当前元素的所有子元素（不包括文本）
					 */
					var cr = city.children;
					
					alert(cr.length);
					
				});
				
				
				//返回#phone的第一个子节点
				myClick("btn06",function(){
					
					//获取id为phone的元素
					var phone = document.getElementById("phone");
					
					//获取它的第一个子节点(包括文本)
					var fc = phone.firstChild;
					
					//alert(fc.innerHTML);
					
					//获取第一个子元素（不包括文本）
					/*
					 * firstElementChild不支持IE8及以下的浏览器
					 */
					var fe = phone.firstElementChild;
					
					alert(fe);
					
				});
				
				//返回#bj的父节点
				myClick("btn07",function(){
					
					//获取id为bj的元素
					var bj = document.getElementById("bj");
					
					//获取bj的父节点
					var pn = bj.parentNode;
					
					alert(pn.innerHTML);
					
				});
				
				//返回#android的前一个兄弟节点
				myClick("btn08",function(){
					
					//获取id为android的节点
					var android = document.getElementById("android");
					
					//获取它的前一个兄弟节点
					//会将空白的文本当前兄弟节点
					var ps = android.previousSibling;
					
					alert(ps);
					
					
				});
				
				//读取#username的value属性值
				myClick("btn09",function(){
					//获取id为username的元素
					var um = document.getElementById("username");
					
					alert(um.value);
					
				});
				
				//设置#username的value属性值
				myClick("btn10",function(){
					var um = document.getElementById("username");
					
					um.value = "太阳天空照";
					
				});
				
				//返回#bj的文本值
				myClick("btn11",function(){
					
					//获取bj
					var bj = document.getElementById("bj");
					
					//使用innerHTML
					//alert(bj.innerHTML);
					
					/*var bjText = bj.firstChild;
					alert(bjText.nodeValue);*/
					
					//元素.firstChild.nodeValue
					//alert(bj.firstChild.nodeValue);
					
					/*
					 * innerText可以用来获取标签内部的文本内容
					 * 	它会自动去除HTML标签
					 */
					//alert(bj.innerText);
					
					//获取id为city的节点
					var city = document.getElementById("city");
					
					//alert(city.innerHTML);
					alert(city.innerText);
					
				});
				
			};
			
			
		
		</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>

外部css样式代码：

@CHARSET "UTF-8";

body {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
}

button {
	width: 300px;
	margin-bottom: 10px;
}

#btnList {
	float:left;
}

#total{
	width: 450px;
	float:left;
}

ul{
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

.inner li{
	border-style: solid;
	border-width: 1px;
	padding: 5px;
	margin: 5px;
	background-color: #99ff99;
	float:left;
}

.inner{
	width:400px;
	border-style: solid;
	border-width: 1px;
	margin-bottom: 10px;
	padding: 10px;
	float: left;
}

练习：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			#outer{
				width: 500px;
				margin: 0 auto;
				padding: 10px;
				background-color: greenyellow;
				text-align: center;
			}
			
		</style>
		
		<script type="text/javascript">
			
			window.onload = function(){
				
				/*
				 * 点击按钮切换图片
				 */
				
				//获取img标签
				var img = document.getElementsByTagName("img")[0];
				
				//获取两个button
				var prev = document.getElementById("prev");
				var next = document.getElementById("next");
				
				//创建一个数组，用来保存图片的路径
				var imgArr = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
				
				//创建一个变量，来记录当前图片的索引
				var index = 0;
				
				//设置图片的信息
				var info = document.getElementById("info");
				
				//向info中设置信息
				info.innerHTML = "一共有 "+imgArr.length+" 张图片，当前是第 "+(index+1)+" 张";
				
				//为两个按钮来绑定单击响应函数
				prev.onclick = function(){
					
					//使index自减
					index--;
					
					//判断index的值，是否合法
					if(index < 0){
						index = imgArr.length - 1;
					}
					
					//修改图片的路径
					img.src = imgArr[index];
					
					//更新info中的信息
					info.innerHTML = "一共有 "+imgArr.length+" 张图片，当前是第 "+(index+1)+" 张";
				};
				
				next.onclick = function(){
					
					//使index自增
					index++;
					
					//判断index值是否合法
					if(index > imgArr.length - 1){
						index = 0;
					}
					
					//点击next以后，切换图片为2.jpg
					//修改图片的src属性，修改元素的属性：元素.属性名 = 属性值
					//要想切换图片就是修改img的src属性，src属性一变，浏览器就会去重新加载图片
					img.src = imgArr[index];
					
					//更新info中的信息
					info.innerHTML = "一共有 "+imgArr.length+" 张图片，当前是第 "+(index+1)+" 张";
					
				};
				
				
				
			};
			
			
		</script>
	</head>
	<body>
		
		<div id="outer">
			
			<p id="info"></p>
			
			<img src="img/1.jpg" alt="冰棍"/>
			
			<button id="prev">上一张</button>
			<button id="next">下一张</button>
			
		</div>
		
	</body>
</html>

注：图片自己随便找就行