DOM

• 概念： Document Object Model 文档对象模型

  • 将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作

• W3C DOM 标准被分为 3 个不同的部分：

  • 核心 DOM - 针对任何结构化文档的标准模型

    • Document：文档对象

    • Element：元素对象

    • Attribute：属性对象

    • Text：文本对象

    • Comment:注释对象

    • Node：节点对象，其他5个的父对象

  • XML DOM - 针对 XML 文档的标准模型
  • HTML DOM - 针对 HTML 文档的标准模型

• 核心DOM模型：

  • Document：文档对象
    1. 创建(获取)：在html dom模型中可以使用window对象来获取
       1. window.document
       2. document
    2. 方法：
       1. 获取Element对象：
          1. getElementById() ： 根据id属性值获取元素对象。id属性值一般唯一
          2. getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
          3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
          4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
       2. 创建其他DOM对象：
          createAttribute(name)
          createComment()
          createElement()
          createTextNode()
    3. 属性
  • Element：元素对象
    1. 获取/创建：通过document来获取和创建
    2. 方法：
       1. removeAttribute()：删除属性
       2. setAttribute()：设置属性
  • Node：节点对象，其他5个的父对象
    • 特点：所有dom对象都可以被认为是一个节点
    • 方法：
      • CRUD dom树：
        • appendChild()：向节点的子节点列表的结尾添加新的子节点。
        • removeChild() ：删除（并返回）当前节点的指定子节点。
        • replaceChild()：用新节点替换一个子节点。
    • 属性：
      • parentNode 返回节点的父节点。