JavaScript快速入门 DOM编程（节点&document对象）

一、DOM概述
        （1）DOM(Document Object Model)文档对象模型，针对Html和XML的文档的对象API，是一项 W3C (World Wide Web Consortium) 标准。文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问、更新文档的内容、结构和样式。

（2）DOM（文档对象模型，Document Object Model）是W3C组织开发的一套便于操作XML和HTML的JavaScript方法，其将XML和HTML抽象成文档对象（Document），并将其中所有的标签和内容都抽象成对象（节点），利用面向对象的思对XML和HTML的操作。其中 Document 对象是DOM的顶层节点。

        （3）XML（扩展标记语言，Extensible Markup Language），主要用于信息的存储和传送，HTML也是一种XML
 

                                        Xxx.xml
                                        <Person>
                                        <name>xxx</name>
                                        <Person>

二、DOM的组成
                （1）DOM核心：针对任何结构化文档的标准模型。

                （2）XML DOM：针对 XML 文档的标准模型。

                （3）HTML DOM：针对 HTML 文档的标准模型。

三、XML DOM和HTML DOM的关系
        3.1 XML DOM
                （1）XML DOM 是：用于 XML 的标准对象模型，用于 XML 的标准编程接口，中立于平台和语言的 W3C 标准。

                （2）XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法（接口）。

======》换言之：XML DOM 是用于获取、更改、添加或删除 XML 元素的标准。

        3.2 HTML DOM
                （1）HTML DOM是：HTML 的标准对象模型，HTML 的标准编程接口的 W3C 标准。

                （2）HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

======》换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

        总结：HTML DOM 是 XML DOM 的扩展，换言之，XML DOM 的方法均可以使用在HTML中，而反过来，HTML DOM 的方法不可以使用在XML中。

        DOM的总结：

DOM：文档对象模型   document  object  model
DOM：是w3c制定的一套标准
DOM：操作HTML文件中的标签，属性实现增删改查。
四、DOM树与节点
        4.1 DOM树
                        对于HTML文档，DOM将所有的标签全部抽象成节点，并且节点间有严格的等级关系，以此形成一个DOM树。

    其中，每一行都是兄弟节点，绿色线条代表父子关系，而红色线条也是父子关系的一种，但是无法通过父亲查找孩子而找到。

  4.2 节点

                        由DOM树可见，节点分为三种：元素节点（标签），属性节点和文本节点。

                        节点属性：nodeName，nodeValue，nodeType

 

节点操作

操作目标节点的对象	增加	删除	修改	查询
当前节点	document.createElement(name)  node.setAttribute(name,value)	不可用	node.replaceNode(newNode)	document.getElementById(id) document.getElementsByName(name) document.getElementsByTagName(tagName)
父节点	node.appendChild(newNode)	node.removeChild(cNode)	node.replaceChild(newNode,oldNode)	参见节点关系

五、DOM的使用
        属性：
                nodeName：返回节点的名称，依据其类型。

                nodeType：返回节点的类型。

                attributes：返回元素的属性。

                childNodes：返回元素的子节点的 NodeList。

                firstChild：返回元素的首个子节点。

                lastChild：返回元素的最后一个子节点。

                parentNode：返回元素的父节点。

                nextSibling：返回元素之后紧跟的节点。

                previousSibling：返回元素之前紧随的节点。

                textContent：设置或返回元素及其后代的文本内容。

                innerTest：设置或返回元素后代的文本内容。

                innerHTML：设置或返回元素后代的内容。[HTML DOM]

        方法：
                hasAttribute(name)：返回元素是否拥有指定的属性。

                hasAttributes()：返回元素是否拥有属性。

                hasChildNodes()：返回元素是否拥有子节点。

                createAttribute(node)：创建属性节点。

                createElement(node)：创建元素节点。

                createTextNode(node)：创建文本节点。

                appendChild(node)：向节点的子