JavaScript基础知识（6）

晚风yY

于 2021-03-18 17:47:59 发布

阅读量72

点赞数

分类专栏： JavaScript

原文链接：https://blog.csdn.net/weixin_55685975/article/details/114997225

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

JavaScript中的DOM对象

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

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

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

当网页被加载时，浏览器会创建页面的文档对象模型。那么在网页中的任何一个html标记都有可能成为DOM对象。

我们通过javascript来控制网页中的html标记，但是javascript并不能直接控制html标记，这是我们就需要将网页中的html标记，变成javascript能够识别的对象，这个能够被javascript识别的对象就是DOM对象。

查找 HTML 元素【html标记变成DOM对象】

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

注意:当id属性值相同时,只能得到第一个元素

例如：

测试getElementById(id属性值);通过 id 查找 HTML 元素
function testById(){
	var p1dom=document.getElementById("p1");
	//p1dom===[object HTMLParagraphElement]
//注意:当id相同的html标记有多个的时候，getElementById()只得第一个。
}

getElementsByTagName(标签名)通过标签名查找 HTML 元素,返回值是javascript数组

例如：

function testByTagName(){
	var pdom=document.getElementsByTagName("p");
	//pdom---[object HTMLCollection]
	/*
	for(var i=0;i<pdom.length;i++){
		alert(pdom[i]);
	}
	*/
}

getElementsByClassName(class属性值)通过类名【class属性值】找到 HTML 元素,返回值是javascript数组

例如：

function testByClassName(){
var testp1dom=document.getElementsByClassName("testp1");
for(var i=0;i<testp1dom.length;i++){
		alert(testp1dom[i]);
}
}

DOM可以完成的功能

1.JavaScript 能够改变页面中的所有 HTML 标记/内容

1.innerHTML属性--得到html标记的内容和改变html标记的内容

Dom对象.innerHTML;---得到html标记的内容

Dom对象.innerHTM=”数据值”;--改变html标记的内容

2.innerText属性----得到html标记的内容和改变html标记的内容

Dom对象.innerText;---得到html标记的内容

Dom对象.innerText=”数据值”;--改变html标记的内容

innerHTML属性与innerText属性的区别：

innerHTML属性可以到包含的html标记，可以解释运行出包含的html标记的效果。

innerText属性不可以到包含的html标记，不解释运行出包含的html标记的效果。

innerHTML和innerText属性，不能得到和修改表单元素的值。

3.value属性--得到和修改表单元素的内容。

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML 标记/内容</title>
		<script>
			function testInnerHtml(){
				//得到p标记对应的dom对象
				//var pdom=document.getElementById("p1");
				//innerHTML属性--得到p标记的内容
				//var text1=pdom.innerHTML;
				//innerHTML属性--改变p标记的内容
				//pdom.innerHTML="内容被改变";
				//pdom.innerHTML="<h1>改变html标记</h1>";
				
				//得到文本框标记对应的dom对象
				//var textdom=document.getElementById("text1");
				//alert(textdom.innerHTML);
				//textdom.innerHTML="改变文本框中的内容";
			}
			function testinnerText(){
				//得到p标记对应的dom对象
				//var pdom=document.getElementById("p1");
				//innerText属性--得到p标记的内容
				//var text1=pdom.innerText;
				//alert(text1);
				//innerText属性--改变p标记的内容
				//pdom.innerText="内容被改变";
				//pdom.innerText="<h1>改变html标记</h1>";
				
				//得到文本框标记对应的dom对象
				//var textdom=document.getElementById("text1");
				//alert(textdom.innerText);
				//textdom.innerText="改变文本框中的内容";
			}
			function testvalue(){
				//得到文本框标记对应的dom对象
				var textdom=document.getElementById("text1");
				//alert(textdom.value);
				textdom.value="改变文本框中的内容";
			}
		</script>
	</head>
	<body>
		<p id="p1"><font color="red">测试dom对象改变html标记的内容</font></p>
		<input id="text1" type="text" value="测试文本框">
		<input type="button" value="innerHTML属性" onclick="testInnerHtml();">
		<input type="button" value="innerText属性" onclick="testinnerText();"/>
		<input type="button" value="value属性" onclick="testvalue();"/>
	</body>
