DOM模型

于 2022-02-10 15:28:46 发布
阅读量673 收藏
点赞数
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_52994227/article/details/122815385
版权
本文介绍了JavaScript中的DOM对象，特别是Document对象的使用，包括如何通过它获取和验证用户输入。同时，详细讲解了正则表达式在验证中的应用，如检查输入是否由特定字符组成以及长度限制。此外，还提到了JavaScript的getElementByName和getElementsByTagName方法，并讨论了节点的常用属性和方法，如childNodes、innerHTML等。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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.包含 多个字母时：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
    //表示要求字符串中是否包含字母a，b，c
    var patt = /[abc]/;
    var str = "akkbddc";
    alert(patt.test(str));
  </script>
</head>
<body>

</body>
</html>

3.当包含所有小写字母时：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
    //表示要求字符串中是否包含小写字母
    var patt = /[a-z]/;
    var str = "akkbddc";
    alert(patt.test(str));
  </script>
</head>
<body>

</body>
</html>

4.当包含所有大写字母时：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
    //表示要求字符串中是否包含小写字母
    var patt = /[A-Z]/;
    var str = "akkASSDbddc";
    alert(patt.test(str));
  </script>
</head>
<body>

</body>
</html>

5.当包含所有数字时：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
    //表示要求字符串中是否包含小写字母
    var patt = /[0-9]/;
    var str = "akkASS2334Dbddc";
    alert(patt.test(str));
  </script>
</head>
<body>

</body>
</html>

6.是否包围字母，数字，下划线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
    //表示要求字符串中是否包含字母，数字，下划线
    var patt =/\w/;
    var str = "akkASS2334Dbddc";
    alert(patt.test(str));
  </script>
</head>
<body>

</body>
</html>

7./a+/  表示至少包含一个a

/a*/    表示包含“零个”或“多个”a

/a？/  表示包含一个或零个a

/a{3，}  表示至少包含三个a ，最多不管

/a{3}/   表示字符串是否包含连续三个a

/a{3，5}/  表示字符串至少包含三个a，最多包含五个a

/a$/  表示结尾是否为a结尾的字符串

/^a/  表示字符串以a大头

2.javaScript验证的两种提示效果

<!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}$/;
        let usernameSpanObj = document.getElementById("usernameSpan");
        //innerHTML表示起始标签和结束标签中的内容
        //innerHTML这个属性可读可写
        usernameSpanObj.innerHTML = "好的";
        //text()方法用来测试某个字符串，是不是匹配我的规则，匹配返回true；不匹配返回false；
        if (patt.test(usernameText)){
            // alert("用户名合法");
            // usernameSpanObj.innerHTML = "用户名合法";
            usernameSpanObj.innerHTML = "<img src='对号.png' width='20' height='15'>"
        }else {
            // alert("用户名不合法");
            // usernameSpanObj.innerHTML = "用户名不合法";
            usernameSpanObj.innerHTML = "<img src='错误.png' width='20' height='15'>"
        }
    }
  </script>
</head>
<body>
      用户名：<input type="text" id="username" value="ddddd">
      <span id="usernameSpan" style="color: red;"></span>
      <button onclick="onclickFun()">校验</button>
</body>
</html>

3.javaScript-getElementsByName方法：

全选-------全不选----------反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
    //全选
    function checkAll(){
      //让所有复选框都选中
      //document.getElementsByName()；是根据指定的name属性查询返回多个标签对象集合
      //这个集合的操作跟数组一样
      //集合中每个元素都是dom对象
      //这个集合中的元素顺序是他们在html页面中从上到下的顺序
      var hobbies = document.getElementsByName("hobby");
      //checked表示复选框的选中状态，如果选中是true，不选中是false
        //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;
            // if (hobbies[i].checked){
            //     hobbies[i].checked= false;
            // }else {
            //     hobbies[i].checked = true;
            // }
        }
    }
  </script>
</head>
<body>
      兴趣爱好：
      <input type="checkbox" name="hobby" value="cpp">C++
      <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>

4.JavaScript--document.getElementsByTagName方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
    //全选
    //document.getElementsByTagName("input");是按照指定标签名来进行查询并返回集合
    //这个集合的操作跟数组一样
    //集合中都是dom对象
    //集合中元素顺序  是他们再html页面中从上到下的顺序
    function checkAll(){
      var inputs = document.getElementsByTagName("input");
      for (var i = 0; i < inputs.length; i++) {
        inputs[i].checked = true;
      }
    }
  </script>
</head>
<body>
兴趣爱好：
<input type="checkbox" value="cpp" checked = "checked">c++
<input type="checkbox" value="java">java
<input type="checkbox" value="javaScript">javaScript
<br/>
<button onclick="checkAll()">全选</button>
</body>
</html>

注：

document对象的三个查询方法，1.如果有id属性，优先使用getElementById方法来进行查询

2.如果没有id属性，则有限使用ElementsByName方法来进行查询

3.如果id属性和name属性都没有最后再按标签名查getElementsByTagName

以上三个方法，一定要在页面加载完成之后执行，才能查询到标签对象

2.节点的常用属性和方法

属性：

1.childNodes: 获取当前节点的所有子节点

2.firstChild：获取当前节点的第一个节点

3.lastChild：获取当前节点的最后一个节点

4.parentNode：获取当前节点的父节点

5.nextSibling：获取当前节点的下一个节点

6.previousSibling：获取当前节点的上一个节点

7.className：用于获取或设置标签的class属性值

8.innerHTML：表示获取/设置起始标签和结束标签中的内容

9.innerText：表示获取/设置起始标签和结束标签中的文本

方法：

getElementsByTagName（）方法：获取当前节点的指定标签名孩子节点

appendChild（oChildNOde）方法：可以添加一个子节点，oChildNode是要添加的孩子节点

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

哑笑

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值