`

html DOM 的节点结构

阅读更多



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

通过 DOM,您可访问 HTML 文档中的每个节点。
你可通过若干种方法来查找您希望操作的元素:

    * 通过使用 getElementById() 和 getElementsByTagName() 方法
    * 通过使用一个元素节点的 parentNode、firstChild 以及 lastChild 属性
下面这个例子会返回所有 <p> 元素的一个节点列表,且这些 <p> 元素必须是 id 为 "maindiv" 的元素的后代:

document.getElementById('maindiv').getElementsByTagName("p"); 

根节点

有两种特殊的文档属性可用来访问根节点:

    * document.documentElement
    * document.body

第一个属性可返回存在于 XML 以及 HTML 文档中的文档根节点。

第二个属性是对 HTML 页面的特殊扩展,提供了对 <body> 标签的直接访问
  • 大小: 3.5 KB
分享到:
评论

相关推荐

    domtoimage使用HTML5canvas从DOM节点生成图像

    描述中的"dom-to-image:使用HTML5 canvas从DOM节点生成图像"进一步确认了domtoimage是一个库或服务,它借助HTML5的Canvas元素来捕获DOM结构并将其转化为图像。Canvas是HTML5提供的一种绘制图形的接口,能够动态地...

    第06章 DOM节点操作(上)

    在本章“第06章 DOM节点操作(上)”中,我们将深入探讨Document Object Model(DOM)在JavaScript中的应用,以及如何通过DOM接口来操纵HTML或XML文档的结构、内容和样式。DOM是一种标准,它允许编程语言与网页内容...

    JavaScript获取HTML DOM节点元素的方法的总结

    以下是对“JavaScript获取HTML DOM节点元素的方法的总结”的详细阐述,旨在帮助开发者更好地理解和应用DOM操作。 ### 一、通过`document`对象获取DOM节点 #### 1. `document.getElementById(elementId)` 这个方法...

    js获取HTML DOM节点详解

    ### JavaScript 获取 HTML DOM 节点详解 在 Web 应用程序尤其是 Web 2.0 程序的开发过程中,频繁地需要获取页面中的某个元素,并对其样式、内容等进行更新。如何有效地获取需要更新的元素是实现这些功能的前提。...

    使用Jsoup库解析HTML、XML或URL链接中的DOM节点

    **Jsoup库解析HTML、XML或URL链接中的DOM节点** Jsoup是一款强大的Java库,它设计用于处理实际世界中的HTML,使得开发者可以方便地提取和操作数据。在Web开发中,有时我们需要从网页中获取特定信息,比如文章内容、...

    第06章 DOM节点操作(下)

    DOM节点操作是前端开发中的核心技能,对创建交互式网页至关重要。 一、节点类型 DOM中的每个元素都是一个节点,包括元素节点、属性节点、文本节点等。元素节点(如`&lt;div&gt;`、`&lt;p&gt;`)是文档结构的主要构成部分,属性...

    DOM和BOM的使用

    HTM DOM 是指 HTML 文档对象模型,它将 HTML 文档抽象为一个树形结构,每个节点都是一个对象,节点之间通过父子关系连接。HTM DOM 提供了许多方法和属性,开发者可以通过这些方法和属性来操作文档的内容和结构。 ...

    html DOM 节点的各种高度属性

    在HTML文档对象模型(DOM)中,节点是页面结构的基本构建块,它们具有各种属性,包括与高度相关的属性。理解这些属性对于精确控制网页布局至关重要。本文将详细探讨`html DOM`节点中的高度属性,帮助开发者避免理解...

    [js高手之路]HTML标签解释成DOM节点的实现方法

    这要求作者需要能够将HTML标签字符串解析为对应的DOM节点结构,以便进行DOM操作。 文章中提到的关键知识点包括以下几个方面: 1. HTML标签结构:HTML标签由开始标签、结束标签、属性以及标签内容组成。例如一个...

    JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例

    知识点1:DOM节点的分类 在DOM中,节点可以是不同类型的实体,例如元素节点、文本节点或属性节点。元素节点表示HTML文档中的标签,文本节点包含标签之间的文本,而属性节点则表示标签内的属性。 知识点2:创建DOM...

    DOM 节点操作 【微重点】【案例】.pdf

    DOM节点操作的重要性在于,它可以帮助开发者创建动态的用户界面,响应用户的交互行为,例如通过鼠标悬停(mouseover)和鼠标离开(mouseout)事件来控制导航栏下拉菜单的显示和隐藏。通过使用DOM节点操作,开发者...

    jQuery DOM节点操作源码

    在"jQuery DOM节点操作源码"中,我们可以深入理解jQuery是如何优雅地处理DOM(Document Object Model)节点的。以下是关于jQuery DOM操作的一些关键知识点: 1. **选择器**:jQuery 的核心功能之一就是强大的选择器...

    HTML DOM简介.rar

    3. 访问DOM节点1——getElementById() 4. 访问DOM节点2——getElementsByTagName() 5. 访问DOM节点3——通过节点关系 6. DOM节点信息 7. DOM信息nodeType的应用 8. 修改DOM——innerHTML 9. 删除DOM节点——...

    谷歌获取网页dom的插件

    DOM(Document Object Model)是HTML和XML文档的结构化表示,它将网页内容作为树形结构处理,使得我们可以方便地通过JavaScript等编程语言与网页交互。这个插件的核心功能就是帮助用户分析DOM,进而提取所需的数据。...

    c++ html dom 树

    首先,C++ HTML DOM树是通过解析HTML源代码来创建的一个数据结构,它以树的形式表示了HTML文档的各个元素。每个节点代表HTML中的一个元素,如`&lt;html&gt;`, `&lt;head&gt;`, `&lt;body&gt;`等,甚至包括文本节点和注释。这种树形结构...

    jacascript DOM节点——元素节点、属性节点、文本节点

    DOM节点是这个树形结构的基本单位,主要包括元素节点、属性节点和文本节点。 **元素节点** 是DOM中最核心的部分,它们对应HTML中的标签元素。例如,`&lt;div&gt;`、`&lt;p&gt;`、`&lt;img&gt;`等都是元素节点。元素节点提供了访问标签...

    用于节点操作的API,颠覆原生操作HTML DOM节点的API

    【标题】: "用于节点操作的API,颠覆原生操作HTML DOM节点的API" 【描述】: 敏捷开发是一种高效且灵活的软件开发方法,强调团队协作、迭代开发和快速响应变化。在敏捷开发中,软件项目被分解成多个小的、可测试的子...

    利用vue.js插入dom节点的方法

    然而,有时我们确实需要在特定场景下插入DOM节点。本篇文章将详细讲解如何在Vue.js中插入DOM节点,并探讨其与jQuery操作DOM的不同之处。 首先,Vue.js 提供了 `$mount` 方法用于创建组件实例并挂载到DOM中。例如,...

    DOM对象中的节点操作.pdf

    在当前互联网开发领域,DOM(文档对象模型)是前端开发人员在处理HTML文档时不可或缺的重要概念和工具。...通过深入学习和实践DOM节点操作,开发者可以有效地控制Web文档,实现更加丰富和动态的Web应用。

    JS构建页面的DOM节点结构的实现代码

    在构建DOM节点结构时,首先需要遍历HTML结构,将元素转换成便于处理的数据结构。在提供的代码中,采用了一个名为`walkDom`的函数,它递归地遍历DOM树,返回一个对象,该对象的键是元素的标签名,值是一个包含子元素...

Global site tag (gtag.js) - Google Analytics