43.DOM和BOM

最新推荐文章于 2022-07-06 23:52:07 发布

一贤不穿小鞋

最新推荐文章于 2022-07-06 23:52:07 发布

阅读量163

点赞数

文章标签： dom bom

本文链接：https://blog.csdn.net/m0_53222768/article/details/117694112

版权

@一贤不穿小鞋

1.DOM:document object model的简写,文档对象模型.

将整个html页面看作倒挂的树,html页面每个标签看作树的节点对象.

2.DOM的作用:

2.1:有了DOM模型后,可以操作节点的内容.

2.2:有了DOM模型后,可以操作节点的属性.

2.3:有了DOM模型后,可以操作节点的样式.

2.4:有了DOM模型后,可以操作节点的事件.

3.获得元素节点对象的方式

前提这个节点对象(标签要加载完成才能获得)

3.1:document.getElementById()；

返回对拥有指定 id 的第一个对象的引用。

3.2:document.getElementsByName()

返回带有指定名称的对象集合。

3.3:document.getElementsByTagName()

返回带有指定标签名的对象集合。

3.4:document.getElementsByClassName()

返回带有指定类名的对象集合。

		eg://在加载事件中执行函数
			function show1(){
				//返回对拥有指定 id 的第一个对象的引用。
				//alert(document.getElementById("d1").innerHTML);
				
				//返回带有指定name名称的对象集合。
				//var obs1=document.getElementsByName("hobby");
				
				//返回带有指定标签名的对象集合。
				//var obs2=document.getElementsByTagName("h1");
				
				//返回带有指定类名的对象集合。
				var obs3=document.getElementsByClassName("c2");
				
				for (var i=0;i<obs3.length;i++) {
					alert(obs3[i].innerHTML);
				}
			}

4.DOM节点对象操作:

4.1:用DOM模型操作节点对象内容

获得节点对象的内容:节点对象.innerHTML
设置节点对象的内容:节点对象.innerHTML=“新值”;
清空节点对象的内容:节点对象.innerHTML="";

4.2:用DOM模型操作节点对象文本

获得节点对象的文本:节点对象.innerText
设置节点对象的文本:节点对象.innerText=“新值”;
清空节点对象的文本:节点对象.innerText="";

4.3:用DOM模型操作节点对象属性

获得节点对象的属性:节点对象.属性名
设置节点对象的属性:节点对象.属性名=“新值”;
清空节点对象的属性:节点对象.属性名="";

4.4:用DOM模型操作节点对象样式:节点对象.style.样式名=“样式值”;

eg:<html>
	<head>
		<meta charset="utf-8" />
		<title>获得元素节点对象的方式</title>
		<script type="text/javascript">
			function show1(){
				//获得节点对象的内容并弹出来
				alert(document.getElementById("d1").innerHTML);
			}
			
			function show2(){
				//设置节点对象的内容
				document.getElementById("d1").innerHTML="没有之一";
			}
			
			function show3(){
				//清空节点对象的内容
				document.getElementById("d1").innerHTML="";
			}
			
			function show4(){
				//获得节点对象的文本并弹出来
				alert(document.getElementById("d1").innerText);
			}
			
			function show5(){
				//设置节点对象的文本
				document.getElementById("d1").innerText="没有之一";
			}
			
			function show6(){
				//清空节点对象的文本
				document.getElementById("d1").innerText="";
			}
			
			function show7(){
				//获得节点对象的属性并弹出来
				alert(document.getElementById("d2").src);
			}
			
			function show8(){
				//设置节点对象的属性
				document.getElementById("d2").src="img/img-10.jpg";
			}
			
			function show9(){
				//清空节点对象的属性
				document.getElementById("d2").src="";
			}
			
			function show10(){
				//将body中背景色变红
				document.getElementsByTagName("body")[0].style.backgroundColor="red";
			}
			
			function show11(){
				//将body中背景色变绿
				document.getElementsByTagName("body")[0].style.backgroundColor="green";
			}
			
		</script>
	</head>
	<body>
		<h1 id="d1">java是世界上<span>最好</span>的语言</h1>
		<div><img id="d2" src="img/img-6.jpg" title="图片6" alt="图片加载失败"/></div>
		<input type="button" value="获得节点对象的内容" onclick="show1()" />
		<input type="button" value="设置节点对象的内容" onclick="show2()" />
		<input type="button" value="清空节点对象的内容" onclick="show3()" /><br />
		<input type="button" value="获得节点对象的文本" onclick="show4()" />
		<input type="button" value="设置节点对象的文本" onclick="show5()" />
		<input type="button" value="清空节点对象的文本" onclick="show6()" /><br />
		<input type="button" value="获得节点对象的属性" onclick="show7()" />
		<input type="button" value="设置节点对象的属性" onclick="show8()" />
		<input type="button" value="清空节点对象的属性" onclick="show9()" /><br />
		<input type="button" value="背景变红" onclick="show10()" />
		<input type="button" value="背景变绿" onclick="show11()" /><br />
	</body>
