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

柔光的暖阳◎ 2022-11-03 01:37 191阅读 1赞

### 文章目录 ###

*  DOM模型
 *  document对象中对应的方法
 *   *  getelementById
     *  正则表达式
     *  getElementByName
     *  getElementByTagName
     *  查询方法小结
     *  createElement创建节点对象
     *  额外说明

# DOM模型 #

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

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcyNTgxOA_size_16_color_FFFFFF_t_70]

对document对象的理解

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

--------------------

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

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

标签为例

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"/>  
        <button onclick="onclickFun()">较验</button>
    </body>

效果图  
![在这里插入图片描述][20210224130716819.png]

## 正则表达式 ##

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

**需求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>

效果图

![在这里插入图片描述][2021022413073635.png]

对应逻辑实现代码

**全选按钮功能**

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

## 查询方法小结 ##

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

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

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

## createElement创建节点对象 ##

**节点的常用属性和方法**

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcyNTgxOA_size_16_color_FFFFFF_t_70 1]

如果想创建一个`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`：表示获取/设置起始标签中的文本\# 系列文章目录

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcyNTgxOA_size_16_color_FFFFFF_t_70]: /images/20221024/609b34485dfd4d8aa9ce2d69cb38664c.png
[20210224130716819.png]: /images/20221024/27a51a6ef10946548d7a49531349eb48.png
[2021022413073635.png]: /images/20221024/561b5968e0f8435eb3127fa50fbbcaa5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcyNTgxOA_size_16_color_FFFFFF_t_70 1]: /images/20221024/d109bf00c1ba458d909a0fae4bbae873.png