05-1 JS的DOM

JS的DOM

1、DOM概念

Dom是文档对象模型（Document ObjectModel）的简称，它的基本是思想是把结构化文档解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口，已达到使用编程语言操作文档的目的（比如增删内容）。所以，Dom可以理解成文档（HTML文档、XML文档 & SVG文档）的编程接口。严格的说DOM不属于javaScript，但是操作DOM是javaScript最常见的任务。

 

W3CDOM 标准被分为 3 个不同的部分：

Dom是HTML与XML的应用编程接口；

Dom是HTML与XML的应用编程接口；

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

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

 

XML DOM与HTML DOM的关系：

XML DOM 定义了访问和处理 XML 文档的标准方法 ；

HTML文档格式 符合XML语法标准，所以可以使用XML DOM API；

 

n  在XML DOM每个元素 都会被解析为一个节点Node，而常用的节点类型又分为元素节点（Element）、属性节点（Attr）、文本节点（Text）、文档节点（Document）；

n  HTML DOM 定义了针对 HTML文档的对象，可以说是一套 更加适用于 JavaScript 技术开发 的API；

n  HTML DOM是对XML DOM的扩展；

n  进行 JavaScript DOM开发 可以同时使用 XML DOM和 HTML DOM。

2、节点的概念

DOM的最小组成单元叫做节点（node），一个文档的树型结构（DOM树），就是由各种不同类型的节点组成。对于HTML文档，节点主要由以下六种类型：

3、javascript的dom树

Dom编程其实把网页文档看成一颗树(html  dom tree)，然后用相应的dom对象去访问网页文档，从而达到控制浏览器和网页的行为和外观。

4、javaScript DOM的功能

通过可编程的对象模型，javascript获得了足够的能力来创建动态的HTML。

javascript改变 页面中HTML元素

javascript改变 页面中HTML 内容 

javascript改变 页面中CSS

javascript 对页面中的所有事件做出反应

4.1获取元素的方法

getElementById() 方法

getElementById() 方法返回带有指定 ID 的元素               

                  

getElementsByTagName() 方法

getElementsByTagName() 返回带有指定标签名的所有元素。

 

getElementsByName() 方法

getElementByName() 返回带有指定name的所有元素。

 

4.2动态改变HTML内容&属性、css样式

innerHTML属性

获取元素内容的最简单方法是使用 innerHTML 属性。

innerHTML 属性对于获取或替换 HTML 元素的内容很有用。

4.3动态改变HTML

创建节点

5、节点Node

5.1节点的类型和名称

nodeName属性返回节点的名称，nodeType属性返回节点的常数值。

5.2节点的属性和方法

1)      ownerDocument属性：返回当前节点所在的顶层文档对象，即document对象

2)      nextSibling属性：返回紧跟在当前节点后面的第一个同级节点。如果当前节点后面没有同级节点，则返回null。

3)      previousSibling属性：返回当前节点前面的、距离最近的一个同级节点。如果当前节点前面没有同级节点，则返回null。注意，该属性还包括文本节点和评论节点。因此如果当前节点后面有空格，该属性会返回一个文本节点，内容为空格。

4)      firstChild属性：返回当前节点的第一个子节点，如果当前节点没有子节点，则返回null。注意，除了HTML元素子节点，该属性还包括文本节点和评论节点。

5)      lastChild属性：返回当前节点的最后一个子节点，如果当前节点没有子节点，则返回null。

6)      childNodes属性：返回当前节点的所有的子节点。

 

Node方法：

 

☞ 温馨提示

html dom 和 xml dom 都遵循相同dom规范的，所以他们有很多相同的方法和属性，因此我们也可以去查看 xml dom 的 node 节点提供的方法和属性

6、document

document节点是文档的根节点，每张网页都有自己的document节点。window.document属性就指向这个节点。也就是说，只要浏览器开始载入HTML文档，这个节点对象就存在了，可以直接调用。

 

属性：