内容

一. 什么是 DOM

文档对象模型

文档对象模型

1. 什么是 DOM：专门用于操作 Web 内容的对象和函数的集合

当浏览器加载网页时，浏览器会创建文档对象模型

(1).DOM 的定义

DOM（Document Object Model）翻译为文档对象模型，是HTML和XML文档的编程接口。

(2).DOM 操作的分类

使用 JavaScript 操作 DOM 分为三个方面：DOM Core（核心）、HTML-DOM 和 CSS-DOM。

2. 什么时候使用DOM：以后只要想用js程序来操作网页内容，就必须使用DOM提供的对象和方法。

DOM功能——让JS具备访问HTML的能力，实现对HTML中内容的操作

3. DOM 标准：由 W3C 开发的用于操作网页内容的对象和函数的标准

4. 好处：几乎所有浏览器都 100% 兼容 DOM。

5. 能做什么：CRUD + 事件绑定

二. 什么是 DOM 树

1. 什么是 DOM 树

在内存中，专门用于保存网页所有内容的树形结构

2. 为什么使用 DOM

树形结构可以直观的展示上下层的关系！并且因为网页的内容恰好是从属和从属的。

3. 如何使用 DOM：

(1)。每当浏览器读取网页文件时，首先会创建一个树根节点对象——document

(2)。浏览器开始扫描网页中的每一项内容(元素、文本、属性…)。每扫描一项内容，就会在网页上的相应位置创建一个节点对象DOM 树以保存扫描的内容。

三. 查找元素：4 种类型：1. 无需搜索即可直接获取的元素：4 种类型：

(1).根节点对象文档

(2).document.documentElement

(3).document.head

(4).document.body

(5).示例：输出四个节点的DOM树关系和节点对象本身不查找就可以得到的属性

1_domTree.html

  
    
    
  
  
    Hello
    
标题一
    
  
​​

运行结果：

2. 按节点之间的关系查找：

(1).When: 如果我们已经有一个元素并且想在它周围找到附近的元素

(2).How: 内存中其实有两棵 DOM 树：

一种。节点树：包含所有网页内容的完整树形结构：2 类关系，6 个属性1)。亲子关系：4个属性

一世。获取节点对象的父节点：node object.parentNode

父节点

ii. 获取一个节点下所有直接子节点的集合：node object.childNodes

子节点

iii. 获取一个节点下的第一个直接子节点：node object.firstChild

第一个孩子

iv. 获取一个节点下的最后一个直接子节点：node object.lastChild

最后一个孩子

2)。兄弟关系：2个属性

一世。上一个相邻兄弟节点：当前节点.previousSibling

前兄弟

ii. 下一个相邻兄弟节点：当前节点.nextSibling

下一兄弟

湾。问题：即使节点树中不可见的空字符也被视为文本节点对象，严重干扰了我们的搜索

C。解决方案：在新版本的 DOM 标准中，增加了一个新的树/关系，称为元素树。优点是只包含元素节点js中属性选择器，不包含文本节点，没有隐形空字符节点的干扰！因此，以后只要根据节点之间的关系查找元素，就会使用元素树关系。不再有节点树关系。

d。什么是元素树：只包含元素节点而没有文本节点的树结构

e. 元素树：2类关系，6个属性1)。亲子关系：

一世。获取当前元素的父元素：element.parentElement

父元素

ii. 获取当前元素的所有直接子元素：element.children

孩子们

iii. 获取当前元素的第一个直接子元素：element.firstElementChild

第一个元素孩子

iv. 获取当前元素的最后一个直接子元素：element.lastElementChild

最后一个元素子

2)。兄弟会：2

一世。上一个兄弟元素：element.previousElementSibling

前一个元素兄弟

ii. 下一个兄弟元素：element.nextElementSibling

下一个元素兄弟

(3)。示例：使用元素树关系查找所需元素

1_domTree2.html

  
    
    
  
  
    Hello
    
标题一
    
  

运行结果：

​你好​​​​

​标题一​​​​

真的

3. 按 HTML 功能查找：4 个函数：(1)。按 id 查找元素对象：

一种。var an element object = document.getElementById(“id name”)

通过 id 在网页中查找元素

湾。意思是：在整个页面中找到一个id为指定id名的元素对象

C。返回值：

1)。如果找到，只能返回一个元素对象

2)。如果没有找到，返回null

d。强调：

1).. 之前的主题必须是文档

