再谈BOM和DOM(1):BOM与DOM概述
JavaScript的实现包括以下3个部分:
ECMAScript(核心):描述了JS的语法和基本对象。
浏览器对象模型(BOM):与浏览器交互的方法和接口
文档对象模型 (DOM):处理网页内容的方法和接口
DOM-文档对象模型
DOM(文档对象模型)是 HTML 和 XML 的应用程序接口,是操作文档出现的 API,是为了操作文档出现的接口。DOM代表着被加载到浏览器窗口里的当前网页:浏览器向我们提供了当前网页的地图(或者说模型),而我们可以通过js去读取这张地图。
D(文档-document)可以理解为整个Web加载的网页文档
O(对象-object)可以理解为类似window对象只来的东西,可以调用属性和方法,这里我们说的是document对象,
M(模型-model)可以理解为网页文档的树形结构,DOM树由节点构成
BOM-浏览器对象模型
BOM 是 Browser Object Model,浏览器对象模型,BOM 主要是处理浏览器窗口和框架,不过通常浏览器特定的 JavaScript 扩展都被看做 BOM 的一部分。这些扩展包括:
弹出新的浏览器窗口:alert、confirm、prompt
移动、关闭浏览器窗口以及调整窗口大小:scrollTo、moveTo、resizeTo等
提供 Web 浏览器详细信息的定位对象:Navigator、History
提供用户屏幕分辨率详细信息的屏幕对象:Screen
对 cookie 的支持:cookie
IE 扩展了 BOM,加入了 ActiveXObject 类,可以通过 JavaScript 实例化 ActiveX 对象
window对象对应着浏览器窗口本身,这个对象的属性和方法通常被称为BOM
DOM包含:window
Window对象包含属性:document、location、navigator、screen、history、frames
Document根节点包含子节点:forms、location、anchors、images、links
从window.document已然可以看出,DOM的最根本的对象是BOM的window对象的子对象。
区别:DOM描述了处理网页内容的方法和接口,BOM描述了与浏览器进行交互的方法和接口。
根据W3C DOM规范,DOM是HTML与XML的应用编程接口(API),DOM将整个页面映射为一个由层次节点组成的文件。有1级、2级、3级共3个级别。
BOM与DOM的对比
BOM为了处理浏览器窗口和框架
DOM为了操作文档出现的接口,是 HTML 和 XML 的应用程序接口(API)。
DOM是 W3C 的标准; [所有浏览器公共遵守的标准]
BOM 是 各个浏览器厂商根据 DOM在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同]
window 是 BOM 对象,而非 js 对象;
javacsript是通过访问BOM(Browser Object Model)对象来访问、控制、修改客户端(浏览器),由于BOM的window包含了document,window对象的属性和方法是直接可以使用而且被感知的,因此可以直接使用window对象的document属性,通过document属性就可以访问、检索、修改XHTML文档内容与结构。因为document对象又是DOM(Document Object Model)模型的根节点。可以说,BOM包含了DOM(对象),浏览器提供出来给予访问的是BOM对象,从BOM对象再访问到DOM对象,从而js可以操作浏览器以及浏览器读取到的文档。其中DOM包含:window
BOM和DOM的结构关系示意图
参考文章:
ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)https://www.cnblogs.com/best/p/8028168.html
JavaScript学习总结(三)BOM和DOM详解 https://segmentfault.com/a/1190000000654274
Javascript操作BOM和DOM详解(1) https://blog.csdn.net/openbox2008/article/details/85260063
JavaWeb学习总结:JavaScript(BOM和DOM) https://blog.csdn.net/weixin_42384085/article/details/99807198
HTML DOM Event 对象 https://www.w3school.com.cn/jsref/dom_obj_event.asp
XML DOM - Element 对象 https://www.w3school.com.cn/xmldom/dom_element.asp
JAVAScript中DOM与BOM的差异分析 https://www.cnblogs.com/fjner/p/5892325.html
转载本站文章《再谈BOM和DOM(1):BOM与DOM概述》,
请注明出处:https://www.zhoulujun.cn/html/webfront/SGML/xml/2020_0317_8346.html
再谈BOM和DOM(1):BOM与DOM概述相关推荐
- (九)JS-WEB-API(DOM、BOM、事件、Ajax、存储)【每个工程师必须熟练掌握的技能】
JS-WEB-API 提问 DOM BOM 事件 Ajax 存储 从JS基础知识到JS-WEB-API JS基础知识 JS-WEB-API DOM(Document Object Model) DOM ...
- 提升对前端的认知,不得不了解Web API的DOM和BOM
了解Web API的DOM和BOM 引言 正文 一.DOM操作 1.DOM的本质 2.DOM节点操作 (1)property形式 (2)attribute形式 3.DOM结构操作 (1)新增/插入节点 ...
- html中dom和bom,区分BOM和DOM,区分window、document、html、body
JavaScript三大组成部分 1. ECMAScript ECMAScript是JavaScript的语法标准,由ECMA(欧洲计算机厂家协会)制定的. 2. BOM BOM即浏览器对象模型(br ...
- JavaScript实战操作(DOM,BOM)
JS语法 页面文档对象模型 浏览器对象模型 JS ECMAScript DOM BOM API 应用程序编程接口,就是一个工具,以便于能轻松实现想要完成的功能 Web API Web API是浏览器提 ...
- 27、什么是DOM和BOM
1.DOM DOM (Document ),简称文档对象模型.通过创建树来表示文档,描述了处理网页内容的方法和接口.用DOM API可以轻松地删除.添加和替换节点. DOM操作举例: 1)访问节点 d ...
- 前端复习之DOM、BOM
BOM VS DOM: 1 BOM:浏览器对象模型(API),专门操作浏览器窗口的API 2 没标准! 3 DOM:文档对象模型(API),专门操作网页内容的API 4 可以对网页中任意对象,做任意修 ...
- JS中的DOM与BOM
一.Javascript组成 JavaScript的实现包括以下3个部分: ECMAScript(核心) 描述了JS的语法和基本对象. 文档对象模型 (DOM) 处理网页内容的方法和接口 浏览器对象模 ...
- JavaScript核心 DOM 和 BOM操作
JavaScript核心 DOM 和 BOM操作 Web APIs 简介 1. Web APIs 和 JS 基础关联性 1.1 JS 的组成 1.2 JS 基础阶段以及 Web APIs 阶段 JS ...
- web前端-JS(DOM、BOM)
web前端-JS(DOM.BOM) 1. DOM- 操作元素 1.1 获取元素 1.2 事件基础 1.3 操作元素 1.3.1 改变元素的内容 1.3.2 常见元素的属性操作 1.3.3 表单元素的属 ...
最新文章
- mysql插入大量数据
- 大规模1.4亿中文知识图谱数据,我把它开源了
- oracle ogg00423,ogg实现Oracle到SQL Server 2005的同步
- 连接相机无法识别_车牌识别一体机在汽修门店安装中要注意的事项
- c#的winform调用外部exe作为子窗体
- 题目1544:数字序列区间最小值
- python运算符手写笔记_Python笔记(四)-运算符
- 均匀分布 卡方分布_高等数理统计—第一章 统计分布基础
- javashop B2C开源电商系统源代码
- Excel图表—泊松分布函数的概率分布图的绘制
- 深度学习速成版01---神经网络
- 为什么企业微信只能群发一次?如何增加群发次数?
- Java(Spring boot)实现生成二维码
- 图解Adobe Flash Player 浏览器插件安装
- c++ 模板----成员函数模板
- AIO-3588JQ 8K AI工业主板
- 鸿蒙遗石是什么意思,《走近》:一方歙砚,这是徽州千年遗石,也是一生匠心...
- 绝对经典!辛苦收集了淘宝网上的差评回复(肯定有你没看过的)
- mysql8.0.20免安装初始化步骤记录
- 华为校招 java 面试题