当前位置: 首页 / 技术干货 / 正文
好程序员web前端培训分享HTML DOM节点介绍

2020-07-23

web前端培训

  好程序员web前端培训分享HTML DOM节点,HTML DOM中,所有事物都是节点。DOM是被视为节点树的HTML

大数据2

  DOM节点

  根据W3CHTML DOM标准,HTML文档中的所有内容都是节点:

  整个文档是一个文档节点

  每个HTML元素是元素节点

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

  每个HTML属性是属性节点

  注释是注释节点

  HTML DOM节点树

  HTML DOMHTML文档视作树结构。这种结构被称为节点树:

  HTML DOM Tree实例

  图片1

  通过HTML DOM,树中的所有节点均可通过 JavaScript 进行访问。所有HTML元素(节点)均可被修改,也可以创建或删除节点。

  节点父、子和同胞

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

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

  在节点树中,顶端节点被称为根(root)

  每个节点都有父节点、除了根(它没有父节点)

  一个节点可拥有任意数量的子

  同胞是拥有相同父节点的节点

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

  图片2

  请看下面的 HTML 片段:

  <html>

  <head>

  <title>DOM 教程</title>

  </head>

  <body>

  <h1>DOM diyi课</h1>

  <p>Hello world!</p>

  </body>

  </html>

  从上面的 HTML 中:

  <html> 节点没有父节点;它是根节点

  <head> <body> 的父节点是 <html> 节点

  文本节点 "Hello world!" 的父节点是 <p> 节点

  并且:

  <html> 节点拥有两个子节点:<head> <body>

  <head> 节点拥有一个子节点:<title> 节点

  <title> 节点也拥有一个子节点:文本节点 "DOM 教程"

  <h1> <p> 节点是同胞节点,同时也是 <body> 的子节点

  并且:

  <head> 元素是 <html> 元素的首个子节点

  <body> 元素是 <html> 元素的最后一个子节点

  <h1> 元素是 <body> 元素的首个子节点

  <p> 元素是 <body> 元素的最后一个子节点

  警告!

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

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

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

分享: 更多

上一篇:JS面试题总结一

下一篇:HTML DOM简介-好程序员

好程序员公众号

  • · 剖析行业发展趋势
  • · 分享大厂面试心得
  • · 汇聚企业项目源码
  • · 下载全套高精尖教程

好程序员开班动态

More+
  • HTML5大前端 <高端班>

    开班时间:2020-11-16(北京)

    开班盛况

    开班时间:2020-12-07(深圳)

    预约报名
  • 大数据+人工智能 <高端班>

    开班时间:2020-09-14(北京)

    开班盛况

    开班时间:2020-11-09(北京)

    开班盛况
  • JavaEE分布式开发 <高端班>

    开班时间:2021-01-04(北京)

    预约报名

    开班时间:2020-07-20(北京)

    开班盛况
  • Python人工智能+数据分析 <高端班>

    开班时间:2020-07-20(上海)

    开班盛况

    开班时间:2020-09-21(上海)

    开班盛况
  • 云计算开发 <高端班>

    开班时间:2019-07-22(北京)

    开班盛况

    开班时间:2019-07-15(深圳)

    开班盛况
在线咨询
免费试听
入学教程
立即报名

Copyright 2011-2020 北京千锋互联科技有限公司 .All Right 京ICP备12003911号-5 京公安网11010802011455号