JavaScript高级（3）

最新推荐文章于 2024-05-21 09:52:08 发布

原创最新推荐文章于 2024-05-21 09:52:08 发布 · 249 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #node.js #html

JavaScript 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了JavaScript如何操作DOM，包括通过id、标签名和类名查找元素，使用innerHTML和innerText改变元素内容，修改HTML属性，调整CSS样式，响应各种事件，以及创建和删除HTML元素的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DOM--Document Object Model[文档对象模型]

当网页被加载时，浏览器会创建页面的文档对象模型。

html文件

<html>
<head>
<title>My title</title>
</head>
<body>
<a href=””>My link</a>
<h1>My header</h1>
</body>
</html>

HTML DOM 模型被构造为对象的树

1.DOM可以完成的功能

1.JavaScript 能够改变页面中的所有 HTML 元素

2.JavaScript 能够改变页面中的所有 HTML 属性

3.JavaScript 能够改变页面中的所有 CSS 样式

4.JavaScript 能够对页面中的所有事件做出反应

2. 查找 HTML 元素

为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

（1）.getElementById(id属性值);通过 id 查找 HTML 元素

例如:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			//getElementById(id属性值);通过 id 查找 HTML 元素
			function testByID(){
				var p1=document.getElementById("p1");
				//p1--[object HTMLParagraphElement];  DOM对象
				p1.style.fontSize="50px";
				var p2=document.getElementById("p2");
				//p2--[object HTMLParagraphElement] DOM对象
				p2.style.color="red";
				//当id属性值相同时,只能得到第一个元素
				var p3=document.getElementById("p3");
				//p3---[object HTMLParagraphElement] DOM对象
				p3.style.fontSize="50px";
				p3.style.color="red";
			}
		</script>
	</head>
	<body>
		<p id="p1">p元素测试getElementById(id属性值)</p>
		<p id="p2">p元素测试getElementById(id属性值)</p>
		<p id="p3">p元素测试getElementById(id属性值)</p>
		<p id="p3">p元素测试getElementById(id属性值)</p>
		<input type="button" value="测试getElementById(id属性值)" 
		onclick="testByID();">
	</body>
</html>

（2）. getElementsByTagName(标签名)通过标签名查找 HTML 元素

例如：

<script>   
		   //getElementsByTagName(标签名)通过标签名查找 HTML 元素
		   function testByTagName(){
			   /*
				var p=document.getElementsByTagName("p");
				//p---[object HTMLCollection] DOM对象的集合---数组
				//typeof p---object 数组也是对象所以typeof p值才会是object
				//p[5]---[object HTMLParagraphElement]  DOM对象
				var size=5;
				for(var i=0;i<p.length;i++){
					var fonts=size*i+size;
					p[i].style.fontSize=fonts+"px";
				}
				*/
			    //当元素在html文件中只有一个的时候，
				//通过getElementsByTagName方法得到的结果依然是数组
				var h2=document.getElementsByTagName("h2");
				//alert(h2); [object HTMLCollection] DOM对象的集合---数组
				if(h2.length==1){
					h2[0].style.color="blue";
				}
		   }
		</script>

（3）. getElementsByClassName(class属性值)通过类名找到 HTML 元素

例如:

function testByClassName(){
			 var p1= document.getElementsByClassName("p1");
			 //alert(p1); //[object HTMLCollection]
			 for(var i=0;i<p1.length;i++){
				 p1[i].style.color="red";
			 }
			 var h= document.getElementsByClassName("h");
			 //alert(h); //[object HTMLCollection]
			 for(var i=0;i<h.length;i++){
			 	h[i].style.color="blue";
			 }
		  }

3.JavaScript 能够改变页面中的所有 HTML 元素[元素的文本内容]

（1）.innerHTML 属性--改变页面中HTML 元素的文本内容

例如:

function  testinnerHTML(){
				var text1=document.getElementById("text1");
				var h1=document.getElementsByTagName("h1")[0];
				//h1--[object HTMLHeadingElement]  Dom对象
				var textvalue=text1.value;
				h1.innerHTML=textvalue;
				//h1.innerHTML=text1.value;
				//h1.innerHTML=document.getElementById("text1").value;
}

