尚硅谷JavaWeb笔记——Dom模型（一文读懂什么是Dom模型）

最新推荐文章于 2024-05-05 01:38:38 发布

无问西东。

最新推荐文章于 2024-05-05 01:38:38 发布

阅读量842

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_43725818/article/details/114121001

版权

JavaWeb 专栏收录该内容

19 篇文章 19 订阅

订阅专栏

文章目录

DOM模型
document对象中对应的方法

DOM模型

dom全称是Document Object Model 文档对象模型——将文档中的标签，属性，文本转换成对象来管理（注意，这里文本信息也是一个节点）

html的双标签构成的嵌套结构如同一棵多叉树，外层元素就是父亲节点，内层节点就是儿子节点，html的文档树哪层结构如下图所示：其中每个元素都是一个节点，每个节点都有对应相应于其功能的属性。

在html中一个html页面就相当于一个对象，被称为document，该对象又包含了许多子对象也就是文件树中的各个节点。这也是dom模型面向对象的体现。

在这里插入图片描述

对document对象的理解

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

提问：如何将html标签对象化，这样有什么好处？

答：由于html具有特殊的层级结构，因此可以讲每一个标签对象化，对象中存储着许多属性信息，这些属性包括事件、关系、颜色等众多信息，以某个

标签为例

<body>
	<div id ="div01">div01</div>
</body>

dom模型相当于把上述内容进行封装构建了如下的一个类

class Dom{
  private String id;
  private String tagName;
  private Dom parentNode;
  private List<Dom> children;
  private Stringg innerHTML;
}

document对象中对应的方法

基于上述讨论，由于所有的标签都是document标签的子元素，而且所有字元素都具备某些公共的特征，故可以利用相应的方式进行查询以及构建一个标签dom对象，具体的：

查询方法有如下三种（从上到下搜索范围逐渐扩大）

document.getElementById(elementId)：通过标签id属性查找dom对象，elementId是标签的id属性（最常用的）。
document.getElementByName(elementName)：通过标签的name属性查找dom对象，elementName标签的name属性。
document.getElementByTagName(tagname)：通过标签名查找标签的dom对象，tagname是标签名，如

通过标签名创建一个标签对象

document.createElement(tagName)

getelementById

利用dom完成用户名输入验证

Step1：获取当前document对象的某一个id对象（input）

Step2：通过该对象得到用户输入值（value）

Step3：构建正则表达式，并通过正则表达式判断用户输入值是否满足条件

Step4：输出判断结果（if-else语句）

功能代码：实现判断用户输入内容是否合法

<head>
<script type="text/javascript" >
        /*
        * 需求：当用户点击了较验按钮，要获取输出框中的内容。然后验证其是否合法。<br/>
        * 验证的规则是：必须由字母，数字。下划线组成。并且长度是5到12位。
        * */
        function onclickFun() {
            // 1. 通过getElementById获取到对应标签
            var usernameObj = document.getElementById("username");
            var usernameText = usernameObj.value;
            // 2. 构建正则表达式
            var patt = /^\w{5,12}$/;
            /*
            *  test()方法用于测试某个字符串，是不是匹配我的规则 ，
            *  匹配就返回true。不匹配就返回false.
            * */
          
          	// 3. 利用if-else语句判断用户输入是否合法
            if (patt.test(usernameText)) {
                usernameSpanObj.innerHTML = "<img src=\"right.png\" width=\"18\" height=\"18\">";
            } else {
                usernameSpanObj.innerHTML = "<img src=\"wrong.png\" width=\"18\" height=\"18\">";
            }
        }
    </script>
</head>
<body>
    用户名：<input type="text" id="username" value="wzg"/>  <!-- 默认值为wzg-->
    <button onclick="onclickFun()">较验</button>
</body>

效果图
在这里插入图片描述

正则表达式

给出几个常见的需求，写出其正则表达式并分析为什么这么写

需求1：用户输入内容必须是5-12位的字符串内容，不能包含特殊字符

需求2：用户密码必须包含大小写以及数字

验证用户输入是否合法的方法

用户最直观看到的就是反馈信息，要么是网页发送的alert消息，要么是利用JavaScript中的事件完成给出相应的反馈信息

**方法1：**使用innerHTML标签；

方法2：采用外引图对和❌来：

getElementByName

需求：给用户提供一个全选全部选对帮助按钮

<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>

效果图

在这里插入图片描述

对应逻辑实现代码

全选按钮功能

