HTML DOM节点结构

2018-11-28 16:03:00
linefo
405
最后编辑:linefo 于 2018-11-28 16:09:57


可以把整篇HTML文档看作一个节点树。



<html>
  <head>
    <title>DOM 教程</title>
  </head>
  <body>
    <h1>DOM 第一课</h1>
    <p>Hello world!</p>
  </body>
</html>



从上面的 HTML 中:
1、<html> 节点没有父节点;它是根节点
2、<head> 和 <body> 的父节点是 <html> 节点
3、文本节点 "Hello world!" 的父节点是 <p> 节点


并且:

1、<html> 节点拥有两个子节点:<head> 和 <body>
2、<head> 节点拥有一个子节点:<title> 节点
3、<title> 节点也拥有一个子节点:文本节点 "DOM 教程"
4、<h1> 和 <p> 节点是同胞节点,同时也是 <body> 的子节点


并且:
1、<head> 元素是 <html> 元素的首个子节点
2、<body> 元素是 <html> 元素的最后一个子节点
3、<h1> 元素是 <body> 元素的首个子节点
4、<p> 元素是 <body> 元素的最后一个子节点


补充:

延伸多个层级的话

祖先元素:<h1>的祖先元素(含父元素)包括<html>和<body>。

后代元素:而<html>的后代元素(含子元素)包括<body>和<h1>