</html>

5.javaScript中常用事件:

5.1:onclick 鼠标点击某个对象

5.2:onchange 用户改变域的内容

5.3:onload 某个页面或图像被完成加载

5.4:onmouseover鼠标被移到某元素之上

5.5:onmouseout 鼠标从某元素移开

5.6:onfocus元素获得焦点

5.7:onblur 元素失去焦点

5.8:onsubmit 提交按钮被点击

	eg:<html>
	<head>
		<meta charset="utf-8" />
		<title>获得元素节点对象的方式</title>
		<script type="text/javascript">
			function change1(){
				//获得全选框对象
				var quan=document.getElementById("quan");
				//获得所有爱好框
				var hobbys=document.getElementsByName("hobby");
				if (quan.checked==true) {
					for (var i=0;i<hobbys.length;i++) {
						hobbys[i].checked=true;
					}
				} else{
					for (var i=0;i<hobbys.length;i++) {
						hobbys[i].checked=false;
					}
				}
			}
			
			//鼠标经过触发的函数
			function show1(){
				document.getElementById("d1").style.color="green";
			}
			
			//鼠标离开触发的函数
			function show2(){
				document.getElementById("d1").style.color="yellow";
			}
			
		</script>
	</head>
	<body>
		<h1 id="d1" onmouseover="show1()" onmouseout="show2()">今天大家每个同学要实现全选和全不选</h1>
		<div>
			<input type="checkbox" id="quan" name="quan" onchange="change1()"/>全选<br />
			<input type="checkbox" name="hobby" value="sleep"/>sleep<br />
			<input type="checkbox" name="hobby" value="game"/>game<br />
			<input type="checkbox" name="hobby" value="钓鱼"/>钓鱼<br />
			<input type="checkbox" name="hobby" value="basketball"/>basketball<br />
			<input type="checkbox" name="hobby" value="football"/>football<br />
		</div>
	</body>
</html>

6.事件机制:

6.1:捕获机制:当父元素与子元素具有相同的事件时,父元素的事件触发了,会自动触发子元素相同的事件,这叫捕获机制.(大部分浏览器不支持捕获机制)

6.2:冒泡机制:当父元素与子元素具有相同的事件时,子元素的事件触发了,会自动触发父元素相同的事件,这叫冒泡机制.(大部分浏览器支持冒泡机制)

eg:<html>
	<head>
		<meta charset="utf-8" />
		<title>获得元素节点对象的方式</title>
		<script type="text/javascript">
			function show1(){
				alert("这是按纽的单击事件");
				//阻止冒泡现象的产生,event指代当前事件对象
				event.stopPropagation();
			}
			
			function show2(){
				alert("这是div的单击事件");
			}
		</script>
	</head>
	<body>
		<div onclick="show2()">
			<input type="button" value="点我试试" onclick="show1()"/>
		</div>
	</body>
</html>

6.3:给元素绑定多个事件:节点对象.addEventListener(“事件名”,function(){事件操作});

		eg://在页面加载事件中执行
			function show(){
				//给节点对象绑定多个事件
				document.getElementById("d1").addEventListener("mouseover",function(){
					document.getElementById("d1").style.fontSize="50px";
				});
				
				document.getElementById("d1").addEventListener("mouseout",function(){
					document.getElementById("d1").style.fontSize="14px";
				});
			}

7.DOM操作节点

7.1:创建节点对象(3种)

7.2:添加节点对象(2种)