</html>

JavaScript 能够改变页面中的所有HTML元素的属性

属性在html和css中都有。

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

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

例如:<img src=”图片路径” /> src就是HTML元素img的属性。

dom对象.具体的HTML元素的属性名称 --- 得到HTML元素的属性值

dom对象.具体的HTML元素的属性名称=”数据值”；---改变HTML元素的属性值

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>控制html元素的属性</title>
		<script>
			function testattr(){
				//得到图片对应的dom对象
				var imgdom=document.getElementById("img1");
				//得到html元素的属性值
				//dom对象.具体的HTML元素的属性名称
				//alert(imgdom.src);
				//dom对象.具体的HTML元素的属性名称=”数据值”；---改变HTML元素的属性值
				imgdom.src="imgs/open.PNG";
			}
		</script>
	</head>
	<body>
		<img id="img1" src="imgs/close.PNG" />
		<input type="button" value="给变html元素的属性" onclick="testattr();" />
	</body>
</html>

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

1.dom对象.style.CSS属性名称;---得到样式值

2.dom对象.style.CSS属性名称=”数据值”;---改变样式

上面的得到和改变CSS 样式时，内部样式块/独立css文件的方式设置的样式，不能得到但是可以修改。

例如：

例如：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>控制css</title>
		<style>
			#p1{
				color: red;
				font-size: 30px;
			}
		</style>
		<script>
			function testcss(){
				//得到p标记对应的dom对象
				var pdom=document.getElementById("p1");
				//dom对象.style.CSS属性名称;---得到样式值
				//alert(pdom.style.color);
				//dom对象.style.CSS属性名称=”数据值”;---改变样式
				pdom.style.color="blue";
				pdom.style.fontSize="50px";
			}
		</script>
	</head>
	<body>
		<p id="p1">测试控制css</p>
		<input type="button" value="控制css" onclick="testcss();">
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片的隐藏显示</title>
		<style>
			#img1{
				display: block;
			}
		</style>
		<script>
			function testImg(){
				var butdom=document.getElementById("but1");
				var imgdom=document.getElementById("img1");
				//得到按钮上的文字
				var buttext=butdom.value;
				if(buttext=="隐藏"){
					imgdom.style.display="none";
					butdom.value="显示";
				}else{
					imgdom.style.display="block";
					butdom.value="隐藏";
				}
			}
		</script>
	</head>
	<body>
		<input id="but1" type="button" value="隐藏" onclick="testImg();">
		<img id="img1" src="imgs/close.PNG" />
	</body>
</html>

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

onabort	图像的加载被中断。
onblur	元素失去焦点。
onchange	域的内容被改变。
onclick	当用户点击某个对象时调用的事件句柄。
ondblclick	当用户双击某个对象时调用的事件句柄。
onerror	在加载文档或图像时发生错误。
onfocus	元素获得焦点。
onkeydown	某个键盘按键被按下。
onkeypress	某个键盘按键被按下并松开。
onkeyup	某个键盘按键被松开。
onload	一张页面或一幅图像完成加载。
onmousedown	鼠标按钮被按下。
onmousemove	鼠标被移动。
onmouseout	鼠标从某元素移开。
onmouseover	鼠标移到某元素之上。
onmouseup	鼠标按键被松开。
onreset	重置按钮被点击。
onresize	窗口或框架被重新调整大小。
onselect	文本被选中。
onsubmit	确认按钮被点击。
onunload	用户退出页面。

常见的事件

onload--页面初始化事件
onclick--按钮点击事件
onfocus当获得焦点时触发
onblur当失去焦点时触发
onmouseover 鼠标进入事件
onmouseout 鼠标移出事件
onkeydown 事件会在用户按下一个键盘按键时发生
onsubmit 事件会在表单中的确认按钮【submit】被点击时发生

事件的添加方式:

javascritp程序都是有事件驱动执行的。
在html元素的开始标记中设置事件，提供所要触发的函数。
javascriptDom对象为指定的元素添加具体事件

测试onload--页面初始化事件

