Java web学习day06 DOM模型、正则表达式

最新推荐文章于 2024-09-13 16:31:55 发布

折叠的饼干

最新推荐文章于 2024-09-13 16:31:55 发布

阅读量111

点赞数

分类专栏： Javaweb 文章标签：正则表达式 java html

本文链接：https://blog.csdn.net/weixin_45627369/article/details/120541377

版权

Javaweb 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

DOM模型（Document Object Model)文档对象模型

就是把文档中的标签属性文本，转换成为对象来管理

class Dom{
    private String id;//id属性
    private String atgName;//标签名
    private Dom ParentNode;//父亲
    private List<Dom>children;//孩子结点
    private String innerHTML；//起始标签和结束标签中间的内容
}

Document对象

在这里插入图片描述
Document对象的理解:
1.Document管理了所有Html文档内容
2.document是一种树结构文档，有层级关系
3.它让我们把所有的标签都对象化
4.可以通过document访问所有的标签对象

Document对象中的方法介绍

       document.getElementById(elementID);
       //通过标签的id属性查找标签的dom对象，elementID是标签的id属性值
       document.getElementsByName(elementName);
       //通过标签的name属性查找标签dom对象，elementName是标签的name属性值
       document.getElementsByTagName(tagname);
       //通过标签名查找标签dom对象，tagname是标签名
       document.createElement(tagname);
       //通过给定的标签名，创建一个标签对象。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");
          var usernameText=usernameObj.value;
          //alert(usernameObj);//dom对象
          //alert(usernameObj.value);
          //如何验证字符串是否符合某些规则需要使用正则表达式
          var patt=/^\w{5,12}$/;
          /*test方法用于测试某个字符串是否符合某个规则*/
          if(patt.test(usernameText)){
              alert("用户名合法");
          }else{
              alert("用户名不合法");
          }
      }
    </script>
</head>

<body >
     用户名:<input type="text" id="username" value="wzg"/>
     <button onclick="onclickFun()">校验</button>

</body>
</html>

正则表达式RegExp

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //方括号
        //var patt=new RegExp("e"); //表示要求字符串中是否包含字母e
        //var patt=/[abc]/;         //表示要求字符串中是否包含字母a或b或c任意一个
        //var patt=/[a-z]/;         //表示是否有小写字母
        //var patt=/[0-9]/;         //表示是否有数字

        //元字符
        //var patt=/\w/;            //\w元字符用于查找单词字符，包括a-z,A-Z,0-9,_

        //量词
        //var patt=/a+/;            //是否包含一个a
        //var patt=/a*/;            //是否包含0个或多个a
        //var patt=/a?/;            //是否包含0个或1个a
        //var patt=/a{3}/;          //是否包含连续3个a
        //var patt=/a{3,}/;         //是否包含至少连续3个a
        //var patt=/a{3,5}/;        //是否包含至少3个连续a，至多5个连续a
        //var patt=/^a{3,5}$/;        //从头到尾完全匹配，3-5个连续a
        //var patt=/a$/;            //是否结尾为a
        //var patt=/^a/;            //是否开头为a

        var patt=/^\w{5,12}$/;
        var str="aaa";
        alert(patt.test(str));      //  /e/也是正则表达式对象
    </script>
</head>

<body >
     用户名:<input type="text" id="username" value="wzg"/>
     <button onclick="onclickFun()">校验</button>

</body>
</html>

图片提示

在这里插入图片描述

<!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");
            var usernameS=document.getElementById("usernameSpan");
            var usernameText=usernameObj.value;
            //alert(usernameObj);//dom对象

            //如何验证字符串是否符合某些规则需要使用正则表达式
            var patt=/^\w{5,12}$/;
            /*test方法用于测试某个字符串是否符合某个规则*/
            // innerHTML表示起始标签和结束标签之间的内容，属性可读可写
            //alert(usernameS.innerHTML);
            if(patt.test(usernameText)){
                 usernameS.innerHTML=" <img src=\"true.jpg\" width=\"18\" height=\"18\">用户名合法";
            }else{
                usernameS.innerHTML=" <img src=\"false.jpg\" width=\"18\" height=\"18\">用户名不合法";

            }
        }
    </script>
</head>

<body >
用户名:<input type="text" id="username" value="wzg"/>

<button onclick="onclickFun()">校验</button>
<span id="usernameSpan" style="color:red">

</span>
<br/>
</body>
</html>