HTML_DOM(1)

SDWESCES

已于 2022-03-14 16:38:19 修改

阅读量226

点赞数 1

分类专栏： html 文章标签： html html5 javascript

于 2021-09-08 21:13:45 首次发布

本文链接：https://blog.csdn.net/weixin_47484523/article/details/120188339

版权

html 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

文章目录

- htmlDOM 事件对象

htmlDOM 事件对象

要操作,先得到
前面讲完了js的基本语法变量,数据类型,运算符,控制语句,函数,内置对象.
又讲了标签可以产生事件,事件可以调用(触发)函数. 本质就是在js函数中又反过来对网页上的标签进行操作.

	   html DOM对象 是一类对象的统称
	   DOM是Document Object Model文档对象（网页中的标签）模型的 缩写
	   
	   js要对网页中的标签进行操作,那么js认为网页中每个标签都是一个对象(dom对象)
	   操作网页就可以认为是操作对象.
	   
	   那么我们想要在js中对网页中的标签进行操作,
	   首先要获得网页中的标签,  要操作,先得到
	   如何获得网页中的标签:
	    document对象: 表示整个html文档,当浏览器加载网页时,会创建一个document对象
		通过id获得: document.getElementById("id");  返回对应id的标签对象

操作1: 对标签体中的内容进行操作

操作2: 操作标签的css

操作3: 标签属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 
		   前面讲完了js的基本语法  变量,数据类型,运算符,控制语句,函数,内置对象.
		   又讲了标签可以产生事件,事件可以调用(触发)函数. 本质就是在js函数中又反过来对网页上的标签进行操作.
		   
		   html DOM对象 是一类对象的统称
		   DOM是Document Object Model文档对象（网页中的标签）模型的 缩写
		   
		   js要对网页中的标签进行操作,那么js认为网页中每个标签都是一个对象(dom对象)
		   操作网页就可以认为是操作对象.
		   
		   那么我们想要在js中对网页中的标签进行操作,
		   首先要获得网页中的标签,  要操作,先得到
		   如何获得网页中的标签:
		    document对象: 表示整个html文档,当浏览器加载网页时,会创建一个document对象
			通过id获得: document.getElementById("id");  返回对应id的标签对象
		
		 -->
		 <script type="text/javascript">
		 	
			function oper(){
			   var div1obj = document.getElementById("div1");
			   var div2obj = document.getElementById("div2");
			     //操作1: 对标签体中的内容进行操作
			       div2obj.innerHTML = div1obj.innerHTML+"aaaaaaaaaa";
			    //操作2: 操作标签的css
				     div1obj.style.display = "none";
					 div2obj.style.backgroundColor = "red";
					 div2obj.style.width="200px";
			}
			
			function oper1(){
				//操作3: 标签属性
				var textObj1 = document.getElementById("text1");
				var textObj2 = document.getElementById("text2");
				    textObj2.value = textObj1.value;
					 textObj1.value= "";
					 textObj1.type="button";
			}
			
			function changeColor(c){
				var bodyobj = document.getElementById("bodyId");
				bodyobj.style.backgroundColor = c;
			}
		 </script>
	</head>
	<body id="bodyId">
		<input type="button" value="隐藏" onclick="oper()" />
		<div id="div1">
			<b>div1</b>
		</div>
		<div id="div2">
		</div>
		
		<input  type="text" id="text1"  value=""/>
		<input type="text" id="text2"  value=""/>
		<input type="button" value="测试" onclick="oper1()" />
		
		<!-- 写三个按钮,分别是 绿色,红色,蓝色点击时改变网页的背景颜色 -->
		<input type="button" value="红色"  onclick="changeColor('red')"/>
		<input type="button" value="绿色"  onclick="changeColor('green')"/>
		<input type="button" value="蓝色"  onclick="changeColor('blue')"/>
	</body>
</html>