在 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. 谷歌的 I/O 2019，究竟推出了什么新特性？

    前言 昨天,也即赶在微软 Build 2019 的第二天,一年一度的2019年 Google I/O大会在美国如期举行,Google I/O 2019全纪录:AI惊艳,Android Q真香,包括两款 ...

  2. SpringBoot 2.x （2）：请求和传参

    其实请求和传参这些知识属于SpringMVC 不过这也属于必须掌握的知识,巩固基础吧 GET请求: 以第一篇文章自动的方式创建SpringBoot项目: 然后新建Controller: package ...

  3. vue--组件中的自定义事件

    父组件通过props向子组件传递数据,子组件通过自定义事件向父组件传递信息. 在子组件中通过$emit触发事件,父组件在直接使用子组件的地方使用v-on(即@)来监听子组件触发的事件. 举例:(不知道 ...

  4. LoadRunner10自带的WEBTOURS，无法显示Flights页面问题解决办法

    [问题描述] 安装LoadRunner10之后,尝试打开自带的webTours页面学习.第一次可以打开,之后安装了一RFT.Oracle等软件,就出现页面无法显示问题.一直以为是Java的问题,尝试各 ...

  5. InChatter系统之服务器开发（二）

    现在我们继续进行InChatter系统的服务器端的开发,今天我们将实现服务契约同时完成宿主程序的开发,今天结束之后服务器端将可以正常运行起来. 系统的开发是随着博客一起的,颇有点现场直播的感觉,所有在 ...

  6. asterisk-java ami 入门篇，连接与关闭服务器

    我选择的是通过AsteriskServer 来生成连接,因为后面要通过AsteriskServer来进行监听通话属性的改变. demo: AsteriskServer asteriskServer=n ...

  7. win7电脑桌面壁纸曝光过高影响图标怎么办？亲测实用解决方法

    现在用win7系统的人应该还是挺多的吧,虽然说windows家族已经升级到现在的win11了,相信大多数人家用的电脑系统还是win7吧,今天要讲的是一个壁纸曝光度过高的解决办法,虽然还不清楚为什么,但 ...

  8. Android（java）学习笔记189：ContentProvider使用（银行数据库创建和增删改查的案例）

    1. Android的四大组件: (1)Activity  用户交互的UI界面 (2)Service  后台运行的服务 (3)BroadcastReceiver 广播接收者 (4)ContentPro ...

  9. win10下anaconda3环境配置

    WINDOW系统设置环境变量:我的电脑右键-属性-高级系统设置-高级-环境变量中在path中加入你系统安装anaconda的目录下的scripts中: C:\Users\***\anaconda3\S ...

  10. _bbox_pred函数

    fast中的_bbox_pred函数和faster中的bbox_transform_inv是一样的,是将框进行4个坐标变换得到新的框坐标.fast中是将selective search生成的框坐标进行 ...