注意:innerHTML中设置的字符串内容中有html标记，那么这个被包含的html标记会被解释运行。

2.innerText 属性--改变页面中HTML 元素的文本内容

例如:

function  testinnerText(){
				var text1=document.getElementById("text1");
				var h1=document.getElementsByTagName("h1")[0];
				//h1--[object HTMLHeadingElement]  Dom对象
				var textvalue=text1.value;
				h1.innerText=textvalue;
}

注意:innerText中设置的字符串内容中有html标记，那么这个被包含的html标记会被作为字符串输出。

4.JavaScript 能够改变页面中的所有 HTML 属性

属性在html和css中都有。

Html中的属性---是给浏览器解释运行html标记时通过附加信息。

往往出现在html的开始标记中，如果有多个中间使用空格分离。

例如:

src=”” width=”” height=””----Html标记中的属性

css中的属性----是用来改变html元素的样式。

1.在html开始元素中通过style属性

例如:

style---是html属性

width:100px;height:100px----css属性

2.在<style>元素中和“.css”文件中

选择器{

css中的属性

}

控制 HTML 属性的格式:

dom对象.具体的html属性名称=属性名称对应的属性值；

例如:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function testattribute(){
				//dom对象.具体的html属性名称=属性名称对应的属性值；
				var imgdoc=document.getElementsByTagName("img")[0];
				//alert(imgdoc); [object HTMLImageElement]
				imgdoc.src="imgs/avatar2.png";
				//imgdoc---dom对象
				//src--具体的html属性名称
				//"imgs/avatar2.png"---属性名称对应的属性值;
			}
		</script>
	</head>
	<body>
		<img src="imgs/avatar.png" />
		<input type="button" value="控制html属性" onclick="testattribute();">
	</body>
</html>

5.JavaScript 能够改变页面中的所有 CSS 样式

dom对象.style.具体的css属性名称=属性名称对应的属性值；

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function  testCss(){
				//dom对象.style.具体的css属性名称=属性名称对应的属性值；
				var imgdoc=document.getElementsByTagName("img")[0];
				var button=document.getElementById("but1");
				var hdoc=document.getElementsByTagName("h1")[0];
				//alert(hdoc.innerText);
				//alert(hdoc.innerHTML);
				var buttext=button.value;
				//alert(buttext);
				if(buttext=="隐藏"){
					button.value="显示";
					imgdoc.style.display="none";
				}
				if(buttext=="显示"){
					button.value="隐藏";
					imgdoc.style.display="block";
				}
			}
		</script>
	</head>
	<body>
		<h1>hello<a href="#">test</a></h1>
		<img src="imgs/avatar.png" />
		<input id="but1" type="button" value="隐藏" onclick="testCss();">
	</body>
</html>

6.JavaScript 能够控制事件

1.页面初始化事件 onload

具体用法:

<script>
function    处理函数（）{
    //事件处理动作
}
</script>
<body   onload=”处理函数”></body>

2.常见的javascript事件，事件的具体使用方法

1.页面初始化事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function  testOnload(){
				alert("页面初始化事件");
			}
		</script>
	</head>
	<body  onload="testOnload();">
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			//通过window对象调用onload事件
			window.onload=function(){
				alert("页面初始化事件");
			}
		</script>
	</head>
	<body>
	</body>
</html>

2.按钮点击事件 onclick

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function  testClick(){
				alert("按钮点击事件");
			}
		</script>
	</head>
	<body>
		<input type="button" value="测试按钮点击事件" onclick="testClick();"/>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onload=function(){
				var  but1=document.getElementById("but1");//object HTMLInputElement
				but1.onclick=function(){
					alert("按钮点击事件2");
				}
			}
			
		</script>
	</head>
	<body>
		<input id="but1" type="button" value="测试按钮点击事件2" />
	</body>
</html>

3.onchange 事件，当用户改变输入字段的内容时触发

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function  testonchange(){
				alert("输入内容被改变是触发");
			}
		</script>
	</head>
	<body>
		<input type="text"  value="hello" onchange="testonchange();" />
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onload=function(){
				var text1=document.getElementById("text1");
				text1.onchange=function(){
					alert("输入内容被改变是触发2");
				}
			}
		</script>
	</head>
	<body>
		<input id="text1" type="text"  value="hello"  />
	</body>
