文档对象模型DOM

一、DOM

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button id="btn">我是一个按钮</button>
		<script type="text/javascript">
			/*
			 * 浏览器提供 文档节点 对象这个对象是window属性
			 * 可以在页面中直接使用,文档节点代表的是整个网页
			 */
			console.log(document);
			
			//获取到button对象
			var btn = document.getElementById("btn");
			
			//修改按钮的文字
			btn.innerHTML = "I'm Button";	
		</script>
	</body>
</html>

二、事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			可以在事件对应的属性中设置一些js代码,这样当事件被触发时,这些代码将会执行	
			这种写法称为结构和行为耦合,不方便维护,不推荐使用	
		-->
		<button id="btn" onmousemove="alert('讨厌,你点我干嘛!');">我是一个按钮</button>
		<button id="btn2">我是一个按钮</button>
		<script type="text/javascript">	
			/*
			 * 事件,就是用户和浏览器之间的交互行为,
			 * 	比如:点击按钮,鼠标移动、关闭窗口。。。
			 */
			
			//获取按钮对象
			var btn = document.getElementById("btn2");
			
			/*
			 * 可以为按钮的对应事件绑定处理函数的形式来响应事件
			 * 	这样当事件被触发时,其对应的函数将会被调用
			 */
			
			//绑定一个单击事件,像这种为单击事件绑定的函数称为单击响应函数
			btn.onclick = function(){
				btn.innerText="I'm button";
			};	
		</script>
	</body>
</html>

三、文档的加载

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 * 浏览器在加载一个页面时,是按照自上向下的顺序加载的,
			 * 	读取到一行就运行一行,如果将script标签写到页面的上边,
			 * 	在代码执行时,页面还没有加载,页面没有加载DOM对象也没有加载
			 * 	会导致无法获取到DOM对象
			 */
		
			/*
			 * onload事件会在整个页面加载完成之后才触发
			 * 为window绑定一个onload事件:
			 * 		该事件对应的响应函数将会在页面加载完成之后执行,
			 * 		这样可以确保代码执行时所有的DOM对象已经加载完毕了
			 */
			window.onload = function(){
				//获取id为btn的按钮
				var btn = document.getElementById("btn");
				//为按钮绑定一个单击响应函数
				btn.onclick = function(){
					alert("hello");
				};
			};
		</script>
	</head>
	<body>
		<button id="btn">点我一下</button>
		
		<!--<script type="text/javascript">
			/*
			 * 将js代码编写到页面的下部就是为了可以在页面加载完毕以后再执行js代码
			 */
			//获取id为btn的按钮
			var btn = document.getElementById("btn");
			//为按钮绑定一个单击响应函数
			btn.onclick = function(){
				alert("hello");
			};	
		</script>-->
	</body>
</html>

四、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>DOM查询</title>
		<link rel="stylesheet" type="text/css" href="style/css.css" />
		<script type="text/javascript">
			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");
					
					//打印inputs的长度
					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);
					}
				};
			};
		</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>
	</body>
</html>

五、图片切换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">		
			*{
				margin: 0;
				padding: 0;
			}
			
			#outer{
				width: 500px;
				margin: 50px auto;
				padding: 10px;
				background-color: greenyellow;
				/*设置文本居中*/
				text-align: center;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				// 点击按钮切换图片
				//获取两个按钮
				var prev = document.getElementById("prev");
				var next = document.getElementById("next");
				
				/*
				 * 要切换图片就是要修改img标签的src属性
				 */
				
				//获取img标签
				var img = document.getElementsByTagName("img")[0];
				
				//创建一个数组,用来保存图片的路径
				var imgArr = ["img/1.jpg" , "img/2.jpg" , "img/3.jpg" , "img/4.jpg" ,"img/5.jpg"];
				
				//创建一个变量,来保存当前正在显示的图片的索引
				var index = 0;
				
				//获取id为info的p元素
				var info = document.getElementById("info");
				//设置提示文字
				info.innerHTML = "一共 "+imgArr.length+" 张图片,当前第 "+(index+1)+" 张";
				
				
				//分别为两个按钮绑定单击响应函数
				prev.onclick = function(){
					// 切换到上一张,索引自减
					index--;
					//判断index是否小于0
					if(index < 0){
						index = imgArr.length - 1;
					}
					img.src = imgArr[index];
					
					//当点击按钮以后,重新设置信息
					info.innerHTML = "一共 "+imgArr.length+" 张图片,当前第 "+(index+1)+" 张";
				};
				
				next.onclick = function(){
					// 切换到下一张是index自增
					index++;
					if(index > imgArr.length - 1){
						index = 0;
					}
					//切换图片就是修改img的src属性
					//要修改一个元素的属性 元素.属性 = 属性值
					img.src = imgArr[index];
					
					//当点击按钮以后,重新设置信息
					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>

六、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></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为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;
					alert(ps);
					//previousElementSibling获取前一个兄弟元素,IE8及以下不支持
					var pe = and.previousElementSibling;
					alert(pe);
				});
				
				//读取#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="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>

 

posted on 2019-07-19 20:34  lina2014  阅读(116)  评论(0编辑  收藏  举报

导航