AJAX初级应用——DOM的应用

一、DOM的定义：

       DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范，DOM是一种与浏览器、平台、语言无关的接口，使得你可以访问页面其他的标准。其结构是树形结构。

 

二、DOM与JavaScript的区别：

      W3C DOM和JavaScript很容易混淆不请。DOM是面向HTML和XML文档的API，为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。JavaScript则是用于访问和处理DOM的语言。一般，支持JavaScript的所有浏览器都支持DOM。

 

三、DOM的属性和方法

       1、  属性：

       childNodes               返回当前元素所有子元素的数组

       firstChild                   返回当前元素的第一个下级子元素

       lastChild                   返回当前元素的最后一个子元素

       nextSibling                返回紧跟在当前元素后面的元素

       nodeValue                指定表示元素值的读/写属性

       parentNode              返回元素的父节点

       previousSibling         返回紧邻当前元素之前的元素

       2、  方法：

      createAttribute()                    用指定的名字创建新的Attr节点

      createComment()                  用指定的字符串创建新的Comment节点

      createElement ()                    用指定的标记名创建新的Element节点

      createTextNode ()                用指定的文本创建新的TextNode节点

      getElementById()                  返回文档中具有指定id属性的Element节点

      getElementByTagName()      返回文档中具有指定标记名的所以Element节点

 

四、Elementc常用的方法：

         getAttribute()                           以字符串形式返回指定属性的值

         getAttributeNode()                  以Attr节点的形式返回指定属性的值

         getElementsByTabName()       返回一个指定标记名所有Element节点的Node数组

         has Attribute()                         表示该元素释放具有指名字的属性，有则返回true

         removeAttribute()                    从元素中删除指定的属性

         removeAttributeNode()           从元素的属性列表中删除指定的Attr节点

        setAttribute()                           设置指定属性的值，如果该属性不存在，则添加一个新元素

        setAttributeNode()                  把指定的Attr节点添加到该元素的属性列表中

 

五、node对象：方便遍历整个文档

       1、  常用属性：

       Attributes            如果该节点是一个Element，则以NameNodeMap形式返回该元素的属性

       childNodes         以Node[]形式存放当前节点的子节点

       firstChild             以Node的形式返回当前节点的第一个子节点

       lastChild             以Node的形式返回当前节点的最后一个子节点

       nextSibling          以Node的形式防火当前接的的兄弟下一个节点

       nodeName         节点的名字，Element节点则代表Element的标记名称

       nodeType           代表节点的类型

       pareantNode      以Nod的形式返回当前节点的父节点

       previousSibling   以Nod的形式返回紧挨当前节点，位于它之前的兄弟节点

 

      2、常用方法

      appendChid()           通过把一个节点增加到当前节点的childNod[]组

      cloneNode()            复制当前节点

      hasChildNodes()     如果当前节点用于子节点，则将返回true

      inserBerfore()          给文档树插入一个节点，位置在当今节点的指定子节点之前，如果该节点已经存在，则删除之后在插入到她的位置

      removeChild()         从文档树中删除并返回指定的子节点

      replaceChild()         从文档树中删除并返回指定的子节点，用另一个节点替换它

 

六、简单例子：类留言版

        1、  新建一Dom.html，其body体如下

               

        2、  增加添加功能，其javascript代码如下

               

               在这代码中，有tbody标签，这标签是table体，加入了这标签是为了实现跨平台

 

        3、  添加删除功能

                a、在 中添加一删除方法，代码如下：

                  

                b、实现deleteTe方法：

                   

                注意到这来有返回值false，这里的作用是为了是链接失效

         4、  测试

                打开浏览器，输入Dom.html所在的位置，显示

               

                姓名和信息分别输入chensr和你好，点击提交

               

                 点击delete，会有一个提示框提示你是否删除，点击是，如果删除成功，则表示测试成功。