文档对象模型----DOM(一)

1. DOM(文档对象模型):针对HTML和XML文档的一个API(应用程序接口)。他描绘了一个层次化的节点树,允许开发人员添加、移除和修改页面的一部分。DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构。

2. 节点:节点有12种类型,每种类型分别表示文档中不同的信息标记。每个节点都拥有各自的特点、数据和方法。节点之间也存在某种关系,这些关系构成了层次。所有页面标记(即节点)表现为一个以特定节点为根节点的树形结构,而其中的文档节点为每个文档的根节点。

12种节点如下:

     元素节点(各种标签)              Node.ELEMENT_NODE(1)

     属性节点                               Node.ATTRIBUTE_NODE(2)

     文本节点(标签内部的文字)    Node.TEXT_NODE(3)

     CDATA节点                                Node.CDATA_SECTION_NODE(4)

     实体引用名称节点                    Node.ENTRY_REFERENCE_NODE(5)

     实体名称节点                         Node.ENTITY_NODE(6)

     处理指令节点                         Node.PROCESSING_INSTRUCTION_NODE(7)

     注释节点                                   Node.COMMENT_NODE(8)

     文档节点(Document节点)      Node.DOCUMENT_NODE(9)

     文档类型节点                          Node.DOCUMENT_TYPE_NODE(10)

     文档片段节点                          Node.DOCUMENT_FRAGMENT_NODE(11)

     DTD声明节点                               Node.NOTATION_NODE(12)

如下文档片段:

 该HTML文档的层次结构如下:可以看出文档节点是文档的根节点,该例中文档节点只有一个子节点---<html>元素即文档元素(每个文档只有一个文档元素,HTML页面中,文档元素始终都是<html>元素。XML文件中,没有预定义的元素,因此任何元素都可以成为文档元素)。

 3. Node类型:Javascript中所有的节点类型都继承自Node类型(除IE外,在其他所有浏览器中都可以访问到这个类型),因此所有的节点类型都共享着相同的属性和方法。

(一)属性

     ① nodeType属性:表明节点的类型(上述12种节点的类型)。该属性的值有两种表示方式,一种是用数字表示节点的类型,另一种是用字符常量来表示。而IE浏览器不支持字符常量表示法,所以建议都用数字表示法。 

          在除IE的浏览器中,判断某个节点是否是元素类型:

         

          在所有浏览器中,判断某个节点是否是元素类型:

            

     ② nodeName和nodeValue属性: 不同类型的节点的这两个属性是不同的。

          document节点的nodeName为#docement,nodeValue为null。

          文本节点的nodeName为#text,nodeValue为文本节点中文本的值。

     ③ childNode属性:保存NodeList对象(为类数组对象,保存的是一组有序的节点,可以通过位置来访问这些节点),该对象的特点是他是基于DOM结构动态执行查询的结果即DOM结构的变化能够自动反映在NodeList对象中。

    之前提到过对arguments对象使用Array.prototype.slice()可以将其转换为数组。那么对NodeList对象使用同样的方法也可以将其转换成数组。

    ④ parentNode属性:指向文档树中的父节点。

    ⑤ previousSibling属性:该节点在列表中的下一个节点。

    ⑥ nextSibling属性:该节点在列表中的前一个节点。

    ⑦ firstChild和lastChild属性:父节点的第一个孩子节点和最后一个孩子节点

    ⑧ ownerDocument属性:指向整个文档的文档节点

(二)方法

     2-5的方法只有在可以具有子节点的节点才可以调用,否则发生错误。

    ① hasChildNodes()方法:在节点包含一个或多个子节点的情况下返回true

    ② appendChild()方法:向childNodes列表的末尾添加一个新节点,并将这个新节点返回。如果传入的节点已经是文档的一部分,那结果就是将该节点从原来的位置移到新的位置。

    ③ insertBefore()方法:将节点放在NodeLists列表的某个特定的位置。参数有两个,要插入的节点和参照的节点(要插入的节点在该节点前一个位置)

   ④ replaceChild()方法:用一个新节点替换旧节点,返回的是被替换的节点。参数有两个,要插入的节点和要替换的节点。注意:被替换的节点仍然在文档中,但在文档中已经没有了他的位置。

  ⑤ removeChild()方法:移除节点,返回的是被移除的节点。参数有一个,要被移除的节点。

  ⑥ cloneNode()方法:创建调用该方法的节点的副本。接受一个参数,true代表深复制,false代表浅复制。复制后返回的节点属于文档所有,但没有父节点,可以用2-4方法为他指定父节点。

  ⑦ normalize()方法:处理文档树中的文本节点。当出现空文本节点就删除它,出现两个连续的文本节点就和合并它。

猜你喜欢

转载自blog.csdn.net/wurourouzhang/article/details/85308964