2)。因为只找到一个，所以函数名中的元素是单数，不以s结尾

(2). 按标签名查找多个元素对象：

一种。var 类数组对象 = 任何父元素。getElementsByTagName(“标签名称”);

在任何父元素中按标签名称查找多个元素

湾。意思是：在指定的父元素范围内，找到所有具有指定标签名的元素，放入一个类数组对象中，然后返回！

C。返回值：

1)。如果找到满足要求的元素，则将其放入类似数组的对象中并返回

2)。如果没有找到匹配的元素，则返回一个空的类似数组的对象：{ length:0 }

d。强调：

1).. 之前的主题可以是任何父元素或文档。但是，搜索范围越小，搜索越快！因此，您应该尽量缩小搜索范围！

2)。因为可以找到多个元素，所以函数名中的Elements是复数形式，以s结尾。

3)。不仅找到直系子代，还找到所有后代中的匹配元素！

4)。即使只找到一个符合条件的元素，唯一的一个元素也会以类似数组的对象的形式返回！但是，如果我们要对找到的这一元素进行操作，我们必须使用 [0] 从类数组对象中获取唯一元素才能继续对这个元素对象进行操作！

(3). 按类名查找多个元素

一种。var 类数组对象 = 任何父元素。getElementsByClassName(“类名”)

湾。意思是：在指定的父元素范围内，找到所有class属性中包含指定类名的多个元素，放入一个类数组对象中，返回！

C。返回值：

1)。如果找到满足要求的元素，则将其放入类似数组的对象中并返回

2)。如果没有找到匹配的元素，则返回一个空的类似数组的对象：{ length:0 }

d。强调：

1).. 之前的主题可以是任何父元素或文档。但是，搜索范围越小，搜索越快！因此，您应该尽量缩小搜索范围！

2)。因为可以找到多个元素，所以函数名中的Elements是复数形式，以s结尾。

3)。不仅找到直系子代，还找到所有后代中的匹配元素！

4)。即使只找到一个符合条件的元素，唯一的一个元素也会以类似数组的对象的形式返回！但是，如果我们要对找到的这一元素进行操作，我们必须使用 [0] 从类数组对象中获取唯一元素才能继续对这个元素对象进行操作！

5)。如果一个元素同时被多个类修改，那么只需要使用其中一个类名即可找到该元素。

(4)。按名称查找多个表单元素：

一种。var 类数组对象 = document.getElementsByName(“name name”);

湾。意思是：在整个页面范围内，找到name属性值为指定名称的所有多个表单元素，放入类数组对象中，返回！

C。返回值：

1)。如果找到满足要求的元素，则将其放入类似数组的对象中并返回

2)。如果没有找到匹配的元素，则返回一个空的类似数组的对象：{ length:0 }

d。强调：

1).. 之前的主题必须是文档。

2)。因为可以找到多个元素，所以函数名中的Elements是复数形式，以s结尾。

3)。即使只找到一个符合条件的元素，唯一的一个元素也会以类似数组的对象的形式返回！但是，如果我们要对找到的这一元素进行操作，我们必须使用 [0] 从类数组对象中获取唯一元素才能继续对这个元素对象进行操作！

(5). 示例：使用四个函数通过不同的 HTML 特征查找元素

2_iterator.html

  
    
    
  
  
    用户名: 

    Hello World !
    

      
电影
      

        综艺
        

          
跑男
          
爸爸
          
极限
        
      
      
剧集
    
    
  

运行结果：

4. 通过选择器查找元素：

(1).when: 以后如果查找元素的条件比较复杂的话，最好通过selector查找！

(2).how: 2 个函数

一种。只找到一个匹配元素：

1).var 元素对象 = 任何父元素。查询选择器（“选择器”）

查找（按下）选择器

2)。意思是：在指定的父元素范围内，找到第一个满足选择器要求的元素

3)。返回值：

一世。如果找到，则返回一个元素对象；

ii. 如果没有找到，返回null

4)。强调：只有第一个匹配选择器的元素才会被返回！

湾。查找多个匹配元素：

1)。var 类数组对象 = 任何父元素。querySelectorAll(“选择器”)

2)。意思是：在指定的父元素下，找到所有满足选择器要求的元素，放入一个类似数组的对象中并返回！

3)。返回值：

一世。如果找到，则返回一个类似数组的对象；

ii. 如果未找到，则返回一个空的类似数组的对象：{ length: 0 }