7.3:删除节点对象

	eg://页面加载事件
			function show(){
				/*第一种创建节点对象*/
				//创建标签节点对象
				var node1=document.createElement("h1");
				//创建文本对象
				var node1Text=document.createTextNode("这是一个h1标签");
				//将文本对象添加节点对象中
				node1.appendChild(node1Text);
				//将创建节点对象添加body中显示
				document.getElementsByTagName("body")[0].appendChild(node1);
				
				/*第二种创建节点对象*/
				var node2=document.createElement("h2");
				//给节点对象添加内容
				node2.innerHTML="这是<span>一个</span>h2标签";
				//第一种:将创建节点对象添加body中显示
				document.getElementsByTagName("body")[0].appendChild(node2);
				
				/*第三种创建节点对象*/
				//先获得body对象
				var ob=document.getElementsByTagName("body")[0];
				//第二种:向body对象中添加内容
				ob.innerHTML=ob.innerHTML+"<h3 id='d3'>这是一个h3标签,哈哈</h3>";
				
				/*删除节点*/
				//先获得body对象
				var ob=document.getElementsByTagName("body")[0];
				//获得body中要删除节点对象
				var h3node=document.getElementById("d3");
				//删除body中子元素
				ob.removeChild(h3node);
			}

8.前端程序调试

8.1:用代码调试:

在认为在问题的代码地方用alert()弹出一个消息;

8.2:用断点调试:

在浏览器页面->检查->source->打开要设计的页面->设置断点->重新加载调试页面->运行到断点处进入调试页面->再向下箭头一步一步调试,观察变量,找到出错地方.

9.超链接的问题:

如果一个超链接既有点击事件,又有href跳转,那么href跳转会影响点击事件执行效果.如果不想href影响点击事件执行,将href写成死链接。

<!--死链接-->
     <a href="javaScript:void(0);" onclick="show3()">超链接</a>

1.BOM:browser object model的简称,浏览器对象模型,将整个浏览器页面看作是window对象.

在这里插入图片描述

2.BOM浏览对象模型图:window对象是整个浏览器对象模型的核心.

3.history对象:

常用方法:
后退: history.back()<=>history.go(-1);
前进:history.forward()<=> history.go(1);
刷新:history.go(0);

	     eg:function show1(){
				//刷新当前页面
				history.go(0);
			}
			
			function show2(){
				//前进
				//history.forward();
				history.go(1);
			}

4.location对象

常用属性:
location.href 返回当前url
location.href=“url” 跳转到指定页面,效果等同于超链接
window.location.href=“url” 跳转到指定页面,效果等同于超链接
window.location=“url” 跳转到指定页面,效果等同于超链接
常用方法:
location.reload(); 重新加载当前页面(刷新)
location.replace() 用新的文档替换当前文档。

		eg:function show1(){
				alert(location.href);
			}
			
			function show2(){
				location.href="http://www.baidu.com";
			}
			
			function show3(){
				location.reload();
			}
			
			function show4(){
				location.replace("6.history常用方法.html");
			}

5.window对象

5.1:alert();

弹出一个确定框.

5.2:confirm();

弹出一个确定取消框,返回boolean类型的结果

5.3:prompt(“提示语”,[默认值]);

输入框,从浏览器接收数据

5.4:open(url,“窗体名”,“特征”);

弹出一个窗体

5.5:close();

关闭浏览器窗口。

5.6:setTimeout();

在指定的毫秒数后调用函数或计算表达式。

5.7:setInterval();

按照指定的周期（以毫秒计）来调用函数或计算表达式。

5.8:clearTimeout();

取消由 setTimeout() 方法设置的 timeout。

5.9:clearInterval();

取消由 setInterval() 设置的 timeout。

