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

  • 就是把文档中的标签、属性、文本转换为对象来管理。

Document 对象的理解：

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

Document对象中方法介绍  重点！

  • document.getElementById()
  • 通过标签的id属性来查找dom对象
  • document.getElementByName()
  • 通过标签的name属性查找dom对象
  • document.getElementByTagName()
  • 通过标签名来查找dom对象
  • document.createElement()
  • 方法，通过给定的标签名，创建一个标签对象。

test()方法：

  • test（）方法用于测试某个字符串，是不是匹配我的规则
  • 匹配就返回true，否则false

innerHTML 表示起始标签和结束标签中的内容（可读，可写）

简单的表单验证
   <script >
     window.onload = function(){
   

          check.onclick = function(){
   
            var usernameobj=document.getElementById("username");

            var usernamespanobj = document.getElementById("usernamespan");
            var usernameText=usernameobj.value;
                
                var patt=/^\w{
   5,12}$/;

                
                if(patt.test(usernameText)){
   
                    usernamespanobj.innerHTML="giao啊";
                }else{
   
                    usernamespanobj.innerHTML="不会giao？";
                }
            }
      
      }
    </script>

</head>

<body>
   用户名：<input type="text" id="username">
   <span id="usernamespan" style="color: red;"></span>
   <button id="check">校验</button>
</body>

getElementsByName():根据指定的name属性查询返回多个标签对象集合

  • 集合就是数组，每个元素就是dom对象

getElementsByTagName():根据指定标签名进行查询并返回集合

  • 集合就是数组，每个元素就是dom对象

  注：

  • document对象的三个查询方法，如果有id属性，优先使用getElementById方法来进行查询
  • 如果没有id属性，则优先使用getElementsByName方法来进行查询
  • 如果id属性和name属性都没有最后再按标签名getElementsByTagName

节点的常用属性和方法

  • 节点就是标签对象

方法：

通过具体的元素节点调用

  • getElementsByTagName（）
  • 方法：获取当前节点的指定标签名孩子节点
  • appendChild（oChildNode）
  • 方法：可以添加一个子节点，oChildNode是要添加的孩子节点

属性：

  • childNodes
  • 属性：获取当前节点所有子节点
  • firstChild
  • 属性：获取当前节点的第一个子节点
  • lastChild
  • 属性：获取当前节点的最后一个子节点
  • parentNode
  • 属性：获取当前节点的父节点
  • previousSibling
  • 属性：获取当前节点的上一个节点
  • nextSibling
  • 属性：获取当前节点的下一个结点
  • className
  • 用于获取或设置标签的class属性值
  • innerHTML
  • 属性：表示获取/设置起始标签和结束标签中的内容
  • innerText
  • 属性：表示获取/设置起始标签和结束标签中的文本
  • createElement
  • 创建一个标签
  • createTextNode
  • 创建文本节点