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

层次节点

DOM可以将任何 HTML 或 XML 文档描绘成一个由多层节点构成的结构。节点分成几种不同的类型，每种类型分别表示文档中不同的信息及（或）标记。每个节点都拥有各自的特点、属性及方法，另外也与其他节点存在某种关系。节点之间的关系构成了层次，而所有页面标记则表现为一个以特定节点为根节点的树形结构。以下面的 HTML 为例：

  1. <html>
  2.   <head>
  3.     <title> Sample Page </title>
  4.   </head>
  5.   <body>
  6.     <p> Hello World! </p>
  7.   </body>
  8. </html>

可以将这个简单的 HTML 文档表示为一个层次结构：

  1. Document
  2.   Element html
  3.     Element head
  4.       Element title
  5.         Text Sample Page
  7.     Element body
  8.       Element p
  9.         Text Hello World!

文档节点是每个文档的根节点，在这个例子中，文档节点只有一个子节点，即 <html> 元素，我们称之为 文档元素。文档元素是文档的最外层元素，文档中的其他所有元素都包含在文档元素中。每个文档只能有一个文档元素。在 HTML 中，文档元素始终是 <html> 元素；而在 XML 中，没有预定义的元素，因此任何元素都能成为文档元素。

每一段标记都可以通过树中的一个节点来表示： HTML 元素通过元素节点来表示，特性（attribute）通过特性节点来表示，文档类型通过文档类型节点来表示，而注释通过注释节点表示。总共有 12 种节点类型，这些类型都继承自一个基类型。

Node 类型

DOM1 级定义了一个 Node 接口，该接口将由 DOM 中的所有节点类型实现。 这个 Node 接口在 Javascript 中是作为 Node 类型实现的；除了 IE 之外，其他所有浏览器中都可以访问到这个类型。Javascript 中所有节点类型都继承自 Node 类型，因此所有节点类型都共享着相同的基本属性和方法。

每个节点都有一个 nodeType 属性，用于表明节点的类型。 节点类型由在 Node 类型中定义的下列 12 个数值常量来表示，任何节点类型必居其一：

  1. Node.ELEMENT_NODE(1)
  2. Node.ATTRIBUTE_NODE(2)
  3. Node.TEXT_NODE(3)
  4. Node.CDATA_SECTION_NODE(4)
  5. Node.ENTITY_REFERENCE_NODE(5)
  6. Node.ENTITY_NODE(6)
  7. Node.PROCESSING_INSTRUCTION_NODE(7)
  8. Node.COMMENT_NODE(8)
  9. Node.DOCUMENT_NODE(9)
  10. Node.DOCUMENT_TYPE_NODE(10)
  11. Node.DOCUMENT_FRAGMENT_NODE(11)
  12. Node.NOTATION_NODE(12)

值得注意的是，并不是所有节点类型都受到 Web 浏览器的支持。 开发人员最常用的就是元素和文本节点。而且，上面列出的变量，在 IE 中并没有什么卵用。

  1. <div> </div>
  2. <script>
  3.   var a = document.querySelector('div');
  4.   console.log(a.nodeType === 1); // 兼容所有浏览器
  5.   console.log(a.nodeType === Node.ELEMENT_NODE); // 不兼容 IE
  6. </script>

操作节点

  1. // 访问子节点
  2. var firstNode = someNode.childNodes[0];
  3. var secondNode = someNode.childNodes.item(1);
  4. var count = someNode.childNodes.length; // 能动态变化, childNode并不是快照
  6. var firstNode = someNode.firstChild;
  7. var lastNode = someNode.lastChild;
  9. // 访问兄弟节点
  10. var nextNode = someNode.nextSibling;
  11. var preNode = someNode.previousSibling;
  13. // 判断有没有子节点
  14. var hasChild = someNode.hasChildNodes();
  15. var hasChild = someNode.childNodes.length > 0;
  17. // 访问节点的文档节点
  18. var documentNode = someNode.ownerDocument;
  20. /* 操作节点 */
  22. // appendChild
  23. var returnNode = someNode.appendChild(newNode);
  24. console.log(returnNode === newNode) // true
  25. console.log(someNode.lastChild === newNode) // true
  27. // 如果传入到 appendChild() 中的节点已经是文档的一部分了，那就将该节点从原来的位置移到新的位置
  28. var returnNode = someNode.appendChild(someNode.firstChild);
  29. console.log(returnNode === someNode.firstChild); // false
  30. console.log(returnNode === someNode.lastChild); // true
  32. // insertBefore(a, b) 将a插入b前 a和b互为Sibling
  33. // 插入后成为最后一个子节点
  34. var returnNode = someNode.insertBefore(newNode, null);
  35. console.log(newNode === someNode.lastChild); // true
  37. // 插入后成为第一个子节点
  38. var returnNode = someNode.insertBefore(newNode, someNode.firstChild);
  39. console.log(returnNode === someNode.firstChild); // true
  41. // removeChild 移除节点
  42. var formerFirstChild = someNode.removeChild(someNode.firstChild);
  44. // replaceChild 替换
  45. // 替换第一个子节点
  46. var returnNode = someNode.replaceChild(newNode, someNode.firstChild);

前面介绍的都是操作节点的子节点，也就是说，要使用这些方法必须先获得父节点。最后介绍的 cloneNode() 方法适合所有节点。

  1. <ul>
  2.   <li> apple </li>
  3.   <li> orange </li>
  4.   <li> pear </li>
  5. </ul>
  7. <script>
  8.   var myList = document.querySelector('ul');
  10.   // 深度复制
  11.   var deepList = myList.cloneNode(true);
  12.   console.log(deepList.childNodes.length); // 7
  14.   // 浅复制
  15.   var shallowList = myList.cloneNode(false);
  16.   console.log(shallowList.childNodes.length); // 0
  17. </script>

