DOM

DOM

DOM：Document Object Model（文档对象模型）

用来将标记型文档封装成对象，并将标记型文档中的所有的内容（标签，文本，属性等）都封装成对象。封装成对象的目的是为了更方便操作这些文档中的所有内容，因为对象的出现可以有属性和行为被调用

• 文档：标记型文档
• 对象：封装了属性和行为的实例，可以直接被调用
• 模型：所有标记型文档都具备一些共性特征的一个体现

只要是标记型文档，DOM这种技术都可以对其进行操作，常见的标记型文档：（HTML、XML）要操作标记型文档必须对其进行解析

DOM技术的解析方式：dom解析将按照标签的层次关系体现出标签的所属，形成一个树状结构，称为DOM树，树中的标签以及文本甚至属性称为节点，这个节点也成为对象，标签通常也称为页面中的元素。

• 好处：可以对树中的节点进行任意操作，比如：增删改查

• 弊端：这种解析需要将整个标记型文档加载进内存

DOM解析文档.png

简介另一种解析方式：SAX：是由一些组织定义的一种民间常用的解析方式，并不是w3c标准，而DOM是w3c的标准

SAX解析方式：基于事件驱动的解析

• 好处：获取速度非常快
• 弊端：无法进行增删改

如果仅仅只是查询，可以使用SAX

DOM的三层模型

• DOM level 1：将html文档封装成对象

• DOM level 2：在level 1基础上加入了新功能，比如解析名称空间（可以使用域名来标识）

• DOM level 3：将xml文档封装成对象

DHTML

动态的html，不是一门语言：是多项技术综合体的简称（HTML，CSS，JavaScript，DOM）

• HTML：负责提供标签，对数据进行封装，目的是便于对该标签中的数据进行操作

  简述：用标签封装数据

• CSS：负责提供样式属性，对标签中的数据进行样式的定义

  简述：对数据进行样式定义

• DOM：负责将标签型文档以及文档中的所有内容进行解析，并封装成对象，在对象中定义了更多的属性和行为，便于对对象操作

  简述：将文档和标签及其他内容变成对象

• JavaScript：负责提供程序设计语言，对页面中的对象进行逻辑操作

  简述：页面的行为定义，页面的动态效果，是动态效果的主力编程语言

DHTML + XMLhttpRequest = AJAX

---

BOM模型

BOM：Browser Object Model（浏览器对象模型）这个模型方便操作浏览器

浏览器对应的对象就是window对象，可以通过查阅DHTML api获得

练习：广告弹窗

Document对象

该对象将标记型文档进行封装，该对象的作用，是对可以标记型文档进行操作

最常见的操作：想要实现动态效果，需要对节点操作，那么要先获取到这个节点。要想获取节点，就必须先要获取到节点所属的文档对象document

获取节点的方法体现

1. getElementById()：通过标签的id属性值，获取该标签节点。返回该标签节点
2. getElementsByName()：通过标签的name属性，获取该节点。因为name有相同，返回该节点数组
3. getElementsByTagName()：通过标签名，获取该标签节点。因为标签名会重复，返回该标签数组
4. 凡是带s返回的都是数组

• 常见节点有三种：
  1. 标签节点：类型 1
  2. 属性节点：类型 2
  3. 文本节点：类型 3
• 标签型节点是没有值的，属性和文本节点是可以有值的

    
        
        
    
    
        
11111111111111111
    
            
        百度    
        百度1
        百度2
        

            百度
            百度1
            百度2
        
        
        
        
        
    

通过节点的层次关系获取节点

1. 父节点：parentNode对应一个节点对象
2. 子节点：childNodes对应一个节点集合，只包含下一层子节点，没有孙子节点
3. 兄弟节点：尽量少用兄弟节点，
   • 上一个兄弟节点：previousSibling
   • 下一个兄弟节点：nextSibling

    
        
    
    
        
        
div区域
        

            

                
d1
                
d2
            
        
        

            
up
            
down
        
        
    

节点操作

1. 创建并添加
2. 删除
3. 修改

    
22222222
33333333
44444444

核心DOM模型

• Document：文档对象
  1. 创建（获取）：在HTML DOM模型中可以使用window对象来获取
     1. window.document
     2. document
  2. 方法：
     1. 获取Element对象：
        • getElementById()：查找具有指定的唯一id的元素，id属性一般唯一
        • getElementsByTagName()：根据元素名称获取元素对象集合，返回数组
        • getElementsByClassName()：根据Class属性值获取元素对象集合，返回数组
        • getElementsByName()：根据name属性值获取元素对象集合，返回数组
     2. 创建其他DOM对象：
  3. 属性
• Element：元素对象
  1. 获取/创建：通过document来获取和创建
  2. 方法：
     • removeAttribute()：删除属性
     • setAttribute（）
• Node：节点对象，其他5个的父对象