JavaScript 节点关系

2023-09-24 10 0

DOM 把文档视为一种树结构,这种树结构被称为节点树。JavaScript 脚本可通过这棵树访问所有节点,可以修改或删除它们的内容,也可以创建新的节点。

节点之间的关系包括:上下级别的父子关系,相邻级别的兄弟关系。简单描述如下:

  • 在节点树中,最顶端节点为根节点
  • 除了根节点之外,每个节点都有一个父节点
  • 节点可以包含任何数量的子节点
  • 叶子是没有子节点的节点
  • 同级节点是拥有相同父节点的节点

【示例】通过下面这个HTML文档结构分析其节点关系
在这里插入图片描述
在上面 HTML 结构中,首先是 DOCTYPE 文档类型声明,然后是 html 元素,网页里所有元素都包含在这个元素里。从文档结构看,html 元素既没有父辈,也没有兄弟。如果用树来表示的话,这个 html 元素就是树根,代表整个文档。由 html 元素派生出 head 和 body 两个子元素,它们属于同一级别,且互不包含,可以称之为兄弟关系。head 和 body 元素拥有共同的父元素 html,同时它们又是其他元素的父元素,但包含的子元素不同。head 元素包含 title 元素,title 元素又包含文本节点 “标准 DOM 示例”。body元素包含 3 个子元素:h1、p 和 ul,它们是兄弟关系。如果继续访问,ul 元素也是一个父元素,它包含 3 个 li 子元素。

代码编程
赞赏

相关文章

零基础学习游戏建模多久能出师?3D建模师告诉你如何有效的学会建模
学3D建模一定要有美术功底?有则锦上添花,没有也不影响你学习
3D建模难学吗?零基础学6个月,能否找到工作?
3D建模入行难不难?零基础学习次世代,这6条建议能帮到你
游戏建模师薪资能给到多少?建模初学者如何快速入行,获取涨薪机会?
游戏建模行业门槛真有这么高?教你如何学习,找到合适自己的方式