前端---js（自学笔记18)（DOM介绍，事件介绍、文档加载、dom查询）

最新推荐文章于 2023-03-07 23:46:54 发布

ABU_MOlI_ITUI

最新推荐文章于 2023-03-07 23:46:54 发布

阅读量5.2k

点赞数

分类专栏： javaScript 文章标签： javascript

本文链接：https://blog.csdn.net/ABU_MOlI_ITUI/article/details/107480732

版权

javaScript 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

DOM介绍：

DOM----document object model 文档对象模型，可以帮助js操作HTML。

节点：node 构成html文档最基本的单元。

常用节点分为四个：文档节点（整个HTML文档）、属性节点（元素的属性，比如id）、元素节点（比如h1标签等）、文本节点（文字或者元素标签包括的内容）。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title> </title>
	</head>
	<body>
		<button id="btn">我是一个按钮</button>
		<script type="text/javascript">
            //获取元素
			var btn = document.getElementById("btn");
             //对元素的文本进行修改
			btn.innerHTML = "I'm Button";
		</script>
	</body>
</html>

事件介绍：

事件就是用户和浏览器进行交互，比如点击按钮。我们可以在js的代码中，在对应事件的属性上设置js，这样当事件被触发时，这些代码就会被执行。

<button onclick="alert('ddd')"></button>
//结构和行为耦合，不推荐使用

可以为事件绑定处理函数的形式进行处理响应事件，当事件被触发时，调用函数

<body>
		<button id='btn'>点击</button>
		<script type="text/javascript">
			var btn = document.getElementById('btn')
//			btn.onclick =function(){
//				alert('你好');
//			};
			//点击俩次
//			btn.ondblclick =function(){
//				alert('你好');
//			};
			
			//移动过去就会有对应发生
			btn.onmousemove =function(){
				alert('你好');
			};
		</script>
	</body>

文档的加载：

浏览器加载页面时，是从上到下加载，所以注意编写顺序。将script编写在body里，目的是为让页面加载完毕之后在执行js代码。

如果你想将script写在head里，就需要onload是确保所有页面都加载完毕之后，才会被触发。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>邮箱正则</title>
		<script type="text/javascript">
			window.onload= function(){
					var btn = document.getElementById('btn')
//			btn.onclick =function(){
//				alert('你好');
//			};
			//点击俩次
//			btn.ondblclick =function(){
//				alert('你好');
//			};
			
			//移动过去就会有对应发生
			btn.onmousemove =function(){
				alert('你好');
			};
			}
		</script>
	</head>
	<body>
		<button id='btn'>点击</button>
	</body>
</html>

dom查询：

获取元素节点:

通过document对象调用

getElementById()----通过id获取一个元素节点对象
getElementsByTagName()----通过标签名获取一组元素节点对象
getElementsByName()----通过name属性获取一组元素节点对象

获取元素节点的子节点：

通过具体的元素节点调用：

getElementsByTagName()-----返回当前子节点的指定的标签名后代节点
childNodes------表示当前子节点的所有节点
firstChild-------表示当前节点的第一个子节点
lastChild------表示当前节点的最后一个子节点

获取父节点和兄弟节点：

通过具体的节点调用

parentNode-------表示当前节点的父节点
previousSibling-----表示当前节点的前一个兄弟节点
nextSibling-------表示当前节点的后一个兄弟节点

练习：

index.html 页面中：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>dom查询</title>
		<link rel="stylesheet" type="text/css" href="index.css" />
		<script type="text/javascript">
