Javascript的HTML DOM （文档对象模型）

逃离我推掉我的手 2024-04-20 11:25 65阅读 0赞

## Javascript的HTML DOM （文档对象模型） ##

### 一、HTML DOM （文档对象模型） ###

> 采用DOM的方式来操作网页的元素,通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。
> 
> 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
> 
> HTML DOM 模型被构造为对象的树。
> 
> 通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
> 
> JavaScript 能够改变页面中的所有 HTML 元素
> 
> JavaScript 能够改变页面中的所有 HTML 属性
> 
> JavaScript 能够改变页面中的所有 CSS 样式
> 
> JavaScript 能够对页面中的所有事件做出反应

### 二、查找元素 ###

> 通常，通过 JavaScript，您需要操作 HTML 元素。为了做到这件事情，您必须首先找到该元素。有四种方法来做这件事：
> 
> 通过 id 找到 HTML 元素
> 
> 通过标签名找到 HTML 元素
> 
> 通过类名找到 HTML 元素
> 
> 通过name获取元素数组

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		
    		<p id="p_id">送人玫瑰1</p>
    		<p class="p_class">送人玫瑰2</p>
    		<p class="p_class">送人玫瑰3</p>
    		
    		<input type="text" name="aaa" />
    		<br />
    		<input type="text" name="bbb" />
    		
    		
    		<script type="text/javascript">
    			
    			//通过id获取元素
    			var p_id = document.getElementById("p_id");
    			p_id.onclick = function(){
          //绑定单击事件
    				this.innerText = "手有余香1";//设置内容
    			}
    			
    			//通过class获取元素数组
    			var p_class = document.getElementsByClassName("p_class")[0];
    			p_class.onclick = function(){
          
    				this.innerText = "手有余香2";
    			}
    			
    			//通过标签名获取元素数组
    			var p_tag = document.getElementsByTagName("p")[2];
    			p_tag.onclick = function(){
          
    				this.innerText = "手有余香3";
    			}
    			
    			//通过name获取元素数组
    			var aaa = document.getElementsByName("aaa")[0];
    			aaa.value = "请输入账号";//设置属性
    		</script>
    		
    	</body>
    </html>

//单击事件
    
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		
    		<p>一寸光阴一寸金</p>
    		<p>一寸光阴一寸金</p>
    		<p>一寸光阴一寸金</p>
    		
    		<script type="text/javascript">
    		var pArr = document.getElementsByTagName("p");
    		for (var i =0;i < pArr.length;i++) {
          
    			var p = pArr[i];
    			p.onclick = function(){
          
    				this.innerText = "寸金难买寸光阴";
    				
    			}
    		}
    			
    		</script>
    	</body>
    </html>

### 三、改变HTML内容 ###

> 修改 HTML 内容的最简单的方法时使用 innerHTML 属性。  
> 如需改变 HTML 元素的内容，请使用这个语法：  
> document.getElementById(id).innerHTML=new HTML

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		
    		<input type="button" value="获取第一个P标签的内容" onclick="fun01()" />
    		<input type="button" value="获取第二个P标签的内容" onclick="fun02()" />
    		
    		<p>用真心待人</p>
    		<p>用真心待人</p>
    		
    		<script type="text/javascript">
    			
    			var p1 = document.getElementsByTagName("p")[0];
    			p1.onclick = function(){
          
    				this.innerText = "<h1>做美丽的自己</h1>";
    			}
    			function fun01(){
          
    				alert(p1.innerText);
    			}
    			
    			var p2 = document.getElementsByTagName("p")[1];
    			p2.onclick = function(){
          
    				this.innerHTML = "<h1>做美丽的自己</h1>";
    			}
    			function fun02(){
          
    				alert(p2.innerHTML);
    			}
    		</script>
    	</body>
    </html>