function checkAll() {
  // 让所有复选框都选中
  // document.getElementsByName();是根据 指定的name属性查询返回多个标签对象集合
  // 这个集合的操作跟数组 一样
  // 集合中每个元素都是dom对象
  // 这个集合中的元素顺序是他们在html页面中从上到下的顺序
  var hobbies = document.getElementsByName("hobby");
  // checked表示复选框的选中状态。如果选中是true，不选中是false
  // checked 这个属性可读，可写
  for (var i = 0; i < hobbies.length; i++){
    hobbies[i].checked = true;
  }
}

全不选按钮功能

function checkNo() {
  var hobbies = document.getElementsByName("hobby");
  // checked表示复选框的选中状态。如果选中是true，不选中是false
  // checked 这个属性可读，可写
  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;
}

实现步骤

Step1：根据每个标签的特性，设置相同的属性，如上方都设置name属性为hobby

Step2：利用dom对象的选择器，将需要改变的dom对象都选出来（获取目标对象）

Step3：修改每个对象的check属性，将其设置为已选择

getElementByTagName

该方法是通过标签名获得对应dom对象

<script type="text/javascript">
        window.onload = function(){
            // alert( document.getElementById("btn01") );
        }
        // 全选
        function checkAll() {
            alert( document.getElementById("btn01") );
            // document.getElementsByTagName("input");
            // 是按照指定标签名来进行查询并返回集合
            // 这个集合的操作跟数组 一样
            // 集合中都是dom对象
            // 集合中元素顺序 是他们在html页面中从上到下的顺序。
            var inputs = document.getElementsByTagName("input");

            for (var i = 0; i < inputs.length; i++){
                inputs[i].checked = true;
            }
        }
    </script>
</head>
<body>

    <!--as -->
    兴趣爱好：
    <input type="checkbox" value="cpp" checked="checked">C++
    <input type="checkbox" value="java">Java
    <input type="checkbox" value="js">JavaScript
    <br/>
    <button id="btn01" onclick="checkAll()">全选</button>

</body>

查询方法小结

document对象的三个查询方法，如果有id属性优先使用getElementById，如果没有id属性，则优先使用getElementByName来进行查询，如果前者者都没有，再按照getElementByTagName，这是因为搜索范围越来越大，后者需要更多的过滤才能实现。

以上三个方法，一定要在页面加载完成之后执行，才能查询到标签对象。这是因为浏览器是一行一行读取代码，先读取到

当浏览器读取完代码后就会进行windos.onload操作

createElement创建节点对象

节点的常用属性和方法

什么是节点？节点就是标签对象，也就是可以操作的最小单元。

在JavaScript中不同的对象创建方式不太一样，具体内容如下

在这里插入图片描述

如果想创建一个div对象，可通过如下代码（但这个时候该对象仅仅是在内存中，还需要将其附在某个目标元素标签之后）

  var divObj = document.createElement("div"); // 在内存中创建<div></div>

具体代码如下：

window.onload = function () {
  var divObj = document.createElement("div"); // 在内存中 <div></div>

  var textNodeObj = document.createTextNode("gjs，我爱你"); // 有一个文本节点对象 

  divObj.appendChild(textNodeObj); // <div>国哥，我爱你</div>

  // 添加子元素
  document.body.appendChild(divObj);
}

实现步骤

Step1：创建一个div对象

Step2：获取待添加的父亲节点对象

Step3：将新构建的div对象通过appendChild方法添加至Step2中获得的父亲节点对象

额外说明

每个节点标签对象除了自己特有的元素外，还有一些维护了各自亲属关系的属性值，如下所示

childNodes：获取当前节点的所有子节点
firstChild：获取当前节点的第一个子节点
lastChilde：获取当前节点的最后一个子节点
parentNode：获取当前节点的父亲节点
nextSibling：获取当前节点的下一个兄弟节点
previousSibling：获取档期那节点上一个兄弟节点
className：用于获取或设置标签的class属性。注意，这里为了防止和java中反射冲突，采用了这种方式
innerHTML：获取/设置起始标签和结束标签中的所有内容
innerText：表示获取/设置起始标签中的文本# 系列文章目录

无问西东。

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
尚硅谷JavaWeb笔记——Dom模型（一文读懂什么是Dom模型）

文章目录DOM模型document对象中对应的方法getelementById正则表达式getElementByNamegetElementByTagName查询方法小结createElement创建节点对象额外说明DOM模型dom全称是Document Object Model 文档对象模型——将文档中的标签，属性，文本转换成对象来管理（注意，这里文本信息也是一个节点）html的双标签构成的嵌套结构如同一棵多叉树，外层元素就是父亲节点，内层节点就是儿子节点，html的文档树哪层结构如下图所示：其中每
复制链接

扫一扫

专栏目录