eg:<html>
	<head>
		<meta charset="UTF-8">
		<title>window对象常用方法</title>
		<script type="text/javascript">
			function show1(){
				window.alert("啊啊");
			}
			
			function show2(){
				var result=window.confirm("确定要删除吗?");
				alert(result);
			}
			
			function show3(){
				var content=window.prompt("请输入姓名:","sx");
				alert("接收值为:"+content);
			}
			
			function show4(){
				window.open("7.location对象常用方法.html","aa",
				"width=300,height=300,left=600,top=300");
			}
			
			var a1;
			function show5(){
			  a1=window.setTimeout(function(){
					alert("让眼睛休息一下");
				},5000);
			}
			
			var a2;
			function show6(){
				a2=window.setInterval(function(){
					alert("哈哈");
				},5000);
			}
			
			function show7(){
				window.clearTimeout(a1);
			}
			
			function show8(){
				window.clearInterval(a2);
			}
			
		</script>
	</head>
	<body>
		<input type="button" value="弹出一个确定框" onclick="show1()"/>
		<input type="button" value="弹出一个确定取消框" onclick="show2()"/>
		<input type="button" value="弹出一个输入框" onclick="show3()"/>
		<input type="button" value="弹出窗体" onclick="show4()"/>
		<input type="button" value="5秒后弹出一次消息" onclick="show5()"/>
		<input type="button" value="每隔5秒弹出一次消息" onclick="show6()"/>
		<input type="button" value="清除5秒后弹出一次消息" onclick="show7()"/>
		<input type="button" value="清除每隔5秒弹出一次消息" onclick="show8()"/>
	</body>
</html>

6.扩展功能

6.1:动态时钟

eg:<html>
	<head>
		<meta charset="UTF-8">
		<title>动态时钟</title>
		<script type="text/javascript">
			function show1(){
				//获得当前系统时间
				var today=new Date();
				var year=today.getFullYear();
				var monty=today.getMonth()+1;
				var day=today.getDate();
				var hour=today.getHours();
				var minute=today.getMinutes();
				var second=today.getSeconds();
				//将日期和时间在页面中显示
				document.getElementById("d1").innerHTML=
				year+"-"+monty+"-"+day+"&nbsp;&nbsp;"+hour+":"+minute+":"+second;
				
				setInterval("show1()",1000);
			}
			
		</script>
	</head>
	<body onload="show1()">
		<h1 id="d1"></h1>
	</body>
</html>

6.2:轮换图片

eg:<html>
	<head>
		<meta charset="UTF-8">
		<title>动态时钟</title>
		<script type="text/javascript">
			//声明变量存所有图片
			var arr=["img/img-6.jpg","img/img-7.jpg","img/img-8.jpg","img/img-9.jpg",
			"img/img-10.jpg","img/img-11.jpg","img/img-12.jpg","img/img-13.jpg"];
			//声明变量存图片在数组中索引
			var index=0;
			function show1(){
				document.getElementById("d1").src=arr[index];
				index++;
				if(index==arr.length){
					index=0;
				}
			}
			//每隔两秒切换图片
			setInterval("show1()",2000);
		</script>
	</head>
	<body onload="show1()">
		<img id="d1" src="" alt="图片加载失败"/>
	</body>
</html>

6.3:省市区三级联动.

