【前端】-028-DOM编程-DOM树
2017-02-14 本文已影响44人
9756a8680596
什么是DOM
- Document Object Model（文档对象模型），用对象的方式描述页面中的HTML/CSS内容，通过API实现文档对象内容的操作。
- 一般通过JavaScript实现对DOM的操作，也可以使用其他语言。
- 简单来说，DOM 是关于如何获取、修改、添加或删除 HTML/CSS 的一些列接口标准。
DOM构成
- DOM Core，DOM核心结构和API的定义
- DOM HTML，定义HTML如何转为DOM对象
- DOM Style，定义CSS样式如何转换为DOM对象
- DOM Event，事件模型，定义页面如何响应用户操作
DOM树
-
HTML的DOM树表示，请看例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>
hello, <span>mooc</span>
<img href='xxxx.jpg'>
</p>
<div>微专业</div>
</body>
</html>
HTML2DOM
- 通过上面的例子可知，HTML文档对应的DOM节点的常见类型有:
- 元素节点（Element_Node），HTML标签元素，如
<head>、<p>等等 - 文本节点（Text_Node），页面文本内容，如
hello,、微专业等
- 节点关系，以
<p>节点为例：
- 父节点，
p.parentNode是元素节点body对象 - 第一个子节点，
p.firstChild是文本节点hello,对象 - 第一个元素子节点，
p.firstElementChild是元素节点span - 最后一个子节点，
p.lastChild是元素节点img对象 - 前一个兄弟节点，
p.previousSibling不存在前一个兄弟，为空 - 后一个兄弟节点，
p.nextSibling是元素节点div对象
