DOM模型

哑笑

于 2022-02-10 15:28:46 发布

阅读量600

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_52994227/article/details/122815385

版权

1.Document对象

第一点：Document它管理了所有的HTML文档内容

第二点：Document它是一种树结构的文档，有层级关系

第三点：它让我们把所有的标签都对象化

第四点：我们可以通过Document访问所有的标签对象

1. 需求:当用户点击了校验按钮，要获取输出框中的内容，然后验证其是否合法 * 验证的规则是：必须是由字母，数字，下划线组成，并且长度是5-12位。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
    /*
    * 需求。当用户点击了校验按钮，要获取输出框中的内容，然后验证其是否合法
    * 验证的规则是：必须是由字母，数字，下划线组成，并且长度是5-12位。
    * */
    function onclickFun(){
      //1.当我们要操纵一个标签的时候，一定要获取这个标签对象
      var usernameObj = document.getElementById("username");
      // [object HTMLInputElement]  它是dom对象（用来记录这些标签的信息）
        var usernameText = usernameObj.value;
        //如何验证字符串，符合某个规则，需要使用正则表达式技术
        var patt=/^\w{5,12}$/;

        //text()方法用来测试某个字符串，是不是匹配我的规则，匹配返回true；不匹配返回false；
        if (patt.test(usernameText)){
            alert("用户名合法");
        }else {
            alert("用户名不合法");
        }
    }
  </script>
</head>
<body>
      用户名：<input type="text" id="username" value="dd">
      <button onclick="onclickFun()">校验</button>
</body>
</html>

2.RegExp

1.正则表达式：是否包含字母e（一个字母时）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
    //表示要求字符串中是否包含字母e
    var patt= new RegExp("e");//  /e/也是正则表达式对象
    alert(patt);
    var str = "abecdd";
    alert(patt.test(str));
  </script>
</head>
<body>

</body>
</html>

2.包含多个字母时：