JavaScript入门教程

JavaScript简介
JavaScript语法基础
JavaScript流程控制
JavaScript函数
面向对象编程
JavaScript事件
JavaScript DOM
正则表达式
JavaScript BOM
AJAX

专题分析

浏览器兼容性
JS优化
Web前端开发规范
编辑器推荐
总结和笔记

学习助手

对象参考手册
ECMAScript分析
数据中心
QQ交流群

DOM节点和节点树

节点与节点树的概念

HTML 文档中的每项内容都是一个节点,包括 HTML标签、标签属性、文本内容、注释、空格或tab 等。

HTML 文档中的所有节点组成了一个节点树(或文档树)。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点,并由此继续伸出枝条,直到处于这棵树最低级别的所有文本节点为止。

节点与节点的关系

DOM节点之间都有等级关系,包括父节点、子节点、兄弟节点(同辈节点)、后代、父辈 等。
<html>
<head>
    <title>DOM节点之间的关系</title>
</head>
<body>
    <h1>这是标题</h1>
    <p>这是内容</p>
</body>
</html>
从上面的代码可以看出:
  • 除文档节点(根节点)之外的每个节点都有父节点
    例如,<head> 和 <body> 的父节点是 <html> 节点,文本节点“ 这是内容 ”的父节点是 <p> 节点。
     
  • 大部分元素节点都有子节点
    例如,<head> 节点有一个子节点:<title> 节点;<title> 节点也有一个子节点:文本节点“ 这是标题 ”。
     
  • 当节点拥有共同的父节点时,它们就是兄弟节点(同辈节点)
    例如,<h1> 和 <p>是兄弟节点,它们的父节点均是 <body> 节点。
     
  • 节点也可以拥有后代,后代指某个节点的所有子节点,或者这些子节点的子节点,以此类推。
    例如,所有的文本节点都是 <html>节点的后代,而第一个文本节点是 <head> 节点的后代。
     
  • 节点也可以拥有先辈。先辈是某个节点的父节点,或者父节点的父节点,以此类推。
    例如,所有的文本节点都可把 <html> 节点作为先辈节点。