例：

<script>
			<!-- 测设onload--页面初始化事件 -->
			/*
			function testload(){
				alert("测设onload--页面初始化事件");
			}
			<body onload="testload();">
			*/
		   /*
		    window.onload=function(){
				alert("测设onload--页面初始化事件");
			}
			*/
</script>

测试onclick--按钮点击事件

/*
		   function testclick(){
			   alert("测试onclick--按钮点击事件");
		   }
		   <input type="button" value="测试onclick" onclick="testclick();"/>
		   */
		  /*
		   window.onload=function(){
			   //得到按钮的dom对象
			   var butdom=document.getElementById("but1");
			   butdom.onclick=function(){
				   alert("测试onclick--按钮点击事件");
			   }
		   }
		   */

测试onfocus当获得焦点时触发

测试onblur当失去焦点时触发

例：

 window.onload=function(){
			//得到文本框对应的dom对象
			var textdom1=document.getElementById("text1");
			textdom1.onfocus=function(){
				textdom1.value="";
			};
			textdom1.onblur=function(){
				var phonenum=textdom1.value;
				var reg=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 flag=reg.test(phonenum);
				if(flag){
					alert("手机号码合法");
				}else{
					alert("手机号码不合法，请重新输入!");
					textdom1.value="";
				}
			};
		  }

测试onmouseover 鼠标进入事件

测试onmouseout 鼠标移出事件

window.onload=function(){
		 	//得到图片对应的dom对象
		 	var imgdom1=document.getElementById("img1");
			imgdom1.onmouseover=function(){
				imgdom1.width=200;
				imgdom1.height=200;
			};
			imgdom1.onmouseout=function(){
				imgdom1.width=150;
				imgdom1.height=150;
			};	
		 }

测试onkeydown 事件会在用户按下一个键盘按键时发生

<body onkeydown="testkey(event);">
function testkey(event){
			//得到键盘的建码
			var code=event.keyCode;
			if(code==37){
				alert("向左移动");
			}
			if(code==38){
				alert("向上移动");
			}
			if(code==39){
				alert("向右移动");
			}
			if(code==40){
				alert("向下移动");
			}
			if(code==13){
				alert("暂停");
			}
			if(code==32){
				alert("开始");
			}
		}

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

1.onsubmit 事件是给form表单元素添加

2.onsubmit 事件调用对应的处理函数之前要有return 处理函数;

3.onsubmit 事件对应的处理函数要有boolean的返回值

true--提交表单数据给后台处理程序

false--不提交

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单提交事件</title>
		<script>
			function testsubmit(){
				//得到输入的账号和密码
				var namedom=document.getElementById("username");
				var passdom=document.getElementById("password");
				var name=namedom.value;
				var pass=passdom.value;
				if(name=="zhangsan" && pass=="123456"){
					alert("提交表单数据");
					return true;
				}else{
					alert("账号密码错误，不提交");
					return false;
				}
			}
		</script>
	</head>
	<body>
		<center>
			<form action="/login" method="get" onsubmit="return testsubmit();">
				<table border="1px">
					<tr align="center">
						<td colspan="2"><h1>用户登录</h1></td>
					</tr>
					<tr align="center">
						<td>账号:</td>
						<td><input id="username" type="text" value=""></td>
					</tr>
					<tr align="center">
						<td>密码:</td>
						<td><input id="password" type="password" value=""></td>
					</tr>
					<tr align="center">
						<td colspan="2">
							<input type="submit" value="登录"/>
						</td>
					</tr>
				</table>
			</form>
		</center>
	</body>
</html>

晚风yY

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础知识（6）

JavaScript中的DOM对象DOM--Document Object Model[文档对象模型]当网页被加载时，浏览器会创建页面的文档对象模型。HTML DOM模型被构造为对象的树当网页被加载时，浏览器会创建页面的文档对象模型。那么在网页中的任何一个html标记都有可能成为DOM对象。我们通过javascript来控制网页中的html标记，但是javascript并不能直接控制html标记，这是我们就需要将网页中的html标记，变成javascript能够识别的对象，这个能..
复制链接

扫一扫

专栏目录