<html>
	<head>
		<meta charset="UTF-8">
		<title>动态时钟</title>
		<script type="text/javascript">
			var arr=[{"pid":"1","pname":"广东省",
						"pcity":[{"cid":"1","cname":"深圳市",
								"areaList":[{"aid":"1","aname":"宝安区"},
											{"aid":"2","aname":"福田区"},
											{"aid":"3","aname":"龙岗区"}]},
								{"cid":"2","cname":"广州市",
								"areaList":[{"aid":"4","aname":"天河区"},
											{"aid":"5","aname":"越秀区"},
											{"aid":"6","aname":"白云区"}]},
								{"cid":"3","cname":"佛山市",
								"areaList":[{"aid":"7","aname":"南海区"},
											{"aid":"8","aname":"长城区"},
											{"aid":"9","aname":"顺德区"}]}
						
						]
					},
					{"pid":"2","pname":"湖北省",
						"pcity":[{"cid":"4","cname":"武汉市",
								"areaList":[{"aid":"10","aname":"武昌区"},
											{"aid":"11","aname":"汉口区"},
											{"aid":"12","aname":"汉阳区"}]},
								{"cid":"5","cname":"黄冈市",
								"areaList":[{"aid":"13","aname":"团风县"},
											{"aid":"14","aname":"罗田县"},
											{"aid":"15","aname":"英山县"}]},
								{"cid":"6","cname":"十堰市",
								"areaList":[{"aid":"16","aname":"竹溪县"},
											{"aid":"17","aname":"竹山县"},
											{"aid":"18","aname":"房县"}]}
						
						]
					},
					{"pid":"3","pname":"江西省",
						"pcity":[{"cid":"7","cname":"赣州市",
								"areaList":[{"aid":"19","aname":"南康区"},
											{"aid":"20","aname":"信丰县"},
											{"aid":"21","aname":"龙南县"}]},
								{"cid":"8","cname":"九江市",
								"areaList":[{"aid":"22","aname":"修水县"},
											{"aid":"23","aname":"九江县"},
											{"aid":"24","aname":"湖口县"}]},
								{"cid":"9","cname":"萍乡市",      
								"areaList":[{"aid":"25","aname":"湘东区"},
											{"aid":"26","aname":"安源区"},
											{"aid":"27","aname":"芦溪县"}]}
						
						]
					}
			
				];
				
				//页面加载事件
				function show1(){
					/*在省的下拉框中加载所有省*/
					//遍历所有省,动态加载到省的下拉框
					for (var i=0;i<arr.length;i++) {
						//获得省的下拉框对象
						var p1=document.getElementById("province");
						p1.innerHTML=p1.innerHTML+"<option value='"+arr[i].pid+"'>"+arr[i].pname+"</option>";
					}
					
					/*在市的下拉框中加载第一个省的所有市*/
					//遍历第一个省的所有市,动态加载到市的下拉框
					for (var i=0;i<arr[0].pcity.length;i++) {
						//获得市的下拉框对象
						var c1=document.getElementById("city");
						c1.innerHTML=c1.innerHTML+"<option value='"+arr[0].pcity[i].cid+"'>"+arr[0].pcity[i].cname+"</option>";
					}
					
					/*在区的下拉框中加载第一个省的第一个市的所有区*/
					//遍历第一个省的第一个市的所有区,动态加载到区的下拉框
					for (var i=0;i<arr[0].pcity[0].areaList.length;i++) {
						//获得区的下拉框对象
						var a1=document.getElementById("area");
						a1.innerHTML=a1.innerHTML+"<option value='"+arr[0].pcity[0].areaList[i].aid+"'>"+arr[0].pcity[0].areaList[i].aname+"</option>";
					}
				}
				
				//省的下拉框变动
				function show2(){
					//获得选中省在数据中索引
					var index=document.getElementById("province").selectedIndex;
					//获得选中省所有市
					var arr2=arr[index].pcity;
					//清空市的下拉框
					document.getElementById("city").innerHTML="";
					
					//遍历当前省的所有市,动态加载到市的下拉框
					for (var i=0;i<arr2.length;i++) {
						//获得市的下拉框对象
						var c1=document.getElementById("city");
						c1.innerHTML=c1.innerHTML+"<option value='"+arr2[i].cid+"'>"+arr2[i].cname+"</option>";
					}
					
					//获得选中省第一个市的所有区
					var arr3=arr[index].pcity[0].areaList;
					//清空区的下拉框
					document.getElementById("area").innerHTML="";
					
					//遍历当前省的第一个市的所有区,动态加载到区的下拉框
					for (var i=0;i<arr3.length;i++) {
						//获得市的下拉框对象
						var a1=document.getElementById("area");
						a1.innerHTML=a1.innerHTML+"<option value='"+arr3[i].aid+"'>"+arr3[i].aname+"</option>";
					}
				}
				
				//市的下拉框变动
				function show3(){
					//获得当前省在数组中索引
					var index1=document.getElementById("province").selectedIndex;
					//获得当前选中高的索引
					var index2=document.getElementById("city").selectedIndex;
					//获得当前选中市的所有区
					var arr3=arr[index1].pcity[index2].areaList;
					
					//清空区的下拉框
					document.getElementById("area").innerHTML="";
					
					//遍历当前省的第一个市的所有区,动态加载到区的下拉框
					for (var i=0;i<arr3.length;i++) {
						//获得市的下拉框对象
						var a1=document.getElementById("area");
						a1.innerHTML=a1.innerHTML+"<option value='"+arr3[i].aid+"'>"+arr3[i].aname+"</option>";
					}
				}
			
		</script>
	</head>
	<body onload="show1()">
		<select id="province" onchange="show2()">
			
		</select>省
		<select id="city" onchange="show3()">
			
		</select>市
		<select id="area">
			
		</select>区
	</body>
</html>

6.4:表单验证

