JS——DOM对象

一. 概念：

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

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

• 核心 DOM - 针对任何结构化文档的标准模型
  1. Document：文档对象
  2. Element：元素对象
  3. Attribute：属性对象
  4. Text：文本对象
  5. Comment:注释对象
  6. 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个的父对象
  1. 特点：所有dom对象都可以被认为是一个节点
  2. 方法：
     CRUD dom树：
     (1). appendChild()：向节点的子节点列表的结尾添加新的子节点。
     (2).removeChild() ：删除（并返回）当前节点的指定子节点。
     (3). replaceChild()：用新节点替换一个子节点。
  3. 属性：
     parentNode 返回节点的父节点。

四. HTML DOM

• 标签体的设置和获取：innerHTML
• 使用html元素对象的属性
• 控制元素样式
  1. 使用元素的style属性来设置
     如：
     //修改样式方式1
     div1.style.border = “1px solid red”;
     div1.style.width = “200px”;
     //font-size–> fontSize
     div1.style.fontSize = “20px”;
  2. 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。