正则表达式、DOM对象_dom 匹配-CSDN博客

本文链接：https://blog.csdn.net/weixin_73667562/article/details/127029617

正则表达式

正则表达式主要用于表单验证，如手机号、邮箱、身份证等

在使用正则表达式之前，首先要创建正则表达式对象。

JavaScript提供了两种构建方法:
使用正则标识字符串:var reg=/patterm/[flags]
使用内置正则表达式对象:var reg=newRegExp("pattern",["flags])
pattern表示要使用的正则表达式模式，也就是由的特殊字符或普通字符所组成的表达式。
flags标志位，可选项，有g(全文查找) i(忽略大小写)、m(多行查找)三种。

匹配符	说明
^、$	匹配前面的子表达式0-多次
+	匹配前面的子表达式1-多次
?	匹配前面的子表达式0-1次
{n,m}	匹配前面的子表达式n-m次
.	匹配除“\n”之外的任意字符
(xly)	匹配x或y
[]	匹配所包含的任意一个字
[^]	匹配非包含的任意一个字符
[-]	匹配指定范围内的任意一个字符

匹配符	说明
\b	匹配单词边界
\d	匹配单个数字字符[0-9]
\f	匹配单个换页符
\n	匹配单个换行符
\r	匹配单个回车符
\s	匹配任何空白符，包括空格、制表符、换页符等\An\ritiv]
\t	匹配单个制表符
\v	匹配单个垂直制表符
\w	匹配包含下划线的任意单个字符[0-9a-zA-Z」

compile()方法。把正则表达式编译为内部格式，从而执行更快使用新正则去替换旧正则，主要用于提升比较复杂和耗时的处理过程的性能，一般情况下很少使用。
mexec()方法。用正则表达式在字符串中查找，并返回包含结果的一个数组。不仅用于判断给定的字符串是否匹配，而且会返回匹配结果的详细信息。
mtest()方法。返回一个bool值，它指出被查找的字符串是否匹配给定的模式。使用频繁，主要用于匹配测试。匹配成功返回true，否则返回false。

中文字符:/^[\u4e00-\u9fa5]+$/
邮箱:/^[0-9a-zA-Z_]+@[0-9a-zA-Z_]+[1.]{1}[0-9a-zA-Z+$/;
电话:/^(d{3,4}-)?\d{7,8}$/
月份:/^((0?[1-9])1[0-2])$/
天数:/^((0?[1-9])|((1|2)[0-9])|30|31)$/

DOM对象

DOM-Document Object Model,它是W3C国际组织的一套Web标准
(HTMlXML等),定义了遍历、检查和修改各节点的属性和方法
W3C组织将DOM分为以下几种不同版本:
Core DOM:定义任意结构文档的标准对象集合
XML DOM:定义了针对XM文件的标准对象集合
HTML DOM:定义了针对HTML文件的标准对象集合
DOM CSS:定义了在程序中操作CS样式的接口
DOM Events:给DOM对象添加事件处理

DOM(Document Object Model):文档对象模型可以干什么?
(1)获取一个元素(2)移除一个元素(3)创建一个元素
(4)向页面里面添加一个元素
(5)给元素绑定一些事件
(6)获取元素的属性
(7)给元素添加一些css样式
DOM的核心对象就是document对象
document对象是浏览器内置对象的一个对象，里面存储着专门用来操作元素的各种方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.sp{
				color: red;
			}
		</style>
	</head>
	<body>
		<input type="button" id="btn" value="点击" />
		<div id="div1">
			这是div1
		</div>
		<div id="div2">
			这是div2
		</div>
		<div id="div">
			第三个盒子
		</div>
			<input type="radio" name="sex"/>男  
			<input type="radio" name="sex"/>女</br>
			
		<span class="sp">
			这是个span标签
		</span>
		<p class="sp"></p>
	
		<input type="text" name="uname" value="" />
		<script type="text/javascript">
			
			//使用document获取标签的几种方式
			//1.通过id获取
		var div1=document.getElementById("div1")
		var div2=document.getElementById("div2")
		console.log(div1)	
		console.log(div2)
		//如果这个标签有id属性，可以直接使用id的值获取该标签
			 console.log(btn)
			 console.log(div1)
		  //2.根据标签名获取
		  var divs=document.getElementsByTagName("div")
		  for(var i=0;i<divs.length;i++){
			  console.log(divs[i])
		  }
		  //3.根据ClassName获取
		  var sps=document.getElementsByClassName("sp")
		  for(var i=0;i<sps.length;i++){
			  console.log(sps[i])
			 sps[0].innerHTML="更改后的span"
		  }
		  //4.根据name获取
		  var sexs=document.getElementsByName("sex")
		  console.log(sexs[0].value)
		  //5.根据选择器获取
		  console.log(document.querySelector("#div1"))
		  console.log(document.querySelector("div"))
		  console.log(document.querySelectorAll("div"))
		</script>
	</body>
</html>