DOM 概况的更多相关文章

  1. DOM Document节点类型详解

    在前面 DOM 概况 中,我们知道了 DOM 总共有 12 个节点类型,今天我们就来讲下 DOM 中最重要的节点类型之一的 document 节点类型. 1.概况 Javascript 通过 Docu ...

  2. 【转】Virtual DOM

    前言 React 好像已经火了很久很久,以致于我们对于 Virtual DOM 这个词都已经很熟悉了,网上也有非常多的介绍 React.Virtual DOM 的文章.但是直到前不久我专门花时间去学习 ...

  3. virtual DOM的作用：将DOM的维护工作由系统维护转交给virtual DOM维护

    virtual DOM的作用:将DOM的维护工作由系统维护转交给virtual DOM维护 两个方面:对应用端 & 对DOM端(渲染准备的计算) 1.将DOM状态的维护工作由系统维护转交给vi ...

  4. DOM与CSS样式表

    在前文 <DOM与元素节点内联样式>中我们了解了用 DOM 提供的接口操作元素节点内联样式的方法,今天我们来学习一下如何用 DOM 操作 CSS 样式表. CSS 样式表概况 通过使用 H ...

  5. DOM Element节点类型详解

    上文中我们讲解了 DOM 中最重要的节点类型之一的 Document 节点类型,本文我们继续深入,谈谈另一个重要的节点类型 Element . 1.概况 Element 类型用于表现 HTML 或 X ...

  6. WEB 技术分类 Javascript DOM(Element Node) BOM

    Web technology for developers   Web 技术文档 备注:本文介绍web technology的分类,各自职责,因为之前一直就没有搞明白各种技术.各种名词究竟是属于哪个范 ...

  7. 全面理解虚拟DOM（1）

    最近一两年前端最火的技术莫过于 reactjs,angularJS,vuejs,即便你没用过也可能听过,像ReactJS由业界顶尖的互联网公司facebook提出,其本身有很多先进的设计思路,比如页面 ...

  8. Vue：（一）概况

    Vue:https://cn.vuejs.org/ (一)Vue概况 Vue本身并不是一个框架 Vue结合周边生态构成一个灵活的.渐进式框架 声明式渲染 组件系统 客户端路由 状态管理 构建工具 (二 ...

  9. 全面理解虚拟DOM，实现虚拟DOM

    1.为什么需要虚拟DOM DOM是很慢的,其元素非常庞大,页面的性能问题鲜有由JS引起的,大部分都是由DOM操作引起的.如果对前端工作进行抽象的话,主要就是维护状态和更新视图:而更新视图和维护状态都需 ...

随机推荐

  1. Bootstrap弹出框(modal)垂直居中

    最近在做一个eit项目,由于此项目里面一些框架要遵循nttdata的一些规则,故用到了Bootstrap这个东东,第一次碰到这个东东,有很大抵触,觉得不好,但用起来我觉得和别的弹出框真没什么两样.废话 ...

  2. CentOS 6.2编译安装Nginx1.2.0+MySQL5.5.25+PHP5.3.13

    CentOS 6.2编译安装Nginx1.2.0+MySQL5.5.25+PHP5.3.132013-10-24 15:31:12标签:服务器 防火墙 file 配置文件 written 一.配置好I ...

  3. centos 安装maven

    1.环境: 操作系统:centos7 maven:apache-maven-3.3.9-bin.tar.gz 2.安装JDK(1.7) 3.安装maven mkdir -p /opt/usr/loca ...

  4. MongoDB Sharding、库、collection设计学习汇总

    sharding设计须考虑的几个因素 Sharding Key的选择           在片键的选择上,最好是能够在字段中选择混合型的片键,大范围的递增健.和随机分布的健组合,如按月份递增.按用户名 ...

  5. spring定时器（一）

    使用的是spring的quartz功能,需导入com.springsource.org.quartz.jar包. 此定时器无法重置定时时间,需要的话可查看:spring定时器(二) spring的be ...

  6. 用php生成静态html页面(通用2种方法)

    因为每次用户点击动态链接的时候都会对服务器发送数据查询的要求 对于一个访问量可能达百万千万级别的网站来说 这无疑是服务器一个大大的负担 所以把动态数据转换成静态html页面就成了节省人力物力的首选 因 ...

  7. jQuery中大于gt和小于lt

    gt,lt计数都是下标从0开始,而且不论大小于,都不包括它自己本身. <!DOCTYPE html> <html> <head> <meta charset= ...

  8. Linux 下从头再走 GTK+-3.0 (二)

    仅仅创建一个空白窗口是不够的,下面我们为创建的窗口添加一个按钮. 以 Hello,World!为例. 首先创建一个源文件:example2.c 内容如下. #include <gtk/gtk.h ...

  9. Linux压缩指令

    1.windows系统和Linux系统的压缩文件只有zip格式的是通用的 2.windows系统可以解压几乎所有的Linux压缩格式 3.Linux压缩指令 gzip 指令 格式: gzip 压缩的文 ...

  10. 2016"百度之星" - 初赛（Astar Round2B）

    Problem Description 中位数定义为所有值从小到大排序后排在正中间的那个数,如果值有偶数个,通常取最中间的两个数值的平均数作为中位数. 现在有n个数,每个数都是独一无二的,求出每个数在 ...