eg:<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	//验证用户名
	function isUname() {
		//获得用户名的文本框值
		var uname=document.getElementById("uname").value;
		if (uname=="") {
			document.getElementById("uname1").innerHTML="用户名不能为空";
			document.getElementById("uname1").style.color="red";
			return false;
		} else {
			document.getElementById("uname1").innerHTML="√";
			document.getElementById("uname1").style.color="green";
			return true;
		}
	}
	
	//验证密码
	function isPwd() {
		//获得密码框的值
		var pwd=document.getElementById("pwd").value;
		//声明密码正则表达式
		var reg=/^\d{6}$/;
		if (reg.test(pwd)) {
			document.getElementById("pwd1").innerHTML="√";
			document.getElementById("pwd1").style.color="green";
			return true;
		} else {
			document.getElementById("pwd1").innerHTML="你的密码输入有误,密码必须为6位数字";
			document.getElementById("pwd1").style.color="red";
			return false;
		}
	}
	
	//验证出生日期
	function isBirthday() {
		//获得日期框的值
		var birthday=document.getElementById("birthday").value;
		if (birthday=="") {
			document.getElementById("birthday1").innerHTML="出生日期不能为空";
			document.getElementById("birthday1").style.color="red";
			return false;
		} else {
			document.getElementById("birthday1").innerHTML="√";
			document.getElementById("birthday1").style.color="green";
			return true;
		}
	}
	
	//表单提交验证
	function  check1() {
		if (isUname()==true&&isPwd()==true&&isBirthday()==true) {
			return true;
		}else{
			alert("页面信息填写不完整,无法提交");
			return false;
		}
	}
</script>
</head>
<body>
	
	<form method="get" action="RegisterServlet" onsubmit="return check1()">
		<table>
			<tr>
				<td></td>
				<td><h1>注册页面</h1></td>
				<td></td>
			</tr>
			<tr>
				<td>用户名:</td>
				<td><input type="text" name="uname" id="uname" onblur="isUname()"/></td>
				<td id="uname1">*</td>
			</tr>
			<tr>
				<td>密码:</td>
				<td><input type="password" name="pwd" id="pwd" onblur="isPwd()"/></td>
				<td id="pwd1">密码必须为6位数字</td>
			</tr>
			<tr>
				<td>性别:</td>
				<td>
					<input type="radio" name="sex" value="man" checked="checked"/>男
					<input type="radio" name="sex" value="woman"/>女
				</td>
				<td></td>
			</tr>
			<tr>
				<td>爱好:</td>
				<td>
					<input type="checkbox" name="hobby" value="basketball"/>篮球
					<input type="checkbox" name="hobby" value="pingpang"/>乒乓球<br/>
					<input type="checkbox" name="hobby" value="rap"/>rap
					<input type="checkbox" name="hobby" value="swimming"/>游泳
				</td>
				<td></td>
			</tr>
			<tr>
				<td>出生日期:</td>
				<td>
					<input type="date" name="birthday" id="birthday" onblur="isBirthday()"/>
				</td>
				<td id="birthday1">*</td>
			</tr>
			<tr>
				<td>出生城市:</td>
				<td>
					<select name="city">
						<option value="beijing">北京</option>
						<option value="newyork">纽约</option>
						<option value="shanghai">上海</option>
						<option value="hongkong">香港</option>
						<option value="shenzhen">深圳</option>
					</select>
				</td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td>
					<input type="submit" value="注册"/>
					<input type="reset" value="重置"/>
				</td>
				<td></td>
			</tr>
		</table>
	</form>
</body>
</html>

总结
1.dom定义和作用.
2.获得节点4种方式(重点)
3.用dom操作节点内容,文本,属性,样式(重点)
4.dom中常用事件
5.冒泡机制
6.用DOM创建,添加,删除节点(重点)
7.程序调试和超链接(重点)
8.bom定义和作用
9.history对象常用属性和方法
10.location对象常用属性和方法(重点)
11.window对象常用属性和方法(重点)

一贤不穿小鞋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
43.DOM和BOM

@一贤不穿小鞋1.DOM:document object model的简写,文档对象模型.将整个html页面看作倒挂的树,html页面每个标签看作树的节点对象.2.DOM的作用:2.1:有了DOM模型后,可以操作节点的内容.2.2:有了DOM模型后,可以操作节点的属性.2.3:有了DOM模型后,可以操作节点的样式.2.4:有了DOM模型后,可以操作节点的事件.3.获得元素节点对象的方式前提这个节点对象(标签要加载完成才能获得)3.1:document.getElementByI
复制链接

扫一扫