锐客网

  1. 首页 > it技术 > >

文档对象模型----DOM（一）

1. DOM（文档对象模型）：针对HTML和XML文档的一个API（应用程序接口）。他描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的一部分。DOM可以将任何HTML或XML文档描绘成一个由多层节点构成的结构。
2. 节点：节点有12种类型，每种类型分别表示文档中不同的信息或标记。每个节点都拥有各自的特点、数据和方法。节点之间也存在某种关系，这些关系构成了层次。所有页面标记（即节点）表现为一个以特定节点为根节点的树形结构，而其中的文档节点为每个文档的根节点。
12种节点如下：
元素节点（各种标签）Node.ELEMENT_NODE(1)
属性节点Node.ATTRIBUTE_NODE(2)
文本节点（标签内部的文字）Node.TEXT_NODE(3)
【文档对象模型----DOM（一）】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)
如下文档片段：
文档对象模型----DOM（一）
文章图片

该HTML文档的层次结构如下：可以看出文档节点是文档的根节点，该例中文档节点只有一个子节点---元素即文档元素（每个文档只有一个文档元素，HTML页面中，文档元素始终都是元素。XML文件中，没有预定义的元素，因此任何元素都可以成为文档元素）。
文档对象模型----DOM（一）
文章图片

3. Node类型：Javascript中所有的节点类型都继承自Node类型（除IE外，在其他所有浏览器中都可以访问到这个类型），因此所有的节点类型都共享着相同的属性和方法。
（一）属性
① nodeType属性：表明节点的类型（上述12种节点的类型）。该属性的值有两种表示方式，一种是用数字表示节点的类型，另一种是用字符常量来表示。而IE浏览器不支持字符常量表示法，所以建议都用数字表示法。
在除IE的浏览器中，判断某个节点是否是元素类型：
文档对象模型----DOM（一）
文章图片

在所有浏览器中，判断某个节点是否是元素类型：
文档对象模型----DOM（一）
文章图片

② nodeName和nodeValue属性： 不同类型的节点的这两个属性是不同的。
document节点的nodeName为#docement，nodeValue为null。
文本节点的nodeName为#text，nodeValue为文本节点中文本的值。
③ childNode属性：保存NodeList对象（为类数组对象，保存的是一组有序的节点，可以通过位置来访问这些节点），该对象的特点是他是基于DOM结构动态执行查询的结果即DOM结构的变化能够自动反映在NodeList对象中。
文档对象模型----DOM（一）
文章图片

之前提到过对arguments对象使用Array.prototype.slice()可以将其转换为数组。那么对NodeList对象使用同样的方法也可以将其转换成数组。
文档对象模型----DOM（一）
文章图片

④ parentNode属性：指向文档树中的父节点。
⑤ previousSibling属性：该节点在列表中的下一个节点。
⑥ nextSibling属性：该节点在列表中的前一个节点。
⑦ firstChild和lastChild属性：父节点的第一个孩子节点和最后一个孩子节点
⑧ ownerDocument属性：指向整个文档的文档节点
（二）方法
2-5的方法只有在可以具有子节点的节点才可以调用，否则发生错误。
① hasChildNodes()方法：在节点包含一个或多个子节点的情况下返回true
② appendChild()方法：向childNodes列表的末尾添加一个新节点，并将这个新节点返回。如果传入的节点已经是文档的一部分，那结果就是将该节点从原来的位置移到新的位置。
文档对象模型----DOM（一）
文章图片

③ insertBefore()方法：将节点放在NodeLists列表的某个特定的位置。参数有两个，要插入的节点和参照的节点（要插入的节点在该节点前一个位置）
文档对象模型----DOM（一）
文章图片

④ replaceChild()方法：用一个新节点替换旧节点，返回的是被替换的节点。参数有两个，要插入的节点和要替换的节点。注意：被替换的节点仍然在文档中，但在文档中已经没有了他的位置。
文档对象模型----DOM（一）
文章图片

⑤ removeChild()方法：移除节点，返回的是被移除的节点。参数有一个，要被移除的节点。
文档对象模型----DOM（一）
文章图片

⑥ cloneNode()方法：创建调用该方法的节点的副本。接受一个参数，true代表深复制，false代表浅复制。复制后返回的节点属于文档所有，但没有父节点，可以用2-4方法为他指定父节点。
⑦ normalize()方法：处理文档树中的文本节点。当出现空文本节点就删除它，出现两个连续的文本节点就和合并它。


    推荐阅读


    上一篇：GitHub 基本操作

    下一篇：Shell脚本|Shell 编程之条件语句 常见的条件测试操作、if 条件语句、case 分支语句