JavaScript_DOM模型

「爱情、让人受尽委屈。」 2022-08-31 11:19 138阅读 0赞

### JavaScript\_DOM模型 ###

*  1 Document对象
 *  2 验证用户名是否有效
 *  3 正则表达式对象
 *  4 getElementsByName()方法

# 1 Document对象 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NTE4NDYx_size_16_color_FFFFFF_t_70]

**Document对象的理解：**

1.  Document它管理了所有的HTML文档内容
2.  Document它是一种树结构的文档，有层级关系
3.  它让我们把所有的标签都对象化
4.  可以通过Document访问所有的标签对象

# 2 验证用户名是否有效 #

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

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>getElementById</title>
        <script type="text/javascript">
            function onclickFun() {
          
                // 1 要操作一个标签的时候，一定要先获取这个标签对象
                var userNameObj = document.getElementById("userName")
                // alert(userNameObj);//[object HTMLInputElement]是DOM对象
                // alert(userNameObj.value);
                var userNameText = userNameObj.value;
                // 验证字符串使用正则表达式技术
                var patt = /^\w{5,12}$/;
                //test()方法用于测试字符串是否匹配规则
                if (patt.test(userNameText)) {
          
                    alert("用户名合法");
                } else {
          
                    alert("用户名不合法");
                }
            }
        </script>
    </head>
    <body>
        用户名:<input type="text" id="userName" value="">
        <button onclick="onclickFun()">验证</button>
    </body>
    </html>

![在这里插入图片描述][a193925b5e7f4d488b9a96f633234775.png]

# 3 正则表达式对象 #

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>regexp</title>
        <script type="text/javascript">
            // 正则表达式的创建一
            // var patt = new RegExp("a");
            var patt = /a/;//也是正则表达式对象
            var patt = /[abc]/;//表示要求字符串包含abc三个字母的任意一个
            var patt = /[a-z]/;//表示字符串中是否包含小写字母
            var patt = /[A-Z]/;//表示字符串中是否包含大写字母
            var patt = /[0-9]/;//表示字符串中是否包含任意数字
            var patt = /\w/;//表示字符串是否包含数字、字母、下划线
            var patt = /a+/;//表示字符串中是否包含至少一个a
            var patt = /a*/;//表示字符串中是否包含0个或n个a
            var patt = /a?/;//表示字符串中是否包含0个或1个a
            var patt = /a{3}/;//表示字符串中是否包含连续3个a
            var patt = /a{3,4}/;//表示字符串中是否包含连续3个a，最多4个连续的a
            var patt = /a{3,}/;//表示字符串中是否包含至少连续3个a
            var patt = /a$/;//表示字符串中是否以a结尾
            var patt = /^a/;//表示字符串中是否以a开头
            var patt = /^a{3,4}$/;//要求字符串从头到尾完全匹配
            var str = "abs";
            alert(patt.test(str));
        </script>
    </head>
    <body>
    </body>
    </html>

**更多的正则表达式写法详见：**[正则表达式详细][Link 1]

# 4 getElementsByName()方法 #

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>getElementsByName</title>
        <script type="text/javascript">
            function checkAll() {
          
                // 全选
                // document.getElementsByName();是根据指定的name属性查询返回多个标签对象集合
                // 这个集合的操作跟数组一样
                //集合中每个元素都是dom对象
                // 集合中的元素的顺序是这些标签在html页面从上往下的顺序
                var hobbies = document.getElementsByName("hobby");
                // checked表示复选框的选中状态，且该属性可读可写
                // 全选即遍历hobbies
                for (var i = 0; i < hobbies.length; i++) {
          
                    hobbies[i].checked = true;
                }
            }
    
            function checkNo() {
          
                // 全不选
                var hobbies = document.getElementsByName("hobby");
                // checked表示复选框的选中状态，且该属性可读可写
                // 全选即遍历hobbies
                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>
        兴趣课程:
        <input type="checkbox" name="hobby" value="cpp" checked="checked">C++
        <input type="checkbox" name="hobby" value="java">java
        <input type="checkbox" name="hobby" value="js">javascript
        <br/>
        <button onclick="checkAll()">全选</button>
        <button onclick="checkNo()">全不选</button>
        <button onclick="checkReverse()">反选</button>
    </body>
    </html>

![在这里插入图片描述][444631d4147c449bb7ddf2e128fd4d4f.png]  
**getElementByTagName()方法是按照指定标签名来进行查询并返回集合，它的用法与getElementsByName()方法一致。**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NTE4NDYx_size_16_color_FFFFFF_t_70]: /images/20220829/4b86633a87184ff7972220a4b624c1c7.png
[a193925b5e7f4d488b9a96f633234775.png]: /images/20220829/95e4d133f8d24b7d8782e9970eba8ec4.png
[Link 1]: https://www.runoob.com/js/js-regexp.html
[444631d4147c449bb7ddf2e128fd4d4f.png]: /images/20220829/d1d3b5a6dffb4d9d95572d1919274a50.png