### 四、改变HTML属性值 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<input type="button" value="获取第一张图片的属性" onclick="fun01()" />
    		<input type="button" value="获取第二张图片的属性" onclick="fun02()" />
    		
    		<img src="../img/呆萌小猪.png" width="100px" height="100px" />
    		<img src="../img/海底世界.jpg" width="100px" height="100px" />
    		
    		<script type="text/javascript">
    			
    			var img01 = document.getElementsByTagName("img")[0];
    			img01.onclick = function(){
          
    				
    				//设置属性
    				this.src = "../img/呆萌小猪.png";
    				this.width = "200";
    				this.height = "200";
    			}
    			
    			function fun01(){
          
    				
    				//获取属性
    				console.log(img01.src);
    				console.log(img01.width);
    				console.log(img01.height);
    			}
    			
    			var img02 = document.getElementsByTagName("img")[1];
    			img02.onclick = function(){
          
    				
    				//设置属性
    				img02.setAttribute("src","../img/海底世界.jpg");
    				img02.setAttribute("width","200px");
    				img02.setAttribute("height","200px");
    			}
    			
    			function fun02(){
          
    				//获取属性
    				console.log(img02.getAttribute("src"));
    				console.log(img02.getAttribute("width"));
    				console.log(img02.getAttribute("height"));
    			}
    		</script>
    	</body>
    </html>

### 五、DOM\_CSS-改变HTML样式 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		
    		<input type="button" value="隐藏图片" onclick="myHidden()" />
    		<input type="button" value="显示图片" onclick="myShow()" />
    		<input type="button" value="获取图片的样式" onclick="getStyle()()" />
    		<br />
    		
    		<img src="../img/呆萌小猪.png" width="100px" height="100x" />
    		
    		<script type="text/javascript">
    			
    			var img = document.getElementsByTagName("img")[0];
    			
    			function myHidden(){
          
    				img.style.visibility = "hidden";
    			}
    			
    			function myShow(){
          
    				img.style.visibility = "visible";
    			}
    			
    			function getStyle(){
          
    				alert(img.style.visibility);
    			}
    		</script>
    	</body>
    </html>

### 六、DOM\_事件 ###

#### 1.单击事件 ####

> 点击之后，更改标题内容
> 
> this代表当前被点击的对象
> 
> 经过多个改版

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		
    		<h1 onclick="this.innerText = '寸金难买寸光阴'">一寸光阴一寸金</h1>
    	</body>
    </html>

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		
    		<h1 onclick="fun01(this)">用良心做教育</h1>
    		
    		<script type="text/javascript">
    			
    			function fun01(obj){
          
    				obj.innerText = "做真实的自己";
    			}
    			
    		</script>
    	</body>
    </html>

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		
    		<h1>用良心做教育</h1>
    		
    		<script type="text/javascript">
    			
    			var h1 = document.getElementsByTagName("h1")[0];
    			h1.onclick = function(){
          
    				this.innerText = "做真实的自己";
    			}
    		</script>
    	</body>
    </html>

#### 2.onload事件-----页面加载 ####

> onload 一般可以来做一些网页的环境准备工作  
> 事件会在页面或图像加载完成后立即发生。

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		
    		<script type="text/javascript">
    			
    			//onload事件：页面加载事件，当页面的html元素以及图片资源完全加载完毕后触发的事件
    			window.onload = function(){
          
    				var h1 = document.getElementsByTagName("h1")[0];
    				h1.onclick = function(){
          
    					this.innerText = "做真实的自己";
    				}
                }
    		</script>
    				<h1>用良心做教育</h1>
    	</body>
    </html>

#### 3.键盘事件 ####

> 监听器：onkeydown、onkeypress、onkeyup

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		
    		<input type="text"
    			onkeydown="myDown()"
    			onkeypress="myPress()"
    			onkeyup="myUp()"
    		/>
    		
    		<script type="text/javascript">
    			
    			//键盘按下事件
    			function myDown(){
          
    				console.log("down");
    			}
    			
    			//键盘持续事件
    			function myPress(){
          
    				console.log("press");
    			}
    			
    			//键盘松开事件
    			function myUp(){
          
    				console.log("up");
    			}
    		</script>
    	</body>
    </html>

