JavaScript的BOM模型与DOM模型

简介: JavaScript的BOM模型与DOM模型

我们日常所见到的几乎所有的浏览器都内嵌了javaScript引擎,使得javaScript语言能够在浏览器环境下运行。 BOM模型与DOM模型就是帮助我们使用javaScript语言来操作浏览器中的各种对象。


BOM模型


BOM模型就是浏览器对象模型(Browser Object Model): 提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。

包括:

Window:窗口对象

Navigator:浏览器对象

Screen:显示器屏幕对象

Location:地址栏对象

History:历史记录对象


DOM模型


DOM模型就是文档对象模型(Document Object Model): 定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构(节点树)。

包括:

Document:文档对象

Element:元素对象

Attribute:属性对象

Comment:注释对象

Text:文本对象

Node:节点对象,上面5个的父对象


BOM模型与DOM模型示意图:

1.png

从浏览器窗口中了解BOM与DOM:

2.png

相关文章
|
5天前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 节点列表
JavaScript HTML DOM 节点列表
11 5
|
5天前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 集合(Collection)
JavaScript HTML DOM 集合(Collection)
8 4
|
6天前
|
JavaScript 前端开发 索引
你可能没有听说过 js中的 DOM操作还有这个: HTMLCollection 和 NodeList
该文章详细解释了JavaScript中HTMLCollection和NodeList这两种DOM集合类型的特性、使用方法及其区别,并通过实例代码展示了如何操作这两种集合来选取和遍历DOM元素。
|
5天前
|
JavaScript 前端开发
JavaScript HTML DOM 元素 (节点)
JavaScript HTML DOM 元素 (节点)
12 2
|
6天前
|
XML 缓存 JavaScript
提升对前端的认知,不得不了解Web API的DOM和BOM
该文章强调了在前端开发中理解和掌握DOM(文档对象模型)和BOM(浏览器对象模型)的重要性,并介绍了它们的相关操作和应用。
提升对前端的认知,不得不了解Web API的DOM和BOM
|
7天前
|
XML 移动开发 JavaScript
js中BOM和DOM总结(基础篇)
文章总结了JavaScript的BOM和DOM知识点,包括window、screen、location、history、navigator对象,以及消息框、计时器和cookie。同时,介绍了DOM的概念、节点获取和修改方法,以及事件处理。
js中BOM和DOM总结(基础篇)
|
6天前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
|
1天前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
1天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
3天前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树