HTML DOM 节点

最新推荐文章于 2023-09-21 16:36:56 发布
最新推荐文章于 2023-09-21 16:36:56 发布
阅读量1.2k 收藏 2
点赞数 1
分类专栏： HTML DOM 文章标签： HTML DOM 节点
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lengyuezuixue/article/details/80272029
版权

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

DOM 节点

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

  ·整个文档是一个文档节点

  ·每个 HTML 元素是元素节点

  ·HTML 元素内的文本是文本节点

  ·每个 HTML 属性是属性节点

  ·注释是注释节点

HTML DOM 节点树

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

 

节点父、子和同胞

 

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

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

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

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

Node tree

 

 

 

请看下面的 HTML 片段：

<html>  

    <head>  

        <meta charset="utf-8">  

        <title>DOM 教程</title>  

    </head>  

    <body>  

        <h1>DOM 课程1</h1>  

     <p>Hello world!</p>     </body>

</html>

从上面的 HTML 中：

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

并且：

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

并且：

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

 

 

 

警告！

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

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

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

  您将在稍后的章节中学习更多有关 innerHTML 属性的知识。

 

参考：

https://www.yuque.com/docs/share/06e96acd-058a-431d-a7bb-cd358ec908b4

冷月醉雪
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML parser in Delphi:Delphi类，具有读取和解析HTML文件的功能-开源
04-25
THTMLdom是（Delphi）类，具有读取HTML源文件并将其分解为THTMLelement树的功能。 HTML标签的属性存储在元素中。 提供了用于根据属性值或标签名称选择元素的功能。 可以显示树的结构，并且可以将其呈现为纯文本。 来源是普通的Delphi pascal，需要支持Tdictionary的版本。 不依赖第三方单位。 要解析的文件必须具有有效HTML4 / 5标签。 从结束标记可能放置错误或完全不存在的意义上讲，HTML不一定是“正确的”。 处理（读取+解析）的速度非常强大：每MB 15-40毫秒或每1000个HTML标签1毫秒左右。
JavaScript学习二——DOM基础
qq_57985179的博客
10-03 586
一、什么是DOM DOM（全称 Document Object Model），即文档对象模型。通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。包括以下能力：改变页面中的所有 HTML 元素、改变页面中的所有 HTML 属性、改变页面中的所有 CSS 样式、对页面中的所有事件做出反应。 （1）查找 HTML 元素 通过 JavaScript，我们可以操作 HTML 元素。 1、通过 id 找到 HTML 元素 在 DOM 中查找 HTML 元素的最简....
html文档中怎么区分节点对象节点类型,javascript DOM中的节点层次和节点类型概述...
weixin_35651329的博客
06-03 469
针对JS高级程序设计这本书，主要是理解概念，大部分内容源自书内。写这个主要是当个书中的笔记加总结存在的问题请大家多多指正！DOM文档对象模型，针对HTML和XML文档的一个API。描绘了一个层次化的结点树，循序开发人员添加，移除修改页面上的一部分。1节点层次DOM把文档描绘成一个由多层节点构成的结构。节点有不同的类型。节点之间的关系构成了层次。文档节点是每个文档的根节点(Document节点)，h...
浏览器 html 看层级,浏览器视图层级中的“根”：<html>和<body>的属性研究
weixin_28681379的博客
06-07 276
做前端开发的同学都会知道，每一个UI系统(比如IOS或Android)中都会有一个view hierarchy(视图层级)的概念，即所有的可视元素(大到一个页面，小到一个button)都在一个树形结构中，而树形结构的”根节点“为window，即整个屏幕或窗口。浏览器中的view hierarchy可以认为是整个dom结构，但是“根节点”非常混乱，我们通常搞不清楚“根节点”是、、还是window，还...
节点（属性、层级、操作）
m0_46420078的博客
11-22 3766
一、节点：网页中的所有内容都是节点 1.节点的属性 （1）节点类型：nodeType 元素节点 ---1 属性节点 ---2 文本节点 ---3 （文字、空格、换行） （2）节点名称：nodeName （3）节点值：nodeValue 2.节点层级 （1）根节点：<html>就是根节点，有且只有一个 （2）父节点：一个节点的上级节点 （3)子节点：一个节点的下级节点 （4）兄弟节点：具有相同父节点的节点 3...
数据解析之Xpath解析（超详细定位）
最新发布
ChatYU的博客
09-21 5858
XPath（XML Path Language）是一种XML的查询语言，他能在XML树状结构中寻找节点。XPath 用于在 XML 文档中通过元素和属性进行导航xml是一种标记语法的文本格式，xpath可以方便的定位xml中的元素和其中的属性值。lxml是python中的一个第三方模块，它包含了将html文本转成xml对象，和对对象执行xpath的功能表达式说明举例从根节点开始选取//从任意节点开始选取//input选取当前节点..选取当前节点的父节点//input/..
HTML DOM节点
起点·
10-16 270
原文链接： 在HTML DOM中,所有的事物都是节点。DOM被视为节点树的HTML。 DOM节点 根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点： 整个文档是一个文档节点 每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点 每个 HTML 属性是属性节点 注释是注释节点 HTML DOM 节点树 HTML DOM 将 HTML 文档视作树结构。这种结...
Javascript节点关系、节点属性、访问节点
qq_30906791的博客
10-23 720
DOM节点 According to the W3C HTML DOM standard, everything in an HTML document is a node: The entire document is a document node Every HTML element is an element node The text inside HTML elements are text nodes Every HTML attribute is an attribute node (dep
DOM（文档对象模型）
m0_65025332的博客
06-22 508
目录简单介绍HTML DOM 节点节点树节点间的层级关系HTML DOM 对象、属性、方法JavaScript与HTML DOMJavaScript 代码访问页面上的元素改变 HTML 元素/属性值添加/删除 HTML 元素查找 HTML 元素改变元素的属性值 改变CSS样式JavaScript HTML DOM 事件addEventListener()实例在 HTML DOM 节点树中导航实例节点列表使用节点属性在节点之间导航 遍历 DOM 树 添加/删除 HTML 元素 获取节点的"值"节点的 node
html网页基本组成结构（DOM节点、元素、属性和文本）
Javaesandyou的博客
02-22 2986
先来看html网页的代码和浏览器展现的结果（下图1和图2）： 图1 图2 然后对照着下图的DOM树，分析DOM的节点层次和定义： 除了html中的<!DOCTYPE>和<meta>声明外， 1.第一级是html文件中的根元素：<html></html>标签 2.第二级是根元素html下面的子元素：<head></head>和<body></body>标签 3.第三级是<head>
用于节点操作的API，颠覆原生操作HTML DOM节点的API
09-05
敏捷开发是一种以人为核心、迭代、循序渐进的开发方法。在敏捷开发中，软件项目的构建被切分成多个子项目，各个子项目的成果都经过测试，具备集成和可运行的特征。
JavaScript操作HTML DOM节点的基础教程
10-22
主要介绍了JavaScript操作HTML DOM节点的基础入门教程,包括对节点的创建修改删除等操作,还特别提到了其中appendChild()与insertBefore()插入节点时需注意的问题,需要的朋友可以参考下
html dom节点操作(获取/修改/添加或删除)
12-08
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点： 整个文档是一个文档节点 每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点 每个 HTML 属性是属性节点 注释是注释节点 HTML DOM 将 HTML 文档视...
HTML DOM节点API
07-05
这是js的HTML DOM节点API，自己整理的，希望对大家有所帮助！
HTML DOM 导航
冷月醉雪的博客
05-16 1596
HTML DOM 节点列表    getElementsByTagName()方法返回节点列表。节点列表是一个节点数组。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;/head&gt; &lt;body&gt; &lt;p&gt;Hello World!
HTML DOM 修改 HTML 内容
冷月醉雪的博客
05-15 509
改变HTML 内容    改变元素内容的最简单的方法是使用 innerHTML 属性。    下面的例子更改 &lt;p&gt;元素的HTML 内容： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;/head&gt; &lt;body&gt; &
HTML DOM 参考手册
冷月醉雪的博客
05-16 391
HTML DOM 参考手册 参考手册描述了 HTML DOM 的属性和方法，并提供在线实例。 HTML Document HTML Element HTML Attributes HTML Events HTML DOM 元素对象参考手册 参考手册描述了每个对象的属性和方法，并提供了在线实例。 Anchor 对象 Area 对象 Base 对象 Body 对象 Button ...
Document 对象
冷月醉雪的博客
05-16 274
使用document.write()输出文本 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;自学教程(如约智惠.com)&lt;/title&gt; &lt;/head&gt; &lt;body
html获取dom id节点
09-01
要通过JavaScript获取DOM元素的ID节点，可以使用`document.getElementById()`方法。该方法接受一个参数，即要获取的元素的ID名称，并返回对应的DOM节点元素。 以下是一个示例： ```html <!DOCTYPE html> <html> <head> <title>获取DOM节点</title> </head> <body> <h1 id="myHeading">Hello, World!</h1> <script> // 获取ID为myHeading的节点 var heading = document.getElementById("myHeading"); console.log(heading); // 输出：<h1 id="myHeading">Hello, World!</h1> </script> </body> </html> ``` 在上面的示例中，通过`document.getElementById("myHeading")`获取了ID为"myHeading"的节点，并将其赋值给变量`heading`。然后，通过`console.log()`将该节点输出到控制台。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值