案例，设置一个文本框，每敲一个字母，会触发将输入文本转换为大写的函数。

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		
    		<input type="text"
    			onkeyup="myUp(this)"
    		/>
    		
    		<script type="text/javascript">
    			
    			//需求：将输入的英文字母变为大写
    			
    			function myUp(obj){
          
    				//获取输入框的值
    				var v = obj.value;
    				
    				//替换成大写
    				v = v.toUpperCase();
    				
    				//再赋值给输入框
    				obj.value = v;
    			}
    		</script>
    	</body>
    </html>

#### 4.鼠标移动事件 ####

> onMouseOver 鼠标经过时触发  
> onMouseUp 按下鼠标松开鼠标时触发  
> onMouseOut 鼠标移出时触发  
> onMouseMove 鼠标移动时触

!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		
    		<img src="../img/呆萌小猪.png" width="100px" height="100px" 
    			onmousedown="myDown()"
    			onmouseup="myUp()"
    			onmousemove="myMove()"
    			onmouseover="myOver()"
    			onmouseout="myOut()"
    		/>
    		
    		<script type="text/javascript">
    			
    			//鼠标按下事件
    			function myDown(){
          
    				console.log("myDown");
    			}
    			
    			//鼠标松开事件
    			function myUp(){
          
    				console.log("myUp");
    			}
    			
    			//鼠标移动事件
    			function myMove(){
          
    				console.log("myMove");
    			}
    			
    			//鼠标移进事件
    			function myOver(){
          
    				console.log("myOver");
    			}
    			
    			//鼠标移出事件
    			function myOut(){
          
    				console.log("myOut");
    			}
    			
    		</script>
    		
    	</body>
    </html>

案例，实现一个抓迷藏的小游戏

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		
    		<script type="text/css">
    			
    			img{
          
    				width: 20px;
    				height: 20px;
    				
    				opacity: 0.3;
    			}
    		</script>
    	</head>
    	<body>
    		
    		<img src="../img/呆萌小猪.png" onmouseover="myOver(this)"  onmouseout="myOut(this)"/>
    		<img src="../img/回慕.png" onmouseover="myOver(this)"  onmouseout="myOut(this)"/>
    		<img src="../img/圣诞暗夜.png" onmouseover="myOver(this)"  onmouseout="myOut(this)"/>
    		<img src="../img/海底世界.jpg" onmouseover="myOver(this)"  onmouseout="myOut(this)"/>
    		
    		
    		<script type="text/javascript">
    			
    			//鼠标移进事件
    			function myOver(obj){
          
    				obj.style.opacity = 1;
    			}
    			
    			//鼠标移出事件
    			function myOut(obj){
          
    				obj.style.opacity = 0.3;
    			}
    			
    		</script>
    	</body>
    </html>

#### 5.焦点事件onfocus/onblur ####

> 写一个文本框，默认显示“请输入…”，光标定位到之后，自动将里面的信息清除掉

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		
    		<input type="text" onfocus="myFocus()"  onblur="myBlur()"/>
    		
    		
    		<script type="text/javascript">
    			
    			//获取焦点事件
    			function myFocus(){
          
    				
    				console.log("focus");
    			}
    			
    			//失去焦点事件
    			function myBlur(){
          
    				
    				console.log("blur");
    			}
    		</script>
    	</body>
    </html>

案例

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		
    		<input type="text" onfocus="myFocus(this)" onblur="myBlur(this)" value="请输入账号...." />
    		
    		
    		<script type="text/javascript">
    			
    			function myFocus(obj){
          
    				if (obj.value == "请输入账号....") {
          
    					obj.value = "";
    				}
    			}
    			
    			function myBlur(obj){
          
    				if (obj.value.trim) {
          
    					if (obj.value.trim() == "") {
          
    						obj.value = "请输入账号....";
    					}
    				}else{
          
    					
    					if (obj.value.replace(/(^\s+)|(\s+$) /g,"") == "") {
          
    						obj.value = "请输入账号....";
    					}
    				}
    			}
    		</script>
    	</body>
    </html>

