一. DOM概念

DOM(文档对象模型 document object moudle)是针对 HTMLXML 文档的一个 API(应用程序编程接口)。DOM 描 绘了一个层次化的节点树,允许开发人员添加、移除和修改页面的某一部分。

W3C DOM标准分为3部分:

  • core DOM - 针对任何结构化文档的标准模型
  • XML DOM - 针对 XML 文档的标准模板
  • HTML DOM - 针对 HTML 文档的标准模型

备注:HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准,即操作HTML的元素

DOM级别

DOM Level 1:于1998年10月成为W3C的推荐标准。DOM 1级由两个模块组成:DOM核心(DOM Core)和DOM HTML。

DOM Level 2:对DOM level 1做了扩展

DOM Level 3:对DOM level 2做了进一步的扩展

DOM Level 0: 首先我们的确定的是在DOM标准中并没有DOM 0级的。所谓的DOM 0级是DOM历史坐标中的一个参照点而已,具体说呢,DOM 0级指的是IE4和Netscape 4.0这些浏览器最初支持的DHTML。


二. DOM节点概述

看下面的一段HTML:


<html>
<head>
<title>DOM节点分类</title>
</head>
<body><p id="p">Hello world!</p></body>
<!-- 注释 -->
</html>

说明:

  1. document节点是每个文档的根节点

  2. document节点下面只有一个html节点,我们称之为文档元素(documentElement)

    • 文档元素是文档的最外层元素,其他元素都包含在文档元素中。

    • 一个文档只能有一个文档元素,在html中文档元素永远是 <html>元素。

  3. DOM树中,html文档中每一处标记都可以用树中的一个节点来表示。

    • html(元素)标签,通过元素节点表示

    • 属性,通过属性节点来表示

    • 文档类型,通过文档类型节点来表示

    • 注释,通过注释类型来表示


三. DOM节点分类

DOM中,共有12中节点类型,每一个节点,必是这12中类型中的一种。

  1. Node.ELEMENT_NODE (1) //元素
  2. Node.ATTRIBUTE_NODE (2) //元素的属性HELLO</P>
  3. Node.TEXT_NODE (3) //<![CDATA[文本]]>中括着的纯文本,它没有子节点
  4. Node.CDATA_SECTION_NODE (4) //子节点一定为TextNode
  5. Node.ENTITY_REFERENCE_NODE (5) //文档中的实体引用 &nbsp;
  6. Node.ENTITY_NODE (6) //DTD中的实体定义<!ENTITY foo “foo”>,无子节点
  7. Node.PROCESSING_INSTRUCTION_NODE (7) //表示一个文档处理程序使用的特有指令。,无子节点
  8. Node.COMMENT_NODE (8) //注释
  9. Node.DOCUMENT_NODE (9) //最外层的Root element,包括所有其它节点 根节点
  10. Node.DOCUMENT_TYPE_NODE (10) //DTD,<!DOCTYPE………..> 每个文档节点都有一个DocumentType节点,它提供文档类型的定义。
  11. Node.DOCUMENT_FRAGMENT_NODE (11) //可以将文档片段看作轻量级或者更小型的Document节点。定义这种数据类型是因为通常希望只提取文档的一部分来处理。
  12. Node.NOTATION_NODE (12) //DTD中的Nation定义 在XML文档中表示一个符号。

可以通过获取一个节点的nodeType属性来得到节点的类型。

经常用到了比较重要的节点:(记住每个节点的数字值)

元素类型 NodeType
元素 1
属性 2
文本 3
注释 8
文档 9

四. 节点属性(特性)

  1. nodeName:节点名称(nodeName 始终包含 HTML 元素的大写字母标签名) nodeName 是只读的

    • 元素节点的 nodeName 与标签名相同
    • 属性节点的 nodeName 与属性名相同(元素.getAttributeNode(“属性名”)获取属性节点)
    • 文本节点的 nodeName 始终是 #text(通过元素的子节点获取)
    • 注释节点的nodeName是#comment(通过元素的子节点获取)
    • 文档节点的 nodeName 始终是 #document
  2. nodeValue:节点值 (设置或返回节点的值)

    • 元素节点的 nodeValue 是 undefined 或 null
    • 属性节点的 nodeValue 是属性值
    • 文本节点的 nodeValue 是文本本身
    • 注释节点的nodeValue是注释里面的内容
    • 文档节点的nodeValue 是null
  3. nodeType:节点类型

    • 元素 element 1
    • 属性 attr 2
    • 文本 text 3
    • 注释 comments 8
    • 文档 document 9
Copyright © 李振超 2018 all right reserved,powered by Gitbook
该文件最后修订时间: 2018-10-18 03:19:29

results matching ""

    No results matching ""