• 【JavaWeb】第四章 DOM与正则表达式

    文章目录

    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;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    现在有一个html标签：

    <body>
	<div id="div01">div01div>
body>

    • 1
    • 2
    • 3

    模拟对象化，相当于：

    class Dom{
	private String id; //id属性
	private String tagName;  //标签名
	private Dom parentNode; //父元素
	private List<DOm> children; //子元素
	private String innerHTML; //起始标签和结束标签之间的内容
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    直白理解：标签对象化就是用一个类去记录一下这些相关信息

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35

    运行效果：
    在这里插入图片描述

    3、正则表达式对象

    正则表达式是描述字符模式的对象，用于对字符串模式匹配、检索、替换。

    语法：

    var patt = new RegExp(pattern,modifiers);
或者：
var patt = /pattern/modifiers;

- pattren：描述表达式的模式
- modifiers：修饰符，用于指定全局匹配、区分大小写的匹配和多行匹配

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    修饰符：

    在这里插入图片描述

    模式：

    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次

    举个栗子：

    //表示字符串必须以a结尾
var patt = /a$/; 

//表示字符串必须以a开头
var patt = /^a/;

//要求字符串包含3-5个a
var patt1 = /a{3,5}/;
//要求字符串从头到尾一共包含3-5个a
var patt2 = /^a{3,5}$/;
var str = "aaaaaaa";
alert( patt1.test(str) );//true
alert( patt2.test(str) );//false

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    o{2}与"Bob"中的"o"不匹配，但与"food"中的两个"o"匹配。
o{1,}等效于o+
o{0,}等效于o*
o{0,1}'等效于 o?

    • 1
    • 2
    • 3
    • 4

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    运行结果：
    在这里插入图片描述
    在这里插入图片描述

    4、两种常见的验证提示效果

    常见的校验错误提示是不会用alert弹窗来提示的

    效果一

    在输入框后面加span标签，通过给标签对象的innerHTML属性赋值，来实现不同情况下的不同提示。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onclickFun(){
            //要操作一个标签，则先是获取这个标签对象
            var usernameObj = document.getElementById("username");
           
            var usernameText = usernameObj.value;
            
            var patt = /^\w{5,12}$/;
            
            var usernameSpanObj = document.getElementById("usernameSpan");
			//标签对象中，innerHTML属性表示起始标签和结束标签之间的内容
			//alert(usernameSpanObj.innerHTML);
			//innerHTML属性可读可写，即可直接赋值
            if(patt.test(usernameText)){
                //alert("用户名合法");
                usernameSpanObj.innerHTML = "用户名合法"
            }else{
                //alert("用户名不合法");
                usernameSpanObj.innerHTML = "用户名不合法！"
            }
        }
    </script>
</head>
<body>
    用户名：<input type="text" id="username"/>
    <span id="usernameSpan" style="color:red;"></span><br/>
    <button onclick="onclickFun();">注册</button>

</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35

    运行效果：
    在这里插入图片描述

    牢记思路：要操作一个标签，则是先获取这个标签对象

    效果二

    校验正确时打勾，错误时打叉。提前将√和❌的图片复制到工程目录下。

    思路：

    和效果一操作span标签内容一样，不同的是标签中间放的不是文字，而是图片。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onclickFun(){
            //要操作一个标签，则先是获取这个标签对象
            var usernameObj = document.getElementById("username");           
            var usernameText = usernameObj.value;            
            var patt = /^\w{5,12}$/;           
            var usernameSpanObj = document.getElementById("usernameSpan");			
            if(patt.test(usernameText)){
                usernameSpanObj.innerHTML = "";
            }else{
                usernameSpanObj.innerHTML = "";
            }
        }
    </script>
</head>
<body>
    用户名：<input type="text" id="username"/>
    <span id="usernameSpan" style="color:red;"></span><br/>
    <button onclick="onclickFun();">注册</button>

</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

    运行效果：
    在这里插入图片描述
    在这里插入图片描述

    5、getElementsByName方法

    • getElementsByName()方法是根据指定的name属性返回多个标签对象的集合（数组）。
    • 集合中的每个元素都是dom对象，且集合中元素的顺序就是他们在html页面中从上到下的顺序。

    举例：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function checkAll(){
            //document.getElementsByName()方法是根据指定的name属性查询返回多个标签对象的集合
            //alert(hobbies);可以看到是一个ObjectList
            var hobbies = document.getElementsByName("hobby");
            //上面这个hobbies集合的操作跟数组一样
            //集合中的每个元素都是dom对象，集合中元素的顺序就是他们在html页面中从上到下的顺序
            //checked属性表示复选框的状态，选中时为true，未选中为false，之前的checked=checked表示默认选中
            //checked属性同innerHTML，也可读可写
            //alert(hobbies[0].checked)
            for (var i=0; i<hobbies.length;i++){
                hobbies[i].checked=true;
            }

        }
        //全不选
        function checkNo(){
            var hobbies = document.getElementsByName("hobby");
            for (var i=0; i<hobbies.length;i++){
                hobbies[i].checked=false;
            }
        }
        //反选
        function checkReverse(){
            var hobbies = document.getElementsByName("hobby");
            for (var i=0; i<hobbies.length;i++){
                hobbies[i].checked=!(hobbies[i].checked);
            }
        }

    </script>
</head>
<body>
  兴趣爱好：<br/>
  <input type="checkbox"  name="hobby" value="python">python
  <input type="checkbox" name="hobby" value="java">java
  <input type="checkbox" name="hobby" value="javascript">javascript
  <br/>
<button onclick="checkAll();">全选</button>
<button onclick="checkNo();">全不选</button>
<button onclick="checkReverse();">反选</button>

</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49

    运行效果：
    在这里插入图片描述

    在这里插入图片描述

    小复习：

    getElementById()方法是返回拥有指定id的第一个标签对象的引用。

    6、getElementsByTagName方法

    当标签没有提供id属性，也没有提供name属性，那么我们还可以利用标签名。

    • getElementsByTagName()方法是根据标签名来进行查询并返回集合
    • 集合中的每个元素都是dom对象，且集合中元素的顺序就是他们在html页面中从上到下的顺序。

    举例：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function checkAll(){
            var inputs = document.getElementsByTagName("input"); 
            //alert(inputs)
            for (var i=0; i<inputs.length;i++){
                inputs[i].checked=true;
            }

        }
        //全不选
        function checkNo(){
            var inputs = document.getElementsByTagName("input");
            for (var i=0; i<inputs.length;i++){
                inputs[i].checked=false;
            }
        }
        //反选
        function checkReverse(){
            var inputs = document.getElementsByTagName("input");
            for (var i=0; i<inputs.length;i++){
                inputs[i].checked=!(inputs[i].checked);
            }
        }

    </script>
</head>
<body>
  兴趣爱好：<br/>
  <input type="checkbox" value="python">python
  <input type="checkbox" value="java">java
  <input type="checkbox" value="javascript">javascript
  <br/>
<button onclick="checkAll();">全选</button>
<button onclick="checkNo();">全不选</button>
<button onclick="checkReverse();">反选</button>

</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43

    在这里插入图片描述

    document对象的三个查询方法的注意事项

    • 如果有id属性，优先使用getElementById
    • 没有id属性，优先使用getElementsByName方法来查询
    • id属性和name属性都没有，再用getElementsByTagName
    • 以上三个方法，代码一定要在页面加载完成之后 ，页面没加载完成，即标签对象都没创建出来，此时查询标签对象一定报错null。对于单独的语句，要放进window.onload = function(){…}中

    7、节点的常用属性和方法

    参考文章开头的DOM模型，文字、注释、标签等等都是节点，但也可以狭义的理解成：节点就是标签对象。

    方法：

    • getElementsByTagName()方法：通过具体的元素节点调用该方法，获取当前节点的指定标签名孩子节点。（之前的练习是用整个页面文档对象document）
    • appendChild(oChildrenNode)方法：添加一个子节点，oChildNode是要添加的孩子节点

    属性：

    • childNodes属性：获取当前节点的所有子节点
    • firstChild属性：获取当前节点的第一个子节点
    • lastChild属性：获取当前节点的最后一个子节点
    • parentNode属性：获取当前节点的父节点
    • nextSibling属性：获取当前节点的下一个节点
    • previousSibling属性：获取当前节点的上一个节点
    • className属性：用于获取或设置标签的class属性值
    • innerHTML属性：表示获取、设置起始标签和结束标签中的内容
    • innerText属性：表示获取、设置起始标签和结束标签中的文本
    //需求：点击查找按钮，可查找html页面中id为666的标签对象的父节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
    	window.onload = function(){
    		document.getElementById("code9527").onclick = function(){
    			var spanObj = document.getElementById("666");
    			alert(spanObj.parentNode);
    		}
    	}
    </script>
</head>
<body>
<button id="code9527">查找</button>
<span id="bj"></span>
<span name="666"></span>
<span id="666"></span>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    运行效果：
    在这里插入图片描述

    🍁🍁
    createElement()方法和appendChild()方法的举例：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function(){
            //需求：使用js代码创建html标签，并显示在页面上
            //标签内容code-9527
            var divObj = document.createElement("div");
            //alert(divObj);可以看到这是一个创建的div标签对象，但在内存中

            divObj.innerHTML = "code-9527";
            //此时div标签中的内容添加成功，但还只是在内存中

            //body对象.appendChild(divObj);就可以将span加入到body
            //body对象可以通过标签名拿，但document对象有一个body属性，可以用来直接访问标签对象
            document.body.appendChild(divObj);
        }
    </script>
</head>
<body>

</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    标签中的文本也可以通过createTextNode()方法，这里也可以顺便加深对元素对象的理解，即文本也是一个元素

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function(){
            var divObj = document.createElement("div");
            //创建一个文本节点对象
            var textNodeObj = document.createTextNode("code-9527");
            //文本节点对象是div元素对象的子元素
            divObj.appendChild(textNodeObj);

            document.body.appendChild(divObj);
        }
    </script>
</head>
<body>

</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    运行效果：
    在这里插入图片描述

    js创建标签并显示在页面上的实现步骤：

    • document.createElement(）创建需要新增的标签对象
    • 使用innerHTML属性或者createTextNode()方法加入标签中的内容
    • appendChild()方法将新的标签对象加入到html页面

    其中，body对象可以通过标签名拿，但document对象有一个body属性，可以用来直接访问标签对象。即document.body等价于getElementxx()方法获取的body对象

    错误示范：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var divObj = document.createElement("div");
        divObj.innerHTML = "code-9527";
        ocument.body.appendChild(divObj);

    </script>
</head>
<body>

</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    报错：
    在这里插入图片描述

    原因分析：

    document.body.appendChild(divObj)这是个语句，执行下来的时候就马上执行了，但body对象还没加载出来。—即这行代码要在页面加载完成以后才能执行，所以将代码放进window.onload = function(){ }

  • 相关阅读:
    springboot思维导图
    Linux下的触摸屏驱动编程
    影视级跨平台视频制作技术的落地实践
    C++sqrt函数题目
    石油化工行业能源管理平台，让能源管理更简单，更高效
    springboot banner
    智能交通车路协同系统的应用场景和发展趋势
    MFC Windows 程序设计[216]之目录检测例程(附源码)
    nacos
    【HMS Core】AOSP11安装/预置HMS Core 可以关闭限制广告跟踪吗？
  • 原文地址：https://blog.csdn.net/llg___/article/details/127732280