DOM模型

最新推荐文章于 2022-07-06 23:52:07 发布

松柏123

最新推荐文章于 2022-07-06 23:52:07 发布

阅读量87

点赞数

分类专栏： JavaScript 文章标签： js javascript

本文链接：https://blog.csdn.net/weixin_53456849/article/details/119253320

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

DOM 模型

DOM 全称是 Document Object Model 文档对象模型.

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

Document对象(重点)

在这里插入图片描述
**Document 对象的理解: **

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

Document 对象的方法

getElementById() 返回对拥有指定id的第一个对象的引用。
getElementByName() 返回带有指定名称的对象集合。
getElementByTagName() 返回带有指定标签名的对象集合。

getElementById() 方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getElementById方法</title>
    <script type="text/javascript">
        /*
        *需求：当用户点击了校验按钮，要获取输入框中的内容，然后验证其是否合法
        *验证规则是，必须由字母，数字，下划线组成，并且长度是5到12位。
        */
        function onclickFun(){
            //1 当我们要操作一个标签的时候，一定要先获取这个标签对象
            var usernameObj = document.getElementById("username");
            //alert(usernameObj);[object HTMLInputElement]
            var usernameText = usernameObj.value;
            //alert(usernameText); 获取输入框中的内容
            //如何 验证字符串符合某个规则，需要使用正则表达式技术。
            var patt = /^\w{5,12}$/;
            /*
            *test() 方法用于测试某个字符串，是不是匹配规定的规则
            *匹配就返回 true  ，  不匹配就返回false
            */
            if(patt.test(usernameText)){
                alert("用户名合法！！");
            }else{
                alert("用户名不合法！！");
            }
        }
    </script>
</head>
<body>
    用户名：<input type="text" id="username" value=""/>
    <button onclick="onclickFun();">校验</button>
</body>
</html>

松柏123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM模型

DOM 模型DOM 全称是 Document Object Model 文档对象模型.就是把文档中的标签,属性,文本,转换成为对象来管理.Document对象(重点)**Document 对象的理解: **Document 他管理了所有的HTML文档内容.Document 他是一种树形结构的文档,有层级关系.它让我们把所有的标签都对象化.我们可以通过document 访问所有的标签对象....
复制链接

扫一扫