### 六、DOM\_节点 ###

#### 1.添加节点和删除节点 ####

> 创建新的 HTML 元素  
> 如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。
> 
> 如需删除 HTML 元素，您必须首先获得该元素的父元素：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<input type="button" value="添加P标签" onclick="addP()"/>
    		<input type="button" value="添加Img标签" onclick="addImg()" />
    		<input type="button" value="克隆Img标签" onclick="cloneImg()" />
    		<input type="button" value="删除Img标签" onclick="deleteImg()" />
    		
    		<div id="manager">
    			<p>段落标签</p>
    		</div>
    		
    		<script type="text/javascript">
    			
    			var manager = document.getElementById("manager");
    			
    			function addP(){
          
    				
    				//创建P标签 -- <p></p>
    				var p = document.createElement("p");
    				
    				//创建内容
    				var text = document.createTextNode("送人玫瑰，手有余香");
    				
    				//将内容添加到p标签中
    				p.appendChild(text);
    				
    				//将p标签添加到div中
    				manager.appendChild(p);
    			}
    			
    			 function addImg(){
          
    			 	
    			 	//创建img标签
    			 	var img = document.createElement("img");
    			 	
    			 	//设置属性
    			 	img.setAttribute("src","../img/呆萌小猪.png");
    			 	img.setAttribute("width","100px");
    			 	img.setAttribute("height","100px");
    			 	
    			 	//创建br标签
    			 	var br = document.createElement("br");
    			 	
    			 	//将img标签添加到div中
    			 	manager.appendChild(img);
    			 	
    			 	//将br标签添加到div中
    			 	manager.appendChild(br);
    			 }
    			 
    			 			function cloneImg(){
          
    				//获取img对象
    				var img = document.getElementsByTagName("img")[0];
    				//克隆
    				var newImg = img.cloneNode(true);//true - 深入克隆
    				
    				//获取br对象
    				var br = document.getElementsByTagName("br")[0];
    				//克隆
    				var newBr = br.cloneNode(true);//true - 深入克隆
    				
    				//将img标签添加到div中
    				manager.appendChild(newImg);
    				//将br标签添加到div中
    				manager.appendChild(newBr);
    			}
    			
    			function deleteImg(){
          
    				
    				//获取要删除的对象
    				var img = document.getElementsByTagName("img")[0];
    				var br = document.getElementsByTagName("br")[0];
    				
    				//删除
    				manager.removeChild(img);
    				manager.removeChild(br);
    
    			}
    		</script>
    	</body>
    </html>

#### 2.扩展：删除信息 ####

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<table border="1" width="50%">
    			<tr>
    				<th>姓名</th>
    				<th>种族</th>
    				<th>年龄</th>
    				<th>操作</th>
    			</tr>
    			<tr>
    				<td>鸿钧</td>
    				<td>先天神族</td>
    				<td>100000</td>
    				<td>
    					<input type="button" value="删除" onclick="deleteNode(this)" />
    				</td>
    			</tr>
    			<tr>
    				<td>血河老祖</td>
    				<td>血族</td>
    				<td>500</td>
    				<td>
    					<input type="button" value="删除" onclick="deleteNode(this)" />
    				</td>
    			</tr>
    			<tr>
    				<td>帝俊</td>
    				<td>妖族</td>
    				<td>200</td>
    				<td>
    					<input type="button" value="删除" onclick="deleteNode(this)" />
    				</td>
    			</tr>
    			<tr>
    				<td>轩辕</td>
    				<td>人族</td>
    				<td>100</td>
    				<td>
    					<input type="button" value="删除" onclick="deleteNode(this)" />
    				</td>
    			</tr>
    			<tr>
    				<td>玄冥</td>
    				<td>巫族</td>
    				<td>400</td>
    				<td>
    					<input type="button" value="删除" onclick="deleteNode(this)" />
    				</td>
    			</tr>
    			
    		</table>
    		
    		
    		<script type="text/javascript">
    			
    			function deleteNode(obj){
          
    				
    				var tr = obj.parentNode.parentNode;
    				var table = tr.parentNode;
    				table.removeChild(tr);
    			}
    		</script>
    	</body>
    </html>

