1、DOM模型
DOM全称Document Object Model即文档对象模型。直白的说就是把html文档中的标签、属性、文本都转化成对象来管理。
Document对象：
Document对象的理解：
- document它管理了所有的HTML文档内容
- document它是一种树结构的文档，有层级关系
- 它让我们把所有的标签都对象化
- 我们可以通过document访问所有的标签对象
关于标签对象化的理解：
//先类比Java
有一个年龄22、性别男、名字9527的人，将这个人的信息对象化：
class Person{
private int age;
private String sex;
private String name;
}
现在有一个html标签：
<body>
<div id="div01">div01</div>
</body>
模拟对象化，相当于：
class Dom{
private String id; //id属性
private String tagName; //标签名
private Dom parentNode; //父元素
private List<DOm> children; //子元素
private String innerHTML; //起始标签和结束标签之间的内容
}
直白理解：标签对象化就是用一个类去记录一下这些相关信息
2、Document对象中的方法
- document.getElementById(elementId)
通过标签的id属性查找dom对象，elementId是标签的id属性值 - document.getElementByName(elementName)
通过标签的name属性查找dom对象，elementName是标签的name属性值 - document.getElementByTagName(tagName)
通过标签名查找dom对象，tagname是标签名
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
/*
* 需求：当用户点击校验按钮，要获取输入框中的内容，然后校验是否合法
* 合法规则是：必须由数字、字母、下划线组成，且长度是5-12位
**/
function onclickFun(){
//要操作一个标签，则先是获取这个标签对象
var usernameObj = document.getElementById("username");
//获取输入框的值，html第一章中可知是value属性，可以看到这个标签对象还有type和id属性
var usernameText = usernameObj.value;
//验证字符串是否符合某个规则，用正则表达式取匹配
var patt = /^\w{5,12}$/;
/*
* test()方法用于测试某个字符串是不是匹配我的规则
* 匹配返回true，不匹配返回false
**/
if(patt.test(usernameText)){
alert("用户名合法");
}else{
alert("用户名不合法");
}
}
</script>
</head>
<body>
用户名：<input type="text" id="username"/>
<button onclick="onclickFun();">校验</button>
</body>
</html>
运行效果：
3、正则表达式对象
正则表达式是描述字符模式的对象，用于对字符串模式匹配、检索、替换。
语法：
var patt = new RegExp(pattern,modifiers);
或者：
var patt = /pattern/modifiers;
- pattren：描述表达式的模式
- modifiers：修饰符，用于指定全局匹配、区分大小写的匹配和多行匹配
1）单个符号
| 符号 | 用法与含义 |
|---|---|
| ^ | 匹配输入字符串开始的位置 |
| $ | 匹配输入字符串结尾的位置 |
| . | 匹配单个任意字符，如Ja.a，可以匹配Java但不能匹配Javva |
| 中括号[] | 匹配单个字符，但只能匹配括号中指定的字符，如ja[vr]a，jara合法 |
| | 符号 | 或，和中括号[]类似，匹配指定的字符,但可以不是单个，如r(a|b|c|dd)n |
| ^符号 | 表示否，如[^0—9]即不匹配数字 |
2）次数符号
以下符号是匹配其前面的子表达式出现的次数：
| 符号 | 次数 |
|---|---|
| * | 0次或者多次 |
| + | 1次或者多次 |
| ? | 0次或者1次 |
| {n} | 刚好n次 |
| {n,} | 至少匹配n次 |
| {n,m} | n次到m次 |
举个栗子：
o{2}与"Bob"中的"o"不匹配，但与"food"中的两个"o"匹配。
o{1,}等效于o+
o{0,}等效于o*
o{0,1}'等效于 o?
3）快捷字符
| 符号 | 含义 |
|---|---|
| \d | 匹配一个数字字符，等价于 [0-9] |
| \D | 匹配一个非数字字符，等价于 [^0-9] |
| \w | 匹配字母、数字、下划线，等价于[A-Za-z0-9_] |
| \W | 等价于[^A-Za-z0-9_] |
| \s | 空字符，只可以匹配一个空格、制表符、回车符、换页符，不可以匹配自己输入的多个空格 |
| \S | 匹配任何非空白字符 |
更多字符可以参考#这里
举例：
......
<script type="text/javascript">
//表示字符串中是否包含字母e
//也可写为var patt = /e/;
var patt = new RegExp("e");
//alert(patt);
var str = "qwe123";
alert( patt.test(str) );
</script>
运行结果：
本文含有隐藏内容，请 开通VIP 后查看