HTML DOM 简介

HTML DOM 定义了访问和操作 HTML 文档的标准。

您应该具备的基础知识

在您继续学习之前,您需要对以下内容拥有基本的了解:

  • HTML
  • CSS
  • JavaScript

什么是 DOM?

DOM 是 W3C(万维网联盟)的标准。

DOM 定义了访问 HTML 和 XML 文档的标准:

“W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

W3C DOM 标准被分为 3 个不同的部分:

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

编者注:DOM 是 Document Object Model(文档对象模型)的缩写。

什么是 HTML DOM?

HTML DOM 是:

  • HTML 的标准对象模型
  • HTML 的标准编程接口
  • W3C 标准

HTML DOM 定义了所有 HTML 元素的对象和属性,以及访问它们的方法。

换言之,HTML 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 简介的更多相关文章

  1. HTML DOM简介

    HTML DOM简介 1.当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model),HTML DOM模型被创建为对象的树.如下所示: 2.通过可编程的对象模型,Ja ...

  2. BOM DOM 简介

    BOM和DOM简介 BOM,Browser Object Model ,浏览器对象模型. BOM主要提供了访问和操作浏览器各组件的方式. 浏览器组件:   window(浏览器窗口)   locati ...

  3. Javascript学习笔记2.1 Javascript与DOM简介

    DOM(文档对象模型)简介 DOM(文档对象模型)针对HTML和XML文档的一个API. DOM可以将任何HTML或XML文档描绘成由多层节点构成的树形结构,它是中立于平台和语言的接口,允许程序和脚本 ...

  4. DOM简介

    什么是DOM? DOM 是 Document Object Model(文档对象模型)的缩写. W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容. ...

  5. javascript总结18:javascript DOM简介

    1 HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应.在事件发生时,执行JavaScript 方法,做出交互. 2 格式: onclick=JavaScript脚本 3 H ...

  6. DOM简介及节点、属性、查找节点的方法

    DOM(Document Object Modle) 操作文档的编程接口DOM定义了表示和修改文档的方法,不能修改css样式表,在js中使用DOM方法改变元素的css样式,实质上是在元素上添加行间样式 ...

  7. 26 JavaScript HTML DOM简介&方法&文档

    HTML DOM: Document  Object  Model 文档对象模型.是HTML的标准对象模型和编程接口.(JavaScript只是可以操作HTML DOM的语言之一) 定义了HTML元素 ...

  8. JS DOM简介

    1. 概述 文档对象模型(Document Object Model,简称 DOM),是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口.W3C 已经定义了一系列的 DOM 接口 ...

  9. DOM文档对象模型简介

    DOM简介     DOM是W3C(万维网联盟)的标准 "W3C文档对象模型DOM是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容.结构.样式".W3C DOM ...

随机推荐

  1. webService基础知识--认识WebService

    之前在找工作的时候,有面试官问到WebService,当时没有接触过,正好现在做的项目中有用到WebService,所以就趁着业余时间来学习了. 一.简介 先来看看百度百科对WebService的解释 ...

  2. 天方夜谈·数据结构·List

    在战场上杀不死的敌人,永远也别想打败他,他就像幽灵横亘在你失败的田地上. 大一下学期,接触到Java程序设计语言,时至今日,才越发觉得知识与技术的海洋是多么多么的浩瀚.......如果说编程语言的一个 ...

  3. Bootstrap之折叠(Collapse)插件

    学习资料:Bootstrap折叠(Collapse)插件 大家可能常见的都是类似: 这种的效果,小颖今天要给大家分享一个不一样的效果嘻嘻.铛铛铛铛........................... ...

  4. linux下归档、解压缩工具:tar命令

    tar是一个类似于windows下的解压缩工具,可以将一大堆文件或目录打包成一个文件,还可以通过特定选项使用压缩工具进行解压缩. 语法: tar (选项) (参数) 常用选项: -c:创建打包文件. ...

  5. UI基础控件—UIView

    1. 什么是UIView?     UIView :代表屏幕上的一个矩形区域,管理界面上的内容; 2. 创建UIview a.开辟空间并初始化视图(初始化时,给出视图位置和大小) b.对视图做一些设置 ...

  6. Asp.Net Core 中获取应用程序物理路径(Getting the Web Root Path and the Content Root Path in ASP.NET Core)

    如果要得到传统的ASP.Net应用程序中的相对路径或虚拟路径对应的服务器物理路径,只需要使用使用Server.MapPath()方法来取得Asp.Net根目录的物理路径,如下所示: // Classi ...

  7. java的List分页 取出数据后使用List分页

    以前一直是在DAO层直接从数据库里分页,但是今天因为有些数据,需要混合展示,就是根据条件取出了多个对象的集合,然后把这些多个List放到一个List里,然后在从这个List里进行分页. MemberA ...

  8. 【JAVAWEB学习笔记】23_Listener和邮箱服务器

    监听器Listener 学习目标 案例-使用监听器完成定时生日祝福 一.监听器Listener javaEE包括13门规范 在课程中主要学习 servlet技术 和 jsp技术 其中 servlet规 ...

  9. 给sftp创建新用户、默认打开和限制在某个目录

    一.环境: CentOS 6.8 使用 FileZilla 进行 sftp 连接 二.背景 给外包的工作人员提供我司服务器的某一目录的访问(包括读写)权限,方便他们部署代码文件. 之所以是某一目录的访 ...

  10. Principal Components Regression, Pt.1: The Standard Method

    In this note, we discuss principal components regression and some of the issues with it: The need fo ...