在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。

DOM 节点

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

  • 整个文档是一个文档节点
  • 每个 HTML 元素是元素节点
  • HTML 元素内的文本是文本节点
  • 每个 HTML 属性是属性节点
  • 注释是注释节点

HTML DOM 节点树

HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：

HTML DOM Tree 实例

通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。

节点父、子和同胞

节点树中的节点彼此拥有层级关系。

父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

  • 在节点树中，顶端节点被称为根（root）
  • 每个节点都有父节点、除了根（它没有父节点）
  • 一个节点可拥有任意数量的子
  • 同胞是拥有相同父节点的节点

下面的图片展示了节点树的一部分，以及节点之间的关系：

请看下面的 HTML 片段：

<html>

  <head>

    <title>DOM 教程</title>

  </head>

  <body>

    <h1>DOM 第一课</h1>

    <p>Hello world!</p>

  </body>

</html>

从上面的 HTML 中：

  • <html> 节点没有父节点；它是根节点
  • <head> 和 <body> 的父节点是 <html> 节点
  • 文本节点 "Hello world!" 的父节点是 <p> 节点

并且：

  • <html> 节点拥有两个子节点：<head> 和 <body>
  • <head> 节点拥有一个子节点：<title> 节点
  • <title> 节点也拥有一个子节点：文本节点 "DOM 教程"
  • <h1> 和 <p> 节点是同胞节点，同时也是 <body> 的子节点

并且：

  • <head> 元素是 <html> 元素的首个子节点
  • <body> 元素是 <html> 元素的最后一个子节点
  • <h1> 元素是 <body> 元素的首个子节点
  • <p> 元素是 <body> 元素的最后一个子节点

DOM 处理中的常见错误是希望元素节点包含文本。

在本例中：<title>DOM 教程</title>，元素节点 <title>，包含值为 "DOM 教程" 的文本节点。

可通过节点的 innerHTML 属性来访问文本节点的值。

DOM节点是啥玩意？的更多相关文章

  1. angular.js 动态插入删除dom节点

    angular.js 是新一代web开发框架,它轻松在web前端实现了MVC模式,相比 jquery 模式,这种新玩意竟然不需要开发者直接去操作dom . 作为前端开发而不去操作dom ,这简直是一个 ...

  2. 深入理解DOM节点操作

    × 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...

  3. 深入理解DOM节点关系

    × 目录 [1]父级属性 [2]子级属性 [3]同级属性[4]包含方法[5]关系方法 前面的话 DOM可以将任何HTML描绘成一个由多层节点构成的结构.节点分为12种不同类型,每种类型分别表示文档中不 ...

  4. 深入理解DOM节点类型第五篇——元素节点Element

    × 目录 [1]特征 [2]子节点 [3]特性操作[4]attributes 前面的话 元素节点Element非常常用,是DOM文档树的主要节点:元素节点是html标签元素的DOM化结果.元素节点主要 ...

  5. 深入理解DOM节点类型第六篇——特性节点Attribute

    × 目录 [1]特征 [2]属性 [3]方法 前面的话 元素的特性在DOM中以Attr类型表示,从技术角度讲,特性是存在于元素的attributes属性中的节点.尽管特性是节点,但却不是DOM节点树的 ...

  6. 深入理解DOM节点类型第四篇——文档片段节点DocumentFragment

    × 目录 [1]特征 [2]作用 前面的话 在所有节点类型中,只有文档片段节点DocumentFragment在文档中没有对应的标记.DOM规定文档片段(document fragment)是一种“轻 ...

  7. 深入理解DOM节点类型第一篇——12种DOM节点类型概述

    × 目录 [1]元素 [2]特性 [3]文本[4]CDATA[5]实体引用[6]实体名称[7]处理指令[8]注释[9]文档[10]文档类型[11]文档片段[12]DTD 前面的话 DOM是javasc ...

  8. DOM 节点的克隆与删除

    无奈的开头 关于DOM节点操作,如果仅仅是根据标准API来操作,那是最简单不过的了.但是现实中却哪有这么容易的问题让我们解决,其实不仅仅是节点的克隆与删除,节点的添加也是如此,而且添加节点需要考虑的情 ...

  9. DOM节点属性

    节点属性 在文档对象模型 (DOM) 中,每个节点都是一个对象.DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType ...

随机推荐

  1. AJPFX关于abstract的总结

    抽象类: abstract抽象:不具体,看不明白.抽象类表象体现.在不断抽取过程中,将共性内容中的方法声明抽取,但是方法不一样,没有抽取,这时抽取到的方法,并不具体,需要被指定关键字abstract所 ...

  2. Java语法基础-final关键字

    final关键字主要用在三个地方:变量.方法.类. 对于一个final变量,如果是基本数据类型的变量,则其数值一旦在初始化之后便不能更改: 如果是引用类型的变量,则在对其初始化之后便不能再让其指向另一 ...

  3. 在SQLServer 2005附加SQLServer 2008数据库异常处理

    远程服务器软件系统不算新,数据库是SQL Server 2005.本地开发基本是用新的软件系统.数据库采用SQL Server 2008. 这样在用远程服务器SQL 2005选择附加SQL 2008的 ...

  4. windows上把git生成的ssh key

    右键鼠标,选中 “Git Bash here”: 输入指令,创建ssh key: cd ~/.ssh/ #bash: cd: /c/Users/Administrator/.ssh/: No such ...

  5. vb 案例学习

    ' ================================================================================================== ...

  6. chmod - 改变文件的访问权限

    总揽 chmod [options] mode file... POSIX 选项: [-R] GNU 选项 (最短方式): [-cfvR] [--reference=rfile] [--help] [ ...

  7. 【传智播客】Libevent学习笔记(一)：简介和安装

    目录 00. 目录 01. libevent简介 02. Libevent的好处 03. Libevent的安装和测试 04. Libevent成功案例 00. 目录 @ 01. libevent简介 ...

  8. 【C语言】控制台窗口图形界面编程（一）句柄和文本属性

    目录 00. 目录 01. 句柄 02. GetStdHandle函数 03. CloseHandle函数 04. SetConsoleTextAttribute函数 05. 十进制颜色对照表 06. ...

  9. hdfs深入：10、hdfs的javaAPI操作

    /** * 递归遍历hdfs中所有的文件路径 */ @Test public void getAllHdfsFilePath() throws URISyntaxException, IOExcept ...

  10. DataRow复制一行到另一个DataTable

    DataRow复制一行到另一个DataTable   下面两个方法是DataRow复制一行到另一个DataTable的,直接Add会出错“此行已属于另一个表”,其实以前就知道怎么做的,可每次要用到的时 ...