您还不是vip会员或者没有登录，无法进入学习，请登录后访问或者联系站长升级会员等级！
为了能给大家提供更好的服务和视频教程，本站VIP课程需要收取一定的学费，具体收费标准根据不同的班级课程和有效期长短有所不同，具体请咨询在线老师，多谢您对本站的支持！
js基础教程56：HTML DOM元素节点概述
讲师：瑞德威(赵老师)
JavaScipt基础知识 视频教程
第二十三课 JavaScript HTML DOM元素（节点）
1、HTML DOM元素（节点）
根据W3C的 HTML DOM标准规定，HTML文档中的所有内容都是节点：
* 整个文档是一个文档节点
* 每个 HTML 元素是元素节点，比如p标签元素、div标签元素
* HTML 元素内的文本是文本节点，例如：<a href="about.html">公司介绍</a>
* 每个HTML元素的属性是属性节点，例如a标签的href属性，或者img标签的src属性
* 注释是注释节点
HTML DOM将 HTML文档视作树结构。这种结构被称为节点树：
网页文档
|
根元素<html>
|
—————————————————————
| |
元素：<head> 元素<body>
|
| ——————————
| |
元素：<title> 属性：href——元素：<a> 元素：<h1>
| | |
文本：“文档标题” 文本：“我的链接” 文本：“我的标题”
通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。
所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。
2、节点父、子节点和同胞节点
节点树中的节点彼此拥有层级关系。
父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。
父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。
* 在节点树中，顶端节点被称为根（root）
* 每个节点都有父节点、除了根（它没有父节点）
* 一个节点可拥有任意数量的子节点
* 同胞是拥有相同父节点的节点
例如： HTML 片段：
<html>
<head>
<title>DOM 教程</title>
</head>
<body>
<h1>DOM 第一课</h1>
<p>Hello world!</p>
</body>
< /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> 元素的最后一个子节点
 |
豫公网安备 41010202002486号 | ICP备案：豫ICP备18044432号-1 |
QQ在线咨询 
