JavaScript系列（六：DOM编程）

引言：

              DOM编程是JavaScript的重要内容，学习DOM从基础学起。

概述：

              文档对象模型（Document Object Model，DOM）是W3C组织推荐的处理可扩展标记语言XML的标准编程接口。它是一种与平台和语言无关的应用程序接口（API），可以作为网站内容与JavaScript互通的接口。

内容：

               本次内容主要包括：XML回顾、DOM编程基础、如何进行DOM编程。DOM主要就是为了处理XML文本的一种接口，其实也算是一种规范。

          XML回顾：

                          XML语言，全称是：可扩展标记语言。它是由SGML（标准通用标记语言）发展而来的一种简单，灵活的文本形式的标记语言，可提供跨平台、跨网格、跨程序语言的数据描述方式。专门用来在Web上传递信息，和HTML功能表现形式相似。那么这俩种语言的区别在哪里？这俩种语言是不同用途的语言，XML主要用来存放数据，被设计用来描述数据，关键点在于什么数据，如何存放数据。然而HTML主要是用来显示数据，关键点在于显示数据以及如何更好的显示数据。

                XML的组成部分看下图：

               

                这里要提高一个XML解析器的概念。XML是一种解析语言，需要匹配的解释器才能处理XML文件的数据。XML除了被浏览器内部调用，还可以在脚本中或者程序中调用。例如JavaScript就可以实现XML到HTML的转换，显示XML文件的数据。实例如下：           

<script language="javascript">

var xml = new AcitveXObject("Microsoft.XMLDOM") //建立一个Micosoft.XMLDOM对象
xml.async =false                                //关闭同步载入
xml.load("XML 文档")                            //使用load载入XML文档

var xsl = new AcitveXObject("Microsoft.XMLDOM")
xsl.async = false
xsl.load("XSL 文档")						    //使用load载入XSL文档
document.write(xml.transformNode(xsl))          //使用XSL文档转换XML文档

</script>

          DOM编程基础：

                           DOM编程的基础就是DOM的属性和方法。

                           DOM的属性：

               

                DOM的方法：

               

             

           使用DOM编程：

                 1 创建新节点：

                var newElement = document.createElement("name");  //创建新的元素节点<pre name="code" class="html">                var newText = document.createTextNode("text");    //创建新的文本节点<pre name="code" class="html">                //创建属性节点
                var newatt = xmlDoc.createAttribute("id");
                newatt.value = "liming";

                 2 添加节点：

                Node.appendChild(newchild);    //Node表示当前节点，newchild表示新添加节点，缺陷：将这个
                                               新节点添加到当前节点数组的末端。

                 3 插入节点：

                var beforeNode = parentNode.insertBefore(newChild,beforeChild);  //在某个现有节点之前添加一个新节点<pre name="code" class="html">                var newTextNode = parentNode.insertData(start,string);  //start表示插入文本的起始位置，string表示要插入的文本字符串

                 4 删除节点：

                removeChild(node);  //删除某个指定的节点，参数node为被移除的节点对象。
                deleteData(start,n); //删除文档文本节点中的字符串，start表示起始位置，n表示字符串长度
                removeAttribute(name);  //删除指定的属性节点。

                 5 访问节点：

                var x = xmldocumentObject.getElementsByTagName("tagname"); //访问文档中某个特定节点，返回指定名称的元素集合。

总结：

              DOM模型作为一种跨语言的规范，是一种W3C标准，目前所有Web浏览器在不同程度上都支持DOM。这里只是总结了JavaScript的DOM基础使用，在jQuery中DOM的写法与这里的不同，但是原理都是一样的，敬请关注后续博客。