</html>

4.onfocus当获得焦点时触发.

5.oblur当失去焦点时触发

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function  testonfocus(){
				var text1=document.getElementById("text1");
				text1.value="";
			}
			
			window.onload=function(){
					var text1=document.getElementById("text1");
					text1.onblur=function(){
						var reg1=new RegExp(/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/);
						var val=text1.value;
						var boo=reg1.test(val);
						if(boo){
							alert("手机号码正确，获取短息验证码");
						}else{
							alert("手机号码不正确，请重新输入");
						}
					}
			}
		</script>
	</head>
	<body>
		<input id="text1" type="text"  value="请输入手机号码" onfocus="testonfocus();" /><br>
	</body>
</html>

6.onmouseover 和 onmouseout 事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onload=function(){
				var img1=document.getElementById("img1");
				img1.onmouseover=function(){
					img1.style.width="250px";
					img1.style.height="250px";
				}
				img1.onmouseout=function(){
					img1.style.width="150px";
					img1.style.height="150px";
				}
			}
		</script>
	</head>
	<body>
		<img id="img1" src="imgs/avatar.png" />
	</body>
</html>

7.onsubmit 事件会在表单中的确认按钮【submit】被点击时发生

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			//1.普通按钮type="button",无法触发表单提交事件onsubmit
			//2.onsubmit事件对应的处理函数一定要有返回值【boolean】
			//true---提交表单数据
			//false---不提交表单数据
			//3.表单的onsubmit="return 处理函数";
			function  testOnsubmit(){
				var text1=document.getElementById("text1");
				var pass1=document.getElementById("pass1");
				var span1=document.getElementById("span1");
				var username=text1.value;
				var password=pass1.value;
				if(username=="zhangsan" && password=="123456"){
					alert("登陆成功!");
					return true;
				}else{
					span1.innerHTML="<font color='red' size='7'>用户名密码错误!</font>";
					return false;
				}
			}
		</script>
	</head>
	<body>
		<span id="span1"></span>
		<form action="#" method="get" onsubmit="return  testOnsubmit();">
			用户名:<input id="text1" name="username" type="text" /><br>
			密码:<input id="pass1" name="password"  type="password" /><br>
			<input type="button" value="普通按钮" /><br>
			<input type="submit" value="登陆" />
		</form>
	</body>
</html>

8.onkeydown 事件会在用户按下一个键盘按键时发生。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			//1.testKeydown事件在调用的时候需要一个event参数
			//2.event参数的keyCode属性得到键盘按键对应的数字。
			function testKeydown(event){
				var num=event.keyCode;
				if(num==65 || num==37){
					alert("向左移动");
				}
				if(num==68 || num==39){
					alert("向右移动");
				}
				if(num==87 || num==38){
					alert("向上移动");
				}
				if(num==83 || num==40){
					alert("向下移动");
				}
				if(num==13){
					alert("暂停");
				}
			}
		</script>
	</head>
	<body onkeydown="testKeydown(event);">
	</body>
</html>

7.创建和删除HTML元素

创建元素

document.createElement("元素名称");

document.createTextNode("文本内容");

父元素的dom对象.appendChild(node);

删除元素 父元素的dom对象.removeChild(子元素的dom对象);

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 300px;
				height: 300px;
				background-color: red;
			}
		</style>
		<script>
			window.onload=function(){
				var addbut=document.getElementById("add");
				var deletebut=document.getElementById("delete");
				addbut.onclick=function(){
					//创建元素
					var hdom=document.createElement("h1");
					var htext=document.createTextNode("这是我添加的一个元素");
					hdom.appendChild(htext);
					var divdom=document.getElementById("div1");
					divdom.appendChild(hdom);
				}
				deletebut.onclick=function(){
					var divdom=document.getElementById("div1");
					var hdom=document.getElementById("h1");
					//删除元素
					divdom.removeChild(hdom);
				}
			}
		</script>
	</head>
	<body>
		<div id="div1">
			<h1 id="h1">测试添加和移除元素</h1>
		</div>
		<input id="add" type="button" value="添加元素"><br>
		<input id="delete" type="button" value="删除元素"><br>
	</body>
</html>