学习HTML DOM笔记

简介: 学习HTML DOM笔记

节点父、子和同胞

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

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

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

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

image.png

请看下面的 HTML 片段:

<html>  <head>    <metacharset="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> 元素的最后一个子节点


目录
相关文章
|
2月前
|
前端开发 JavaScript C++
震惊!!!html竟然被...... 一篇博客让你从0开始熟悉并掌握html 超详细html笔记 全网独一份
本文是一份超详细的HTML学习笔记,从基础认知开始,介绍了网页的构成、五大浏览器、web标准、HTML/CSS/JavaScript的区别,然后详细讲解了HTML的概念、骨架结构、常用快捷键、注释、标签结构和关系。接着,通过大量实例深入探讨了HTML的各种标签,包括排版标签、文本格式化标签、媒体标签、链接标签、列表标签、表格标签、表单标签、语义化标签和字符实体,旨在帮助读者从0开始熟悉并掌握HTML。
36 2
震惊!!!html竟然被...... 一篇博客让你从0开始熟悉并掌握html 超详细html笔记 全网独一份
|
3月前
|
JavaScript 前端开发 容器
用HTML DOM实现有条件地渲染网页元素(上)
用HTML DOM实现有条件地渲染网页元素(上)
|
3月前
|
存储 JavaScript 前端开发
用HTML DOM实现有条件地渲染网页元素(下)
用HTML DOM实现有条件地渲染网页元素(下)
|
2月前
|
JavaScript
HTML DOM 节点树
HTML DOM 节点是指在 HTML 文档对象模型中,文档中的所有内容都被视为节点。整个文档是一个文档节点,每个 HTML 元素是元素节点,元素内的文本是文本节点,属性是属性节点,注释是注释节点。DOM 将文档表示为节点树,节点之间有父子和同胞关系。
|
2月前
|
JavaScript
HTML DOM 节点
HTML DOM(文档对象模型)将HTML文档视为节点树,其中每个部分都是节点:文档本身是文档节点,HTML元素是元素节点,元素内的文本是文本节点,属性是属性节点,注释是注释节点。节点间存在父子及同胞关系,形成层次结构。
|
2月前
|
人工智能
|
3月前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 节点列表
JavaScript HTML DOM 节点列表
21 5
|
3月前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 集合(Collection)
JavaScript HTML DOM 集合(Collection)
36 4
|
3月前
|
JavaScript 前端开发
JavaScript HTML DOM 元素 (节点)
JavaScript HTML DOM 元素 (节点)
28 2
|
3月前
|
JavaScript 前端开发
JavaScript HTML DOM EventListener
JavaScript HTML DOM EventListener
20 2