文档对象模型(DOM)

文档对象模型(DOM)

   DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构。节点分为几种不同的类型:文档型节点、元素节点、特性节点、注释节点等共有12种节点类型。DOM1级定义了一个Node接口,该接口由所有节点类型实现。可通过nodeType属性显示节点的类型。推荐将nodeType与数字值比较得知节点类型(如果是使用数值常量例如Node.ELEMENT_NODE(1)比较,在IE中无效)。

一、Node类型

    1、每个节点都有三个属性(通用):

                 nodeName(对应节点元素标签名,在element类型中等同于属性tagName)、

                 nodeType(对应节点类型对应的数字)、

                 nodeValue(对应节点的值)。

    2、节点关系(家族关系)(用于遍历节点)。对应有一下几个属性:

                 childNodes   返回子节点的Nodelist

      (Nodelist 似数组但不是数组,有length属性,是有生命、有呼吸的对象,能随节点的变动而实时变动,而非第一次访问的某个瞬间拍摄下的快照。Nodelist可通过方框号下标访问,也可以使用item()访问)

                 parent    返回节点的父节点

                 firstChild  返回第一个子节点

                 lastChild   返回最后一个子节点

                 previousSibling  返回前一个同胞兄弟节点

                 nextSibling    返回下一个同胞兄弟节点

     3、节点操作(都是对其子节点的操作,也即是对其Nodelist的操作)

                 appendChild()   用于childNodes列表的末尾追加一个节点

                 insertBefore()  (两个参数:第一个参数为新节点,第二个参数为参照节点)在参照节点前插入新节点

                 replaceChild()    (两个参数:第一个参数为新节点,第二个参数为替换节点)用新节点替换要替换的节点

                 removeChild()    移除节点

      4、cloneNode()   用于创建调用这个方法的节点的一个完全相同的副本。若参数为true,则进行深度克隆,但一般浏览器不会克隆其节点中的javascript或事件处理,只复制特性和子节点。(但IE有个bug,会复制事件处理程序)

      5、normalize()   用于处理文档树中的文本节点。如果在调用该方法的后代子节点中发现空文本节点,就删除它;如果找到相邻的文本节点,则将它们合并为一个文本节点。

二、获取节点

     1、document.getElementById("ID name")    通过Id获取节点

     2、document.getElementsByTagName("tag name")    通过标签名称获取节点

     3、document.getElementsByName("name")      通过属性name的值获取节点

三、特性节点的操作

        设  element为元素节点

          (1)element.getAttribute("特性名称")    获取特性节点

          (2)element.setAttribute("名称",“值”)  设置特性节点

          (3)element.removeAttribute("特性名称")  移除特性节点

            以下方法不常用

          (4)element.getAttributeNode("名称")   获取特性节点

          (5)element.setAttributeNode(node)    设置特性节点

          (6)element.createAttribute("名称")      创建特性节点

四。创建节点

           (1)document.createElement(“标签名”)     创建Element节点

           (2)document.createAttribute("属性名称")  创建Atrr节点

           (3)document.createTextNode("字符串")    创建Text节点

           (4)document.createComment("字符串")    创建Comment节点

           (5)document.createDocumentFragment()   创建DocumentFragment类型