### 七、DOM结合案例 ###

#### 1.做一个计算器 ####

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<input type="text" id="text01" />
    		+
    		<input type="text" id="text02" />
    		<input type="button" value="=" onclick="add()" />
    		<input type="text" id="text03" />
    		
    		<script type="text/javascript">
    			
    			var text01 = document.getElementById("text01");
    			var text02 = document.getElementById("text02");
    			var text03 = document.getElementById("text03");
    			
    			function add(){
        
    				
    				//注意：输入框获取的value是string类型
    				var result = parseFloat(text01.value) + parseFloat(text02.value);
    				text03.value = result;
    			}
    		</script>
    		
    	</body>
    </html>

#### 2.做级联下拉列表— 二级联动（省 市） ####

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		
    		<select id="province">
    			<option value="sc">四川</option>
    			<option value="hn">湖南</option>
    			<option value="hb">湖北</option>
    		</select>省
    		<select id="city">
    			<option>成都</option>
    			<option>南充</option>
    			<option>宜宾</option>
    			<option>资阳</option>
    			<option>西昌</option>
    			<option>雅安</option>
    			<option>攀枝花</option>
    		</select>市
    		
    		<script type="text/javascript">
    			
    			var province = document.getElementById("province");
    			var city = document.getElementById("city");
    			
    			//改变事件
    			province.onchange = function(){
          
    				
    				var v = this.value;
    				if(v == "sc"){
          
    					addCity(["成都","眉山","雅安","乐山","宜宾","自贡","南充","资阳"]);
    				}else if(v == "hn"){
          
    					addCity(["长沙","娄底","怀化","益阳","永州","岳阳"]);
    				}else if(v == "hb"){
          
    					addCity(["武汉","仙桃","黄冈","孝感","十堰","咸宁","宜昌","恩施"]);
    				}
    			}
    			
    			function addCity(cityArr){
          
    				
    				//清空city下拉列表中的数据
    				city.length = 0;
    				
    				for(var i = 0;i<cityArr.length;i++){
          
    					var cityName = cityArr[i];
    					var option = document.createElement("option");
    					option.innerText = cityName;
    					city.appendChild(option);
    				}
    				
    			}
    			
    		</script>
    	</body>
    </html>

#### 3.表单验证 ####

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			span{
          color: red;}
    		</style>
    	</head>
    	<body>
    		
    		<form action="#" method="post" onsubmit="return xxx()">
    			
    			账号：<input type="text" name="username" id="username" /><span></span><br />
    			密码：<input type="password" name="password" id="password" /><span></span><br />
    			确认密码：<input type="password" name="repassword" id="repassword" /><span></span><br />
    			
    			<input type="submit" value="修改密码" />
    		</form>
    		
    		<script type="text/javascript">
    			
    			var username = document.getElementById("username");
    			var password = document.getElementById("password");
    			var repassword = document.getElementById("repassword");
    			var span01 = document.getElementsByTagName("span")[0];
    			var span02 = document.getElementsByTagName("span")[1];
    			var span03 = document.getElementsByTagName("span")[2];
    			
    			function xxx(){
          
    				
    				span01.innerText = "";
    				span02.innerText = "";
    				span03.innerText = "";
    				
    				var bool = true;
    				
    				if(username.value.trim() == ""){
          
    					span01.innerText = "账号不能为空";
    					bool = false;
    				}
    				if(password.value.trim() == ""){
          
    					span02.innerText = "密码不能为空";
    					bool = false;
    				}
    				if(repassword.value.trim() == ""){
          
    					span03.innerText = "确认密码不能为空";
    					bool = false;
    				}else if(password.value.trim() != repassword.value.trim()){
          
    					span03.innerText = "密码与确认密码不一致";
    					bool = false;
    				}
    				return bool;
    			}				
    		</script>	
    	</body>
    </html>