Java Script 中的 DOM 对象

最新推荐文章于 2022-09-25 19:55:43 发布

怪胎圣徒

最新推荐文章于 2022-09-25 19:55:43 发布

阅读量164

点赞数

分类专栏： Java script 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_51516810/article/details/116461830

版权

Java script 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Java Script 中的 DOM 对象

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

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

1.getElementById(id 属性值);通过 id 查找 HTML 元素
注意:当 id 属性值相同时,只能得到第一个元素
2.getElementsByTagName(标签名)通过标签名查找 HTML 元素,返回值是 javascript 数组。
3.getElementsByClassName(class 属性值)通过类名【class 属性值】找到 HTML 元素,返回值是 javascript 数组。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>查找 HTML 元素【html标记变成DOM对象】</title>
		<script>
			window.οnlοad=function(){
			//getElementById(id 属性值)-------通过ID查找HTML元素
			/*
		var pobj=document.getElementById("p1");
		alert(pobj);// object HTMLParagraphElement
		pobj.innerHTML="object HTMLParagraphElement";
		//当ID属性值相同时，只能得到第一个元素
		*/
	 //getElementsByTagName(标签名)通过标签名查找 HTML 元素,返回值是javascript数组
		/*
	var parray=document.getElementsByTagName("p");
	alert(parray);//object HTMLCollection
	parray[0].innerHTML="parray=[object HTMLCollection]---parray[0]";
	parray[1].innerHTML="parray=[object HTMLCollection]---parray[1]";
			}
			*/
			/*
	var harray=document.getElementsByTagName("h2");
	alert(harray);//object HTMLCollection
			*/
	 //3.getElementsByClassName(class属性值)通过类名【class属性值】找到 HTML 元素,返回值是javascript数组
		 var spanarray=document.getElementsByClassName("s1");
		 alert(spanarray)//object HTMLCollection
		   }
		</script>
	</head>
	<body>
		<p id="p1">查找 HTML 元素【html标记变成DOM对象】</p>
		<p id="p1">查找 HTML 元素【html标记变成DOM对象】</p>
		<h2 id="p1">查找 HTML 元素getElementsByTagName(标签名)</h2>
		<span class="s1">查找 HTML 元素getElementsByTagName(标签名)</span>
		<span class="s1">查找 HTML 元素getElementsByTagName(标签名)</span>
	</body>
</html>

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>
			window.οnlοad=function(){
		//var pobj1=document.getElementById("p1")
		//innerHTML---得到HTML标记内容
	   // var con=pobj1.innerHTML;
		//alert(con);
		//innerHTML---	改变HTML标记内容	
        // pobj1.innerHTML="innerHTML---	改变HTML标记内容	";
		 //pobj1.innerHTML="innerHTML---<a href='#'>改变HTML标记内容</a>";
		 // var pobj2=document.getElementById("p2")
		// innerText---得到HTML标记内容
	    //  var text=pobj2.innerText;
		// alert(text);
		//innerText---改变HTML标记内容
	     //var text=pobj2.innerText="innerText------改变HTML标记内容";
		//alert(text);
	 // pobj2.innerText="innerText---<a href='#'>改变HTML标记内容</a>";
		//innerHTML与innerText区别
		  //innerHTML属性可以到包含的html标记，可以解释运行出包含的html标记的效果。
            //innerText属性不可以到包含的html标记，不解释运行出包含的html标记的效果。
          //innerHTML和innerText属性，不能得到和修改表单元素的值。
		   var butobj=document.getElementById("but1");
		  //butobj.innerHTML="测试按钮"; 不能修改或得到表单元素的值
		  //butobj.innerText="测试按钮";不能修改或得到表单元素的值
		var text=butobj.value;
		//alert(text);
		butobj.value="测试按钮";
		  }
		</script>
	</head>
	<body>
		<p id="p1">改变页面中所有HTML内容/标记----innerHTML</p>
		<p id="p2">改变页面中所有HTML内容/标记----innerText</p>
	    <input id="but1"  type="button" value="按钮"/>
	</body>
</html>

