DOM模型解析与应用-优快云博客

本文链接：https://blog.youkuaiyun.com/luolvxing/article/details/116946622

DOM模型

全称–文档对象模型document object model

即把文档中的标签属性文本转换成对象来管理

Document对象

文档对象-表示整个HTML页面

document管理了所有的HTML中内容
是一种树形结构的文档，有层级关系
让我们把所有的标签属性以及文本对象化

我们可以通过document访问所有的标签对象

模拟对象化：

class Dom{
	private String id;//id属性
	private String tagName;//表示标签名
	private Dom parentNode;//父亲，也是一个对象，当有多个父标签时可再添加
	private List<Dom> children;//孩子结点，集合表示
	private String innerHTML;//其实标签和结束标签之间的内容
}

document对象中方法介绍–重点

getElementById()返回对拥有id的第一个对象的引用；//所以要求ID不同

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM模型</title>
    <script type="text/javascript">
        /* 需求，当用户点击校验时要获取输入框里的内容并验证其是否合法
        * 需要验证的规则：必须有字母数字下划线组成，并且长度是5-12位
        * */
        /*绑定事件，这里是静态绑定*/
        function onclickFun(){
            //1、当我们要操作一个标签的时候，一定首先要获取标签对象
           var usernameObj= document.getElementById("username");
           alert(usernameObj);//[object HTMLInputElement]这就是DOM对象，用来记录标签的，所以该对象会记录该标签的响应内容
            alert(usernameObj.id);//显示username
            alert(usernameObj.type);//显示text
            alert(usernameObj.value);//显示lurong ，当你输入的在变化时，显示的也不同
            var usernameText=usernameObj.value;
            //验证文本是否合法,需要使用正则表达式
            var patt=/^\w(5,12)$/;///^\w(5,12)$/是一个对象，表示字母数字下划线并且长度在5到12
           /*验证是否合法
           * test()方法用于测试某个字符串是否匹配我的规则
           * 匹配则返回true，不匹配返回false
           * */
            if(patt.test(usernameText)){
                alert("用户名合法");
            }else{
                alert("用户名不合法");
            }
        }
    </script>
</head>
<body>
<div>
    用户名：<input id="username"  type="text" value="lurong"/>
    <button onclick="onclickFun()">校验</button>
</div>
</body>
</html>