DOM

当网页被加载时，浏览器会创建页面的文档对象模型(Document Object Model)。

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

DOM分类

W3C DOM标准被分为3个不同的部分：即核心DOM、XML DOM、HTML DOM。

核心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)常用方法：

①获取Element对象：

getElementById()：根据id属性值获取元素对象。id属性值一般唯一。比如：

document.getElementsById("div1");

getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组。比如：

document.getElementsByTagName("div");

getElementsByClassName()：根据Class属性值获取元素对象们。返回值是一个数组。比如：

document.getElementsByClassName("cls1");

getElementsByName()：根据name属性值获取元素对象们。返回值是一个数组。比如：

document.getElementsByName("username");

②创建其他DOM对象：

  • createAttribute(name)
  • createComment()
  • createElement()
  • createTextNode()

②Element 元素对象

(1)获取/创建：通过document来获取和创建

(2)常用方法：

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

③Node 节点对象

Node节点对象是其他5个的父对象，所有dom对象都可以被认为是一个节点。

(1)常用方法：

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

(2)常用属性：

parentNode：返回节点的父节点。

HTML DOM

HTML DOM定义了用于HTML的一系列标准的对象，以及访问和处理HTML文档的标准方法。通过DOM，可以访问所有的HTML元素，连同它们所包含的文本和属性。

①标签体的设置和获取

标签体的设置和获取都采用innerHTML，比如获取div1中的标签体：

var div = document.getElementById("div1");var innerHTML = div.innerHTML;

再比如给div标签中追加一个文本输入框

div.innerHTML += "<input type='text'>";

②控制元素样式

使用元素的style属性来设置，如：

div1.style.border = "1px solid red";div1.style.width = "200px";

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