JavaScript---DOM模型

最新推荐文章于 2021-09-07 17:44:39 发布

chstor

最新推荐文章于 2021-09-07 17:44:39 发布

阅读量127

点赞数

分类专栏： JS基础

本文链接：https://blog.csdn.net/weixin_45821690/article/details/106198978

版权

JS基础专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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
创建文本节点

chstor

关注

0
点赞
踩
0

收藏

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

DOM全称是Document Object Model 文档对象模型就是把文档中的标签、属性、文本转换为对象来管理。Document 对象的理解：Document 它管理了所有的HTML文档内容Document 它是一种树结构的文档，有层级关系它让我们把所有的标签都对象化我们可以通过document访问所有的标签对象Document对象中方法介绍  重点！ document.getElementById()通过标签的id属性来查找dom对象document
复制链接

扫一扫