HTML DOM 操作详解-优快云博客

本文链接：https://blog.youkuaiyun.com/ZJ_1011487813/article/details/113127584

HTML_DOM对象

DOM是Document Object Model文档对象（网页中的标签）模型的缩写.

通过html dom，可用javaScript操作html文档的所有标签.

通过JavaScript想要操作标签,就必须找到标签

要操作,先得到

方法:

通过 id 找到 HTML 标签

document.getElementById(“id");

通过标签名找到 HTML 标签

document.getElementsByTagName(“p”);

通过类名找到 HTML 标签

document.getElementsByClassName(“p”);

通过name找到 HTML 标签

document.getElementsByName(“name");

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			/*
			    对象:
				内置对象 : js语法中定义好的
			    DOM对象: 指的是一类对象的总称
			   HTML DOM(Document Object Model) 文档对象模型
			   DOM:在js对网页进行操作时,认为网页中的每一个标签就是一个对象,
			       使用面向对象的思想来操作.
				   
				 js中提供了一个document对象,表示整个html文档对象,网页加载后会自动生成表示此文档的document对象
				 通过document对象中提供的方法精确获得网页中要操作的标签
				 
				 要操作,先得到
				 document.getElementById("id"); 通过标签的id 获得标签
				 obj1.value  操作标签的属性
				 1.js对网页操作--
				 tobj1.value;  bodyObj.bgColor; 操作标签的属性
			*/
		   function oper(){
		   			 var tobj1 =  document.getElementById("text1");//获得是一个标签对象
		   			 //console.log(tobj1.value);//对象名.属性  获得属性值
		   			 var tobj2 = document.getElementById("text2"); 
		   			 
		   			      tobj2.value  = tobj1.value;
		   				  //tobj1.value  = "";
		   				  tobj1.type="button";
		   }
			
			function changColor(color){
						    var bodyObj = document.body;//获得boday标签对象
							 bodyObj.bgColor = color;
			}
			
		</script>
	</head>
	<body>
		<!--
		 案例:
		  点击操作按钮,将第一个文本框的值,赋给第二个文本框,然后将第一个文本框清空
		 -->
		<input type="text" id="text1"  />
		<input type="text"  id="text2" />
		<input type="button"  value="操作" onclick="oper()"  />
		
		<input type="button"  value="红色" onclick="changColor('red')" />
		<input type="button" value="蓝色" onclick="changColor('blue')" />
		<input type="button" value="绿色" onclick="changColor('green')"/>
		
	</body>
</html>

Html DOM允许javaScript 改变html标签的内容。

改变 HTML 标签的属性

document.getElementById(“username").value=“new value";
document.getElementById(“image”).src=“new.jpg";

修改 HTML 内容的最简单的方法时使用 innerHTML 属性

document.getElementById(“div”).innerHTML=new HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			/*
			    对象:
				内置对象 : js语法中定义好的
			    DOM对象: 指的是一类对象的总称
			   HTML DOM(Document Object Model) 文档对象模型
			   DOM:在js对网页进行操作时,认为网页中的每一个标签就是一个对象,
			       使用面向对象的思想来操作.
				   
				 js中提供了一个document对象,表示整个html文档对象,网页加载后会自动生成表示此文档的document对象
				 通过document对象中提供的方法精确获得网页中要操作的标签
				 
				 要操作,先得到
				 document.getElementById("id"); 通过标签的id 获得标签
				 obj1.value  操作标签的属性
				 1.js对网页操作--
				 tobj1.value;  bodyObj.bgColor; 操作标签的属性
				 2.js对网页操作--标签内容操作
				 innerHTML    获得标签内的html内容(解析)
				 inerText    获得标签内文本内容(不解析)
			*/
			function oper(){
				var dobj1=document.getElementById("div1");
				var dobj2=document.getElementById("div2");
				
				//console.log(dobj1.innerHTML);  //获得标签内的html内容
				dobj2.innerHTML=dobj1.innerHTML;
			}
		</script>
	</head>
	<body>
		<div id="div1">
			div1的标签体内容
		</div>
		<div id="div2">
			
		</div>
		<input type="button"  value="操作" onclick="oper()"  />
	</body>
</html>

html dom 使javaScript有能力对html事件做出反应。

document.getElementById(“bid”).οnclick=function(event){//匿名函数

//函数体

}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			/*
			    对象:
				内置对象 : js语法中定义好的
			    DOM对象: 指的是一类对象的总称
			   HTML DOM(Document Object Model) 文档对象模型
			   DOM:在js对网页进行操作时,认为网页中的每一个标签就是一个对象,
			       使用面向对象的思想来操作.
				   
				 js中提供了一个document对象,表示整个html文档对象,网页加载后会自动生成表示此文档的document对象
				 通过document对象中提供的方法精确获得网页中要操作的标签
				 
				 要操作,先得到
				 document.getElementById("id"); 通过标签的id 获得标签
				 obj1.value  操作标签的属性
				 1.js对网页操作--
				 tobj1.value;  bodyObj.bgColor; 操作标签的属性
				 2.js对网页操作--标签内容操作
				 innerHTML    获得标签内的html内容(解析)
				 inerText    获得标签内文本内容(不解析)
				 3.js对网页操作--标签的样式(css属性)操作
				 divobj.style.backgroundColor="red";
				 4.js对网页操作--事件操作
			*/
			/* function oper(){
				
			} */
			//在js中为标签动态的绑定事件处理函数
		    function  loadBody(){
				//先需要让网页中的标签加载,然后获得标签,绑定处理函数 
				document.getElementById("but1").onclick=function(){   //匿名函数
					console.log("aaa");
				}
			}	
		</script>
	</head>
	<body onload="loadBody()">
		
						<!-- 在标签中添加事件,并为事件绑定处理函数 -->
		 <!-- <input type="button"  value="操作" οnclick="oper()"  /> -->
		 <input type="button"  value="操作" id="but1" onclick="" />
		
		<!-- <script type="text/javascript">
			//在js中为标签动态的绑定事件处理函数
			document.getElementById("but1").οnclick=function(){
				console.log("aaa");
			}
		</script> -->
	</body>
</html>

注意：此段脚本要么写在onload中，要么写在此dom标签之后。

表单验证

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证

被 JavaScript 验证的这些典型的表单数据有：

用户是否已填写表单中的必填项目,内容长度？
用户输入的内容格式是否合法？例如邮箱，手机号，邮编格式等

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function check(){
				var account=document.getElementById("accountId").value;
				if(account.length==0){
					alert("请输入用户名");
					return false;//阻止表单提交
				}
				if(account.length<3||account.length>10){
					alert("请输入3-10位用户名");
					return false;
				}
				return true;
			}
		</script>
	</head>
	<body>
		<!--
		   提交表单时,对表单内容进行验证,不符合要求阻止表单提交 
		   onsubmit事件:当点击submit按钮时触发,调用处理函数,函数返回true提交表单,false-不提交
		 -->
		 <form action="serve.html" method="get" onsubmit="return check()">
		 	用户名:<input type="text" name="account" id="accountId" value="" /><br>
			密码:<input type="text" /> <br>
			<input type="submit" value="保存"/>
		 </form>
	</body>
</html>

表单验证___正则表达式

RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具。

是一个描述字符模式的对象

符合某种规则的表达式

一种对文字进行模糊匹配的语言

用某种模式去匹配一类字符串的一个公式

基本语法：

var reg = new RegExp(“表达式”);

var reg = /表达式/;

正则表达式符号所代表的含义

^匹配以指定字符开头的字符串

$匹配以指定字符结尾的字符串

*匹配前面的字符式零次或多次

{n}匹配确定的 n 次

{n,}至少匹配n 次

{n,m}匹配n-m次，包含n和m

[0-9]表示0-9之间的任意字符

\d 匹配一个数字字符。等价于 [0-9]

\D 匹配一个非数字字符。等价于 [^0-9]

[a-z]匹配 ‘a’ 到 ‘z’ 范围内的任意小写字母字符

[A-Z]匹配 ‘A’ 到 ‘Z’ 范围内的任意大写字母字符

[^a-z]匹配任何不在 ‘a’ 到 ‘z’ 范围内的任意字符

x|y匹配 x 或 y

\w等价于’[A-Z,a-z,0-9,_]‘

\W 等价于 '[^A-Z,a-z,0-9,_]‘

只能输入汉字:[\u4e00-\u9fa5]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function cV(obj){
				 //var reg = new RegExp("a");
				  //var reg  = /^\d$/;
				  //var reg  = /^\d+$/;
				  //var reg  = /^[A-z]+$/;
				  //var reg  = /^\w+$/;
				  //var reg  = /^(com|com\.cn)$/;
				   var reg  = /^[\u4e00-\u9fa5]{2,10}$/; 
				   var res = reg.test(obj.value);
				 console.log(res);
				 
			}
		</script>
	</head>
	<body>
		
		<!-- this是事件所在的标签对象 -->
		<input type="text" onblur="cV(this)" />  
	</body>
</html>