DOM的基本介绍

一. DOM基本介绍

1.1 什么是DOM？

文档对象模型（Document Object Model ，简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或XML）的标准编程接口。

W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容，结构和样式。

1.2 DOM树（家族谱）

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model），HTML DOM模型被结构化为对象树：

HTML DOM 是HTML 的标准对象模型和编程接口。它定义了：

• 作为对象的HTML元素
• 所有HTML元素的属性
• 访问所有HTML元素的方法
• 所有HTML元素的事件

文档：一个页面就是一个文档，DOM中使用document表示

网页—框架标记（frameset iframe）—一个页面中包含了多个document文档对象

元素：页面中所有的标签都是元素，DOM中使用element表示

节点：网页中所有内容都是节点（标签，属性，文本，注释等），DOM中使用node表示

注意事项：DOM中把以上内容都看作是对象

二. 查找HTML DOM元素【标签，属性，文本内容】

HTML DOM 能够通过JavaScript进行访问（也可以通过其他编程语言）。在DOM中，所有HTML元素都被定义为对象。我们可以通过JavaScript对这些对象操作，改变HTML元素的内容。

- getElementById()

使用getElementById()方法可以获取带有ID的元素对象

- getElementsByTagName()

使用getElementsByTagName()方法可以返回带有指定标签名的对象集合。

document.getElementsTagName(‘标签名’)

注意事项：

• 因为得到的是一个对象的集合，所以想要操作里面的元素就需要遍历
• 得到元素对象是动态

还可以获取某个元素（父元素）内部所有指定标签名的子元素。

element.getElementsTagName(‘标签名’)

注意：父元素必须是单个元素（必须指明是哪一个元素对象）。获取的时候不包括父元素自己。

- getElementsByClassName()

getElementsByName() 方法可返回带有指定名称的对象的集合。

该方法与 getElementById() 方法相似，但是它查询元素的 name 属性，而不是 id 属性。

另外，因为一个文档中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的 name 属性），所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。

2.2 通过HTML5新增的方法获取

//根据类名返回元素对象集合
document.getElementsClassName('类名')；

//根据指定选择器返回第一个元素对象 切记 里面的选择器需要加符号
document.querySelector('选择器')

//根据指定选择器返回
document.querySelectorAll('选择器')

2.3 获取特殊元素（body,html）

获取body元素

document.body

获取html元素

document.documentElement

三. 改变HTML元素（内容）

javascript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等操作。注意以下都是属性。

style.property 修改样式

使用元素中的style属性可以修改该元素的样式。如a.style.fontSize，a.style.display。修改的样式直接作用在行内CSS样式中。

• 修改样式的属性名需要改写，将横杠从CSS属性名中去除，然后将横杠后第一个字母大写，如background-color写成backgroundColor
• 属性值都是字符串，设置时必须包括单位

控制元素隐藏与显示
//visibility属性      visible 表示元素是可见的      hidden 表示元素是不可见的
//object.style.visibility='值'
//display属性      none 表示此元素不会被显示      block 表示此元素将显示为块级元素，此元素前后会带有换行符
//object.style.display='值'