JavaScript-DOM

JavaScript-DOM

概念

Document Object Model 文档对象模型

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

组成

W3C DOM标准被分为三个不同的组成部分：

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

  • Document：文档对象

  • Element：元素对象

  • Attribute：属性

  • Text：文本对象

  • Comment：注释对象

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

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

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

---

核心DOM模型

Document：文档对象

1、创建（获取）

• window.document

• document

2、方法

• 获取Element对象
  • getElementById() 根据id属性值获取元素对象，id属性值一般唯一
  • getElementsByTagName() 根据元素名称（即标签名称）来获取元素对象们，返回值是一个数组
  • getElementsByClassName() 根据Class的属性值来获取元素对象们，返回值是一个数组
  • getElementsByName() 根据name属性值来获取元素对象们，返回值是一个数组
• 创建其他DOM对象
  • createAttribute(name)
  • createComment()
  • createElement()
  • createTextNode()

Element：元素对象

1、创建（获取）

• window.Element
• Element

2、方法

• removeAttribute() 删除属性
• setAttribute() 设置属性

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

1、特点：所有dom对象都可以认为是一个节点

2、方法：

• CRUD dom树
  • appendChild() 向节点的子节点列表的结尾添加新的子节点
  • removeChild() 删除并返回当前节点的指定子节点
  • replaceChild() 用新节点替换一个子节点

3、属性

• parentNode 返回当前节点的父节点

---

HTML DOM

• 标签体的设置和获取：innerHTML

• 使用html元素对象的属性

• 控制元素样式

  • 使用元素的style属性来设置

    • div.style.width = "200px"
      

  • 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值