五、不同类型的节点

      1、document类型(document作为HTMLDocument的一个实例)

                (1)document.documentElement      获取<html>的引用

                (2)document.body     获取<body>的引用

                (3)document.doctype   获取<!DOCTYPE>的引用    有些浏览器不把它当做文档的子节点,但其也是一节点,但不会出现在document.childNodes中。

                (4)document.title  获取文档标题

                  三个与网页请求有关的属性URL、domain、referrer,这些信息都存储在HTTP的头部: 

               (5)document.URL  获取页面的完整URL

               (6)document.domain    获取页面的域名(由于不同的子域的页面无法通过javascript通讯,而将每个页面的document.domain设置为相同的值,则不同的页面中javascript可以访问对方的javascript对象。但如果domain属性一开始设置为“松散”例如"wrox.com",就不能设置为“紧绷”例如“p2p.wrox.com”)

               (7)document.referrer   获取链接到当前页面的URL

      一些document类型的特殊集合

                (1)、document.anchors    包含文档中的所有带有name特性的<a>元素

                (2)、document.applets     包含文档中所有<applet>元素

                (3)、document.forms       包含文档中所有的<form>元素

                (4)、document.images      包含文档中所有的<img>元素

                (5)、document.links          包含文档中所有带有href特性的<a>元素

       2、Element类型(所有HTML元素都由HTMLElement类型表示)

            元素标签element的属性有:

                 (1)、element.id   元素在文档中唯一的标识

                 (2)、element.title  有关元素的附加说明信息

                 (3)、element.lang  元素内容的语言代码

                 (4)、element.dir  语言方向  值有“ltr”和“rtl”

                 (5)、element.className  与元素的class属性对应     

                 (6)element.attributes      返回特性列表也即对应的NamedNodeMap 与Nodelist类似,可以通过下标访问,也可以通过以下方法操作:

                      *element.attributes.getNameItem(name)    获取特性为name的属性

                      *element.attributes.removeNamedItem(name)  移除特性为name的节点

                      *element.attributes.setNamedItem(node)     向列表添加节点

                      *element.attributes.item(pos)     获取数字pos位置处的节点

               

       3、Attr类型

               三个属性:name、value、specified

               每个特性节点都有一个specified属性,当为true时 ,代表是指定的属性,当为false时,代表未经设定的属性,也即是默认属性

       4、Text类型

            可以通过nodeValue属性或data属性访问Text节点中包含的文本。

            一些操作文本节点的操作

                 appendData(text)    将text添加到节点的末尾

                 deleteData(offset, count)     从offset指定的位置开始删除count个字符     

                 insertData(offset,  text)       在offset指定的位置插入text

                 replaceData(offset, count, text)   用text替换从offset指定位置开始到offset+count为止处的文本

                 splitText(offset)     从offset指定的位置将当前文本节点分成两个文本节点。

                 substringData(offset,count) 提取从offset指定位置开始到offset+count为止的字符串

       

       5、Comment类型

             Comment类型与Text类型继承来自相同的基类,因此它除了splitText()之外的所有字符串操作方法。与Text类型相似,也可以通过nodeValue或data属性来取得注释的内容。注释节点也可以通过其父节点来访问。

         eg:

              <div id="myid">      

              <!--这是注释-->

              </div>

      var div = document.getElementById("myid"),

           comment = div.firstChild;

          alert(comment.data);  //这是注释

        6、CDATASection类型

             CDATASection 类型只针对基于XML的文档,表示的是CDATA区域,与Comment类似,CDATASection类型继承自Text类型,因此拥有除了splitText()之外的所有字符串操作方法。

             ps: CDATA区域只会出现在XML文档中,因此多数浏览器都会把CDATA区域错误地解析为Comment或Element。

        7、DocumentFragment类型

            在所有节点类型中,只有DocumentFragment在文档中没有对应的标记,dom规定文档片段是一种“轻量级”的文档,可以包含和控制节点,不会像完整的文档那样占用额外的资源。它继承了Node的所有方法。

           子节点可以是Element、ProcessingInstruction、Comment、Text、CDATASection或EntityReference

           ps:虽然不能将文档片段直接添加到文档中,但可以将它作为一个“仓库”使用,用来存储其他节点。

    

六、文档写入方法:

         1、document.write()    原样写入文本

         2、document.writeln()  写入文本后,末尾添加一个换行符

         3、document.open()    打开网页的输入流

         4、document.close()    关闭网页的输入流

    (ps:参考javascript高级程序设计第三版,若有错漏,万望各位帮忙纠错,共同分享学习经验才有进步的。)

原文地址:https://www.cnblogs.com/siwy/p/4894093.html