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

港控/mmm° 2023-02-28 11:15 2阅读 0赞

# 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>

![20200721093210141.png][]

# 事件介绍： #

事件就是用户和浏览器进行交互，比如点击按钮。我们可以在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属性获取一组元素节点对象

**获取元素节点的子节点：**

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

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

**获取父节点和兄弟节点：**

通过具体的节点调用

1.  parentNode-------表示当前节点的父节点
2.  previousSibling-----表示当前节点的前一个兄弟节点
3.  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;
    }

结果：

![20200727115409910.gif][]

[20200721093210141.png]: /images/20230209/becd4b15ff50442995031a2e7bcc033f.png
[20200727115409910.gif]: /images/20230209/ebf85a84f4a9405f9f262042f5327710.png