2.JavaScript 能够改变页面中的所有 HTML 元素的属性
属性在 html 和 css 中都有。
HTML 元素的属性—是给浏览器解释运行 html 标记时通过附加信息。
往往出现在 html 的开始标记中，如果有多个中间使用空格分
离。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>改变页面中的所有HTML元素的属性</title>
		<script>
		function test1(){
	var imgarray=document.getElementsByTagName("img");
		//1.dom对象.具体的HTML元素的属性名称 ---  得到HTML元素的属性值
       
	var path=imgarray[0].src;
	alert(path);//http://127.0.0.1:8848/JS%20work/5.6/imgs/avatar.png
		 //2.dom对象.具体的HTML元素的属性名称=”数据值”；---改变HTML元素的属性
		imgarray[0].src="imgs/avatar3.png";
		}	
		</script>
	</head>
	<body>
		<img src="imgs/avatar.png"/>
		<input type="button" value="改变/得到HTML元素的属性" οnclick="test1();">
	</body>
</html>

3.JavaScript 能够改变页面中的所有 CSS 样式
1.dom 对象.style.CSS 属性名称;—得到样式值
2.dom 对象.style.CSS 属性名称=”数据值”;—改变样式
上面的得到和改变 CSS 样式时，内部样式块/独立 css 文件的方式设置的样式，不能得到但是可以修改。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>改变页面中所有的CSS样式</title>
		<style>
			p{
				color: aqua; 
				font-size: 30px;
			}
		</style>
		<script>
		function test1(){
			var parray=document.getElementsByTagName("P");
		//dom对象.style.CSS属性名称=”数据值”;---改变样式
		parray[0].style.color="yellow";
		parray[0].style.fontSize="60px";
		//内部样式块/独立CSS文件的方式设置的样式，不能得到但是可以修改
		}	
		</script>
	</head>
	<body>
		<p>测试改变HTML元素的CSS样式</p>
		<input type="button" value="测试" οnclick="test1();">
	</body>
</html>

4.JavaScript 能够对页面中的所有事件做出反应
在这里插入图片描述常见的事件

onload–页面初始化事件
onclick–按钮点击事件
onfocus 当获得焦点时触发
onblur 当失去焦点时触发
onmouseover 鼠标进入事件
onmouseout 鼠标移出事件
onkeydown 事件会在用户按下一个键盘按键时发生
onsubmit 事件会在表单中的确认按钮【submit】被点击时发生
事件的添加方式:
javascritp 程序都是有事件驱动执行的。
在 html 元素的开始标记中设置事件，提供所要触发的函数。
javascriptDom 对象为指定的元素添加具体事件
测试 onload–页面初始化事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>常见事件</title>
		<script>
			/*
			window.οnlοad=function(){
				//onfocus当获得焦点时触发
				//onblur当失去焦点时触发
		var textObj=document.getElementById("text1");
			//为文本框添加聚焦事件
			textObj.οnfοcus=function(){
				textObj.value="";
			};	
			//为文本框添加失焦事件	
				textObj.οnblur=function(){
				alert(textObj.value);
				}
			//onmouseover 鼠标进入事件
			 //onmouseout 鼠标移出事件
	var imgobj=document.getElementById("img1");
	//为图片添加鼠标进入事件
  imgobj.οnmοuseοver=function(){
imgobj.src="imgs/avatar.png";	
			};
//图片添加鼠标移出事件
			}
			imgobj.οnmοuseοut=function(){
			imgobj.src="imgs/avatar3.png";	
			};
			function testkeydown(event){
			var imgobj=document.getElementById("img1");	
			//得到键盘的按键键码
			var code=event.keyCode;
			//alert(code);
			if(code==40){
				imgobj.src="imgs/avatar3.png";
			}
			if(code==38){
				imgobj.src="imgs/avatar.png";
			}
			*/
			function login(){
			var usernameObj=document.getElementById("username");
			var passwordObj=document.getElementById("password");
				var name=usernameObj.value;
				var pass=passwordObj.value;
				if(name=="zhangsan" &&  pass=="123456"){
					return true;
				}else{
				      alert("用户名密码错误");
					return false;
			}
				}
		</script>
		
	</head>
	<body οnkeydοwn="testkeydown(event)">
		<input type="text" id="text1" value="测试聚焦/失焦事件"/><br>
		<img src="imgs/avatar3.png" id="img1"/><br>
		<form action="login" method="get"  οnsubmit="return login();">
		<input type="text" id="username" name="name" value="请输入用户名"/><br>
		<input type="password" id="password" name="pass"/> <br>
		<input type="submit" value="登录"/><br>
		</form>
	</body>
</html>

怪胎圣徒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Java Script 中的 DOM 对象

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

扫一扫

专栏目录