文档对象模型

文档对象模型

文档对象模型（document object model）是一种独立于浏览器类型来表示文档的方法。它允许开发人员通过一组通用的对象、属性、方法和事件来访问文档，并通过脚本动态修改网页内容。

BOM 与 DOM 的区别

1. DOM 仅包含 Web 页面的文档，而 BOM 提供了浏览器各个领域的脚本编程访问，包括按钮、标题栏以及页面的某些部分；
2. BOM 专用于某个浏览器。浏览器是不能标准化的，因为必须提供有竞争力的特性。因此，需要另一组属性、方法甚至对象，才能使用 JavaScript 操作他们。

DOM 常见的对象及其属性、方法

1. Document 对象及方法

   document 对象是 HTML 文档的根节点，它提供了各种属性和方法。其方法允许查找单个元素或元素组，创建新元素、属性和文本节点。

   • 查找一个或多个元素

     document 对象的方法	说明
     getElementById(idValue)	根据所提供的元素的 id 值，返回对该元素的引用（节点）
     getElementsByTagName(tagName)	根据参数种提供的标记，返回对一组元素的引用（节点列表）
     querySelector(cssSelector)	返回与给定 CSS 选择器匹配的第一个元素的引用（节点）
     querySelectorAll(cssSelector)	返回与给定 CSS 选择器匹配的一组元素的引用（节点列表）

   • 创建元素和文本

     document 对象的方法	说明
     createElement(elementName)	使用指定的标记名创建一个元素节点，返回所创建的元素
     createTextNode(text)	创建并返回包含所提供文本的文本节点

   • 获取文档的根元素

     document 对象的属性	说明
     documentElement	返回对文档最外层元素的引用（即根元素，如<html/>）

2. Element 对象及方法

   Element 对象比较简单，仅有几个成员（属性和方法）

   成员名	说明
   tagName	获取元素的标记名称
   getAttribute(attributeName)	返回所提供的属性的值，如果该属性不存在，就返回 null 或空字符串
   setAttribute(attributeName, value)	用指定的值设置属性
   removeAttribute(attributeName)	从元素中删除指定属性的值，代之以默认值

3. Node 对象及方法

   Node 对象可以用来导航 DOM，因为整个document 树形结构都是由 Node 节点构成的。

   Node 对象的属性	对属性的说明
   firstchild	返回元素的第一个子节点
   lastChild	返回元素的最后一个子节点
   peviousSibling	在同级子结点中，返回当前子节点的前一个兄弟节点
   nextSibling	在同级子节点中，返回当前子节点的后一个兄弟节点
   ownerDocument	返回包含节点的文档的根节点
   parentNode	返回树型结构中包含当前节点的元素
   nodeName	返回节点的名称
   nodeType	返回一个数字，表示节点的类型
   nodeValue	以纯文本格式获取或设置结点的值

   Node 对象的方法	说明
   appendChild(newNode)	将一个新 node 对象添加到子节点列表的末尾；该方法返回追加的节点
   cloneNode(cloneChildren)	返回当前节点的一个副本；该方法的参数是一个布尔值，如果该值为 true，则克隆当前节点及其所有的子节点；如果该值为 false，则仅克隆当前节点，而不包含其子节点
   hasChildNodes()	如果节点有子节点，则返回 true，否则返回 false
   insertBefore(newNode, referenceNode)	在 referenceNode 指定的节点前，插入一个 node 对象，返回新插入的节点
   removeChild(childNode)	从 node 对象的子节点列表中，删除一个子节点，并返回删除的节点

操作 DOM

1. 访问元素

2. 改变元素的外观

   • 使用 style 属性改变各个 CSS 属性：所有浏览器都实现了这个对象，使用该对象可以修改浏览器支持的任何 CSS 属性
   • 修改元素的 class 属性值：可以把 CSS 类赋予元素，该属性通过 className 属性来使用。

3. 定位和移动内容

   使用 position 属性改变所需位置的类型，使用 left 和 top 属性可以定位元素。