Java程序员从笨鸟到菜鸟（三十九）DOM 和 BOM
DOM(文档对象模型（Document Object Model)）
一、概念
在网页中，页面或文档的对象被组织在一个树形结构中，用来表示文档中对象的标准模型
二、背景
DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构，使得页面可以动态地变化，如可以动态地显示或隐藏一个元素，改变属性，增加元素等，使得页面的交互性大大地增强
DOM类型
- 核心DOM -针对任何结构化的标准模型
- XML DOM -针对XML文档的标准模型
- HTML DOM -针对HTML文档的标准模型
三、DOM分级
- 1级DOM
- 2级DOM
- 3级DOM
1.节点
- 整个文档是一个文档节点
- 每个HTML标签是一个元素节点
- 包含在HTML元素中的文本是文本节点
- 每一个HTML属性是一个属性节点
- 注释属于注释节点
2.Node层次
节点间彼此都有等级关系
HTML文档中的所有节点组成了一个文档树，HTML文档中的每个元素、属性、文本都代表着树的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止
3.文档树
<html>
<head>
<title>DOM</title>
</head>
<body>
<h1>DOM</h1>
<p>Hello World</p>
</body>
</html>除文档节点之外的每个节点都有父节点，例如 和 节点的父节点是 ,文本 hello world 的父节点是
大部分元素都有子节点，节点有一个子节点节点
4.访问节点
可以通过若干方法来查找希望操作的元素：
- 可以通过使用 getEiementById() 和 getElementByTagName() 方法
- 通过使用一个元素节点的 paranetNode、firstChild 以及 lastChild 属性
getElementById() 和 getElementsByTagName() 这两种方法，可查找整个 HTML 文档中的任何 HTML 元素
4.1 getElementById() 语法
document.getElementById("ID")； 查找id为ID的元素4.2 getElementsByTagName() 语法
document.getElementByTagName("标签名称")；
document.getElementById("ID").getElementsByTagName("标签名称");实例1：
返回文档中所有
元素的一个节点列表
document.getElementsByTagName("p");实例2：
返回 id 为 “maindiv” 的元素下的所有
节点
document.getElementById("maindiv").getElementsByTagName("p");4.3 节点列表
使用节点列表时，通常将列表保存在一个变量中,并且我们通过索引号来访问节点元素，索引号从 0 开始
var x = document.getElementsByTagName("p");
// 通过 length 属性来遍历节点列表
for (var i = 0; i < x.length; i++) {
var y = x[2]; // 访问第三个 <p> 元素
}4.4 parentNode、firstChild、lastChild
通过HTML片段来阐述属性
<table>
<tr>
<td>hello</td>
<td>world</td>
</tr>
</table>第一个 是 元素的首个子元素(firstChild)，最后一个 是 元素的最后一个子元素(lastChild)， 是每个 元素的父节点(parentNode)
通过 firstChild 访问某个元素的文本
var x = [a.paragraph];
var text = x.firstChild.nodeValue.parentNode删除 id 为 “maindiv” 的节点
var x = document.getElementById("maindiv");
x.parentNode.removeChild(x);四、优点和缺点
优点：易用性强，使用 DOM 时，将把所有的 XML 文档信息都存于内存中，并且遍历简单
缺点：效率低，解析速度慢，内存占用过高
BOM（浏览器对象模型(Browser Object Model)）
一、概念
用于描述这种对象与对象之间层次的关系模型，浏览器对象模型提供了独立于内容的，可以与窗口进行互动的对象结构
二、主要功能
- 弹出新浏览器窗口
- 移动、关闭和更改浏览器大小的能力
- 可提供 WEB 浏览器详细的导航对象
- 可提供浏览器载入页面详细的本地对象
- 支持 Cookies
三、BOM
核心是 window
Window 对象包含的属性：document、location、navigator、screen、history、frames
从 window.document 可以看出，DOM 的最根本对象时 BOM 的 window 对象的子对象
区别：DOM 描述了处理网页内容的方法和接口，BOM 描述了与浏览器进行交互的方法和接口
附：操作思维导图
DOM:
Window:
图片来自： https://blog.csdn.net/qq877507054/article/details/51395830 非常感谢作者,文章对 DOM 和 BOM 有着很详细的阐述
上一篇： 爆笑之逗B剧场第171季
下一篇： 爆笑之逗B剧场第174季