JavaScript正则表达式及文档对象模型

Hrgge^0^

已于 2022-09-25 20:53:39 修改

阅读量282

点赞数

文章标签： javascript 正则表达式开发语言

于 2022-09-25 19:28:37 首次发布

本文链接：https://blog.csdn.net/Hrgge/article/details/127041355

版权

一.正则表达式对象

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

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

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

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

中文字符:/^[\u4e00-\u9fa5]$/

邮箱:/^[0-9a-zA-Z]+@ [0-9a-zA-Z]+[\.]{1}[0-9a-zA-Z]+$/

电话:/^(\d{3,4}-)?\d{7,8}$/

月份:/^((0?[1-9])|1[0-2])$/

天数:/^((0?[1-9])(((1|2)[0-9])|3031)$/

二.文档对象模型 (DOM)

DOM-Document Obiect Model，它是W3C国际组织的一套Web标准。它以树形结构表示文档
(HTMLXML等)，定义了遍历、检查和修改各节点的属性和方法。

W3C组织将DOM分为以下几种不同版本:
Core DOM:定义任意结构文档的标准对象售合
XMLDOM:定义了针对XML文件的标准对象集合
HTML DOM:定义了针对HTML文件的标准对象集合
DOMCSS:定义了在程序中操作CSS样式的接口
DOM Events:给DOM对象添加事件处理

DOM(Document Obiect 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" name="" id="btn" value="点击" />
		<div id="div1">
			这是div1
		</div>
		<div id="div2">
			这是div2
		</div>
		<div id="div3">
			这是div3
		</div>
		<ul>
			<li>列表项1</li>
			<li>列表项1</li>
			<li>列表项1</li>
			<li>列表项1</li>
		</ul>
		<span class="sp">
			这是一个span标签
		</span>
		<p class="sp"></p>
		<input type="text" name="uname"  value="" />
		<input type="radio" name="sex" id="" value="" />男
		<input type="radio" name="sex" id="" value="" />女
		<script type="text/javascript">
			//使用document获取标签的几种方式
			/* var div1=document.getElementById("div1")
			var div2=document.getElementById("div2")
			console.log(div1)
			console.log(div2) */
			//如果这个标签有id属性，那么可以直接使用id的值就可以获取到该标签
			console.log(btn)
			console.log(div1)
			btn.onclick=function(){
				//alert("aa")
				//通过标签名来获取标签
				var divs=document.getElementsByTagName("div")
				//console.log(divs)
				for(var i=0;i<divs.length;i++){
					console.log(divs[i])
				}
				//要获取到页面中所有应用了.sp标签
				var sps=document.getElementsByClassName("sp")
				console.log(sps)
				sps[0].innerHTML="更改后的span"
				
				var sexs=document.getElementsByName("sex")
				console.log(sexs[0].value)
				
				console.log(document.querySelector("#div1"))
				console.log(document.querySelector("div"))
				console.log(document.querySelectorAll("div"))
			}
		</script>
	</body>
</html>