专栏首页高爽的专栏HTML DOM(一):认识DOM

HTML DOM(一):认识DOM

什么是DOM?        通过 JavaScript,您可以重构整个HTML文档。您可以添加、移除、改变或重排页面上的项目。要改变页面的某个东西,JavaScript就需要对HTML文档中所有元素进行访问的入口。这个入口,连同对HTML 元素进行添加、移动、改变或移除的方法和属性,都是通过文档对象模型来获得的(DOM)。在 1998 年,W3C 发布了第一级的 DOM 规范。这个规范允许访问和操作 HTML 页面中的每一个单独的元素。所有的浏览器都执行了这个标准,因此,DOM 的兼容性问题也几乎难觅踪影了。DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。

DOM 被分为不同的部分(核心、XML及HTML)和级别(DOM Level 1/2/3):        Core DOM                定义了一套标准的针对任何结构化文档的对象         XML DOM                定义了一套标准的针对 XML 文档的对象         HTML DOM                定义了一套标准的针对 HTML 文档的对象。 

节点        根据 DOM,HTML 文档中的每个成分都是一个节点。        DOM 是这样规定的:

  • 整个文档是一个文档节点 
  • 每个 HTML 标签是一个元素节点 
  • 包含在 HTML 元素中的文本是文本节点 
  • 每一个 HTML 属性是一个属性节点 
  • 注释属于注释节点 

Node 层次

       节点彼此都有等级关系。HTML 文档中的所有节点组成了一个文档树(或节点树)。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点,并由此继续伸出枝条,直到处于这棵树最低级别的所有文本节点为止。

       下面这个图片表示一个文档树(节点树):

文档树(节点数)        请看下面这个HTML文档:       

<html>
  <head>
    <title>DOM Tutorial</title> 
  </head> 
  <body> 
    <h1>DOM Lesson one</h1> 
    <p>Hello world!</p> 
  </body> 
</html>

       上面所有的节点彼此间都存在关系。除文档节点之外的每个节点都有父节点。举例,<head> 和 <body> 的父节点是 <html> 节点,文本节点 "Hello world!" 的父节点是 <p> 节点。大部分元素节点都有子节点。比方说,<head> 节点有一个子节点:<title> 节点。<title> 节点也有一个子节点:文本节点 "DOM Tutorial"。当节点分享同一个父节点时,它们就是同辈(同级节点)。比方说,<h1> 和 <p>是同辈,因为它们的父节点均是 <body> 节点。节点也可以拥有后代,后代指某个节点的所有子节点,或者这些子节点的子节点,以此类推。比方说,所有的文本节点都是 <html>节点的后代,而第一个文本节点是 <head> 节点的后代。节点也可以拥有先辈。先辈是某个节点的父节点,或者父节点的父节点,以此类推。比方说,所有的文本节点都可把 <html> 节点作为先辈节点。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • HTML DOM(二):节点的增删改查

           上一篇:HTML DOM(一)        上一篇讲述了DOM的基本知识,从其得知,在DOM眼中,HTML的每个成分都可以看作是节点(文档节点、...

    高爽
  • Java线程(七):Callable和Future

           接着上一篇继续并发包的学习,本篇说明的是Callable和Future,它俩很有意思的,一个产生结果,一个拿到结果。        Calla...

    高爽
  • 关于List比较好玩的操作

           作为Java大家庭中的集合类框架,List应该是平时开发中最常用的,可能有这种需求,当集合中的某些元素符合一定条件时,想要删除这个元素。如: pu...

    高爽
  • [C语言] 数据结构-离散存储链表定义

    陶士涵
  • Zookeeper基本功能和应用场景

    Zookeeper是一个开源的分布式的,为分布式应用提供协调服务的Apache项目。是大数据Hadoop生态体系中用的非常广泛的基础组件

    用户1212940
  • MySQL高可用方案选型参考

    在这些可选项中,最常见的就是基于主从复制的方案,其次是基于Galera的方案,我们重点说说这两种方案。其余几种方案在生产上用的并不多,我们只简单说下。

    用户1516716
  • 架构设计之「 CAP 定理 」

    在计算机领域,如果是初入行就算了,如果是多年的老码农还不懂 CAP 定理,那就真的说不过去了。CAP可是每一名技术架构师都必须掌握的基础原则啊。

    黄泽杰
  • 架构设计之「 CAP 定理 」

    在计算机领域,如果是初入行就算了,如果是多年的老码农还不懂 CAP 定理,那就真的说不过去了。CAP可是每一名技术架构师都必须掌握的基础原则啊。

    奎哥
  • javascript核心之DOM操作

    DOM全称为Document Object Model ,即文档对象模型,是针对HTML和XML的一个API, 描绘了一个层次化的节点树,可以添加、移除和修改页...

    用户4831957
  • 一万字详解 Redis Cluster Gossip 协议

    今天来讲一下 Reids Cluster 的 Gossip 协议和集群操作,文章的思维导图如下所示。

    aoho求索

扫码关注云+社区

领取腾讯云代金券