四. 购物车示例：

1. 要求：

(1)。点击+/-按钮修改项目数

(2). 数量修改，影响小计

(3)。小计修改，影响总计

2. 实现：点击+/-按钮修改项目数：

(1)。以后只要做DOM效果，可以按照4步完成：

一种。查找触发事件的元素

湾。绑定事件：

C。找到要修改的元素

d。修改元素

五. 事件概览：

1. 什么是事件：由用户手动触发或由浏览器自动触发的页面内容或状态的变化。

2. 如何在事件发生时自动执行任务：

(1)。每个元素对象都有一批以on-event属性开头的特殊属性，但是所有的event属性在游戏开始时默认为null。

(2)。每当我们点击一​​个元素时，浏览器会自动查找该元素对应的事件属性。例如：当一个元素被点击时，浏览器会自动查找该元素上的onclick属性

(3)。如果我们提前在一个元素的onxxx属性上保存了一个函数。那么，浏览器只要找到这个元素的这个事件属性，就会自动触发我们提前保存的事件处理函数。

元素 object.on 事件名称=function(){ … }

其中，预先保存在事件属性上的这个函数称为事件处理函数

强调：事件处理函数，如果事件没有被触发，就不会被执行！只有当事件被触发时js中属性选择器，处理函数的内容才会被执行。如果事件被重复触发，handler函数的内容会被重复执行

3. 问题：在事件处理程序中，如果要获取当前触发事件的按钮，如果轻易使用事件处理程序以外的变量，很可能会出错！

4. 原因：事件处理器是在主程序执行后才执行的，不知道什么时候会执行！从主程序执行到事件处理函数实际触发的时间间隔内，外部变量值很可能被篡改！

5. 解决方法：以后在事件处理函数中，如果要获取当前触发事件的元素对象，一定要用这个！

6. 示例：购物车：

3_shoppingcart.html

  
    
    
    
  
  
    

      

        

          
商品名称
          
单价
          
数量
          
小计
        
      
      

        

          
iPhone6
          
¥4488.00
          

            -
            1
            +
          
          
¥4488.00
        
        

          
iPhone6 plus
          
¥5288.00
          

            -
            1
            +
          
          
¥5288.00
        
        

          
iPad Air 2
          
¥4288.00
          

            -
            1
            +
          
          
¥4288.00
        
      
      

        

          
Total:
          
¥14064.00
        
      
    
    
  

运行结果：

注：/*数量变化，修改小计*/

注意：/* 计算总数 */

◼️总结：找到函数的返回值规则：

1. 如果原函数返回下标位置，如果没有找到，返回-1

2. 如果原函数返回数组或对象，如果没有找到，返回null

3. 如果原函数返回一个类数组对象，如果没有找到，返回一个空类数组对象：{length:0}

⬛总结：DOM 5 件事：CRUD + 事件绑定：

1. 查找元素：

(1). 无需搜索即可直接获取的元素对象：4种：

文档.documentElement —

文件头——

文档.body —

文档.forms[i] —

(2)。如果已经获取到一个元素对象，在寻找附近的元素对象时，使用节点之间的关系来搜索：2类关系，6个属性

一种。父子关系：4种

1)。元素的父节点：element.parentElement 或 element.parentNode

2) 下的所有直接子级。元素：element.children

3)。元素下的第一个直接子元素：element.firstElementChild

4)。元素下的最后一个直接子元素：element.lastElementChild

湾。兄弟会：2种

1)。元素的上一个兄弟元素：element.previousElementSibling

2)。元素的下一个兄弟元素：element.nextElementSibling

(3)。如果您可以通过一个特征找到所需的元素，请使用按 HTML 特征查找：4 种方法：

一种。按 id 查找：

var an element object = document.getElementById(“id name”);

湾。按标签名称查找：

var 类数组对象 = 任何父元素。getElementsByTagName(“tag name”),

C。按班级名称搜索：

var 类数组对象 = 任何父元素。getElementsByClassName(“类名”)

d。按名称查找表单元素：

var 类数组对象 = document.getElementsByName(“name name”)

(4)。如果可以通过复杂的搜索条件找到想要的元素，使用选择器搜索：2种方法

一种。只找到一个匹配元素：

var an element = 任何父元素。querySelector(“任何选择器”)

湾。查找多个匹配元素：

var 类数组对象 = 任何父元素。querySelectorAll(“任何选择器”)