//			定义一个全局变量,首先定义一个函数,专门用来为指定元素绑定单击响应函数,
//			参数:idStr要绑定单击响应函数的对象的id属性值
			// fun 事件的回调函数，当单击元素时，该函数将会被触发
			function myClick(idStr, fun){
				var btn = document.getElementById(idStr);
				btn.onclick =fun;
			}
			
			
			
			//加载页面
           window.onload =function(){
           	//为btn01绑定一个单响应函数
           	var btn01 = document.getElementById('btn01');
           	btn01.onclick=function(){
           		//测试打印
           		var bj =document.getElementById('bj');
				//alert('bj');
				//innerHTML这个属性可以帮助我们获得元素内部HTML代码内容
				alert(bj.innerHTML);
           	}
           	
           	//btn02绑定一个单响应函数
           	var btn02 =document.getElementById('btn02');
           	btn02.onclick = function(){
           		//查找所有li节点
           		var lis =document.getElementsByTagName('li')
				//alert(lis.length);
           		for(i=0;i<lis.length; i++){
           			alert(lis[i].innerHTML)
           		}
           		
           	}
           	
           		//btn03绑定一个单响应函数
           		var btn03 =document.getElementById('btn03');
           		btn03.onclick = function(){
           			//查找name=gender的所有节点
           			var inputs =document.getElementsByName('gender');
				//alert(inputs.length);
					for(i=0;i<inputs.length; i++){
						//可以通过.name  .value  .id等获取内部元素的值，但是需要注意不可以.class, 读取class属性时，用.classname
						//alert(inputs[i].name); ---获取名字
						alert(inputs[i].value);  //---获取值
						//  alert(inputs[i].innerHTML);  ---获取元素内部代码，对于自结束标签，没有意义
					    
					}
           		}
           		
           		var btn04 =document.getElementById('btn04');
           		btn04.onclick =function(){
        			//查找#city下所有li节点
           			var citys =document.getElementById('city');
                    var list=city.getElementsByTagName("li");
					//alert(list.length);
					for(i=0; i<list.length;i++){
						alert(list[i].innerHTML);
					}
           		}
           		
           		var btn05 =document.getElementById('btn05');
           		btn05.onclick = function(){
           			//返回#city的所有子节点
           			var city = document.getElementById('city');
//         			childNodes会获取包括文本节点在的所有节点
//         			根据dom标签与标签间的空白也会当成文本节点
//         			注意,在IE8及以下的浏览器中,不会将空白文本当成子节点,
//         			所以该属性在IE8中返回4个子元素,其他浏览器9个
           			//var cns = city.childNodes;
           			//alert(cns.length);
           			//children属性可以获取当前元素的所有子元素
           			var cns2 =city.children;
           			alert(cns2.length);
           		}
           		
           		
           		
           		var btn06 =document.getElementById('btn06');
           		btn06.onclick = function(){
           			var phone =document.getElementById('phone');
           			//返回#phone的第一个子节点
           			//phone.childNodes[0];
           			//firstChild可以获取当前元素的第一个子节点（包括空白文本节点）
           			var fir = phone.firstChild;
           			//firstElementChild不支持IE8及以下的浏览器
           			//如果需要兼容尽量不要使用
           			var fir1 =phone.firstElementChild;
           			alert(fir1);
           		}
           		
           		//返回#bj的父节点
           		myClick("btn07", function(){
           			//alert("hellow");
           			var bj =document.getElementById("bj");
           			var pn = bj.parentNode;
           			//innerText--该属性可以获取到元素内部的文本内容
           			//他和innerHTML类似，不同的是它会自动将HTML的标签去掉
           			alert(pn.innerText);
           		});
           		
           		myClick("btn08", function(){
           			//返回#android的前一个兄弟节点
           			var and = document.getElementById("android");
           			 var ps = and.previousSibling;
           			 alert(ps);
           		});
           		myClick("btn09", function(){
           			//读取#username的value属性值
           			var read =document.getElementById("username");
           			alert(read.value);
           		});
           		myClick("btn10", function(){
           			//设置#username的value属性值
           			var read =document.getElementById("username");
           			read.value = "你好！欢迎来到我的世界"
           		});
           		myClick("btn11", function(){
           			//返回#bj的文本值
           			var bj =document.getElementById("bj");
           			alert(bj.innerHTML);
           		});
           }
		</script>
	</head>
	<body>
		<div class='left-on'>
			<div >
			<p>你喜欢那个城市？</p>
			<ul id='city'>
				<li id='bj'>北京</li>
				<li>上海</li>
				<li>东京</li>
				<li>首尔</li>
			</ul>
			</div>
			<div id='game'>
			<p>你喜欢那个单机游戏？</p>
			<ul>
				<li>红警</li>
				<li>换装</li>
				<li>飞车</li>
				<li>qq炫舞联盟</li>
			</ul>
			</div>
			<div id='phone'>
			<p>你的手机操作系统？</p>
			<ul>
				<li>IOS</li>
				<li id='android'>Android</li>
				<li>Windows Phone</li>
			</ul>
			</div>
		</div>
		<div class='left-down'>
			gender:
			<input type="radio" name="gender" value="male" />
			Male
			<input type="radio" name="gender" value="female" />
			Female
			<br>
			<br>
				name:
			<input type="text" name="gender" id ="username" value="asdf" />
		</div>
		<div class='right'>
			<button id='btn01'>查找#bj节点</button></br>
			<button id='btn02'>查找所有li节点</button></br>
			<button id='btn03'>查找name=gender的所有节点</button></br>
			<button id='btn04'>查找#city下所有li节点</button></br>
			<button id='btn05'>返回#city的所有子节点</button></br>
			<button id='btn06'>返回#phone的第一个子节点</button></br>
			<button id='btn07'>返回#bj的父节点</button></br>
			<button id='btn08'>返回#android的前一个兄弟节点</button></br>
			<button id='btn09'>读取#username的value属性值</button></br>
			<button id='btn10'>设置#username的value属性值</button></br>
			<button id='btn11'>返回#bj的文本值</button></br>
		</div>
	</body>
</html>

index.css

.left-on{
	width: 300px;
	height: 240px;
	float: left;
	border:2px solid black ;
}
.left-on li{
list-style: none;
display: inline-block;
background-color: greenyellow;
border: 1px solid black;
}
.left-down{
	float: left;
	width: 300px;
	margin-left: -305px;
	margin-top: 260px;
	border:2px solid black ;
}
.right{
	height: 300px;
	margin-left: 10px;
	float: left;
	border:2px solid black ;
}
.right button{
	width: 300px;
	height: 50;
}

结果：