前端内容梳理（4）DOM和XML

1、DOM

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

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

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

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

2、HTML DOM

（1）HTML DOM是什么？

HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

（2）HTML  DOM节点是什么？

（2.1）在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。

（2.2）根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

            整个文档是一个文档节点

            每个 HTML 元素是元素节点

            HTML 元素内的文本是文本节点

            每个 HTML 属性是属性节点

            注释是注释节点

（3）HTML DOM 方法

方法的作用是什么？对HTML元素进行操作，可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。

（4）HTML DOM 属性：http://www.w3school.com.cn/htmldom/dom_properties.asp

（4.1）属性是节点（HTML 元素）的值，可以获取或设置。

（4.2）innerHTML 属性

（4.3）nodeName 属性

（4.4）nodeValue 属性

（4.5）nodeType 属性

（5）HTML DOM 事件：http://www.w3school.com.cn/htmldom/dom_events.asp

（5.1）用什么来对事件做出回应？HTML DOM 允许 JavaScript 对 HTML 事件作出反应。

（5.2）如何做出回应？将JavaScript代码和添加到HTML元素的事件属性中。

3、XML

（1）XML 是什么？

XML 指可扩展标记语言，XML 被设计用来传输和存储数据。

XML 仅仅是纯文本，XML 是不作为的。

XML 是对 HTML 的补充。XML 是独立于软件和硬件的信息传输工具。

（2）XML 与 HTML 有什么不同？

XML 不是 HTML 的替代。

XML 和 HTML 为不同的目的而设计：

XML 被设计为传输和存储数据，其焦点是数据的内容。

HTML 被设计用来显示数据，其焦点是数据的外观。

HTML 旨在显示信息，而 XML 旨在传输信息。

（3）使用XML的好处？

XML 把数据从 HTML 分离

XML 简化数据共享和传输

XML 简化平台的变更

XML 使您的数据更有用

（4）XML 文档结构

XML 文档形成了一种树结构，它从“根部”开始，然后扩展到“枝叶”。

（5）定义XML 文档需要注意什么？

所有 XML 元素都须有关闭标签

XML 标签对大小写敏感

XML 必须正确地嵌套

XML 文档必须有根元素

XML 的属性值须加引号

特殊字符的处理，要用实体引用代替

（6）XML验证

拥有正确语法的 XML 被称为“形式良好”的 XML。通过 DTD 验证的 XML 是“合法”的 XML。

4、XML DOM

（1）DOM 将 XML 文档作为一个树形结构，而树叶被定义为节点。XML DOM 定义了访问和处理 XML 文档的标准方法。

（2）XML DOM对XML文档的解析和加载的方法

（2.1）所有现代浏览器都内建了用于读取和操作 XML 的 XML 解析器。解析器把 XML 读入内存，并把它转换为可被

            JavaScript 访问的 XML DOM 对象。（即加载，方法有二，加载XML文件和XML字符串）

（2.2）XML DOM 含有遍历 XML 树以及访问、插入、删除节点的方法（函数）。然后，在访问并处理 XML 文档之前，必须

            把它载入 XML DOM 对象。

（2.3）函数 loadXMLDoc()，位于外部 JavaScript 中，用于加载 XML 文件。

（2.4）函数 loadXMLString()，位于外部 JavaScript 中，用于加载 XML 字符串。

（3）XML DOM 描述节点的信息属性

（3.1）节点属性：nodeName、nodeValue 以及 nodeType。

（3.2）nodeName 属性规定节点的名称。nodeName 是只读的；元素节点的 nodeName 与标签名相同；属性节点的

            nodeName 是属性的名称；文本节点的 nodeName 永远是 #text；文档节点的 nodeName 永远是 #document

（3.3）nodeValue 属性规定节点的值。元素节点的 nodeValue 是 undefined；文本节点的 nodeValue 是文本自身；属性节点

            的 nodeValue 是属性的值

（3.4）nodeType 属性规定节点的类型。nodeType 是只读的。

（4）XML DOM 访问具体的某个节点的途径

（4.1）getElementsByTagName() 方法，获取所有标签为**的节点集合，可以通过下标访问到具体的某个节点

（4.2）documentElement.childNodes获取根元素的子节点，循环（遍历）节点树，也可以通过下标访问到具体的某个节点

（4.3）可通过节点关系定位某个具体的节点。节点关系被定义为节点的属性：

            parentNode，childNodes，firstChild，lastChild，nextSibling，previousSibling

（5）XML DOM 对节点的操作

（5.1）获取节点的值

            nodeValue属性 ：可获取文本节点的文本值

            getAttribute() 方法或属性节点的 nodeValue 属性 ：可获取属性节点的值

            getAttributeNode() 方法：可返回属性节点

（5.2）改变节点的值

             nodeValue 属性可用于改变文本节点的值

             通过使用 setAttribute() 方法或属性节点的 nodeValue 属性：可改变属性的值

            （5.3）删除节点

             removeChild() 删除元素节点，可以通过使用 parentNode 属性和 removeChild() 方法删除自身

             nodeValue="" 可用于清空文本节点

             removeAttribute(name) 方法用于根据名称删除属性节点

             removeAttributeNode(node) 方法通过使用 Node 对象作为参数，来删除属性节点

 （5.4）替换节点

             replaceChild() 方法用于替换节点

             nodeValue 属性来替换文本节点中数据

             （5.5）创建节点

              createElement() 方法创建新的元素节点

              createAttribute() 用于创建新的属性节点

              setAttribute() 可以在属性不存在的情况下创建新的属性，我们可以使用这个方法来创建新属性

              createTextNode() 方法创建新的文本节点

              createCDATASection() 方法创建一个新的 CDATA section 节点

              createComment() 方法创建一个新的注释节点

（5.6）添加节点

            appendChild() 方法向已存在的元素节点添加子节点

            insertBefore() 方法用于在指定的子节点之前插入元素节点 

            如果属性不存在，则 setAttribute() 可创建一个新的属性

            insertData() 方法将数据插入已有的文本节点中

（5.7）克隆节点

             cloneNode() 方法创建指定节点的副本

（5.8）XMLHttpRequest 对象

            作用：

                      在不重新加载页面的情况下更新网页

                      在页面已加载后从服务器请求数据

                      在页面已加载后从服务器接收数据

                      在后台向服务器发送数据

           创建：xmlhttp=new XMLHttpRequest()