深入理解JavaScript的DOM与BOM：浏览器交互与内容操作关键

22 浏览量更新于2024-08-28 收藏 853KB PDF 举报

在JavaScript的学习笔记中，我们关注了BOM（浏览器对象模型）和DOM（文档对象模型）这两个关键概念。JavaScript的核心组成部分由ECMAScript、DOM和BOM共同构成。DOM是W3C制定的标准，是HTML和XML文档的API，它提供了对文档内容和结构的访问、修改能力，所有现代浏览器都遵循这一标准，尽管具体实现可能因浏览器而异。DOM是树状结构，根节点为document，包含子节点如forms、location等，使得开发者能够通过编程操作网页元素。相比之下，BOM则是浏览器厂商根据DOM提供的额外浏览器特定功能的接口，主要用于处理浏览器窗口、框架、用户界面操作，如弹窗、窗口移动和调整大小，获取浏览器信息和屏幕分辨率，以及对cookie的支持。在IE浏览器中，BOM有所扩展，引入了ActiveXObject类，允许JavaScript创建和操控ActiveX对象。窗口对象window是BOM的主要代表，它包含了document属性，这使得可以直接通过window对象访问DOM。实际上，DOM被视为BOM的一个子集或扩展，因为window对象及其子对象如document是DOM操作的起点。DOM关注的是内容处理，而BOM则侧重于浏览器与用户的交互。例如，通过以下HTML代码片段： ```html <!DOCTYPE html> <html> <head> </head> <body>  </body> </html> ``` 开发者可以通过JavaScript的DOM API（如getElementById、getElementsByTagName等）来查找、操作文档中的HTML元素，如`document.getElementById('myElement')`。同时，BOM提供的window对象方法，如window.open()用于打开新窗口，window.location对象用于导航，展示了两者在实际应用中的不同作用。理解DOM和BOM是学习JavaScript的重要环节，它们是构建动态网页和与浏览器交互的关键工具。熟练掌握这两个模型，能够帮助开发者更有效地管理网页内容并优化用户体验。

javascript学习笔记（三）学习笔记（三）BOM和和DOM详解详解

js组成

我们都知道， javascript 有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器

风格迥异。

1. DOM 是 W3C 的标准； [所有浏览器公共遵守的标准] 2. BOM 是各个浏览器厂商根据 DOM

在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同] 3. window 是 BOM 对象，而非 js 对象；

DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。

BOM 主要处理浏览器窗口和框架，不过通常浏览器特定的 JavaScript 扩展都被看做 BOM 的一部分。这些扩展包括：

弹出新的浏览器窗口

移动、关闭浏览器窗口以及调整窗口大小

提供 Web 浏览器详细信息的定位对象

提供用户屏幕分辨率详细信息的屏幕对象

对 cookie 的支持

IE 扩展了 BOM，加入了 ActiveXObject 类，可以通过 JavaScript 实例化 ActiveX 对象

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

Window对象包含属性：document、location、navigator、screen、history、frames

Document根节点包含子节点：forms、location、anchors、images、links

从window.document已然可以看出，DOM的最根本的对象是BOM的window对象的子对象。

区别：DOM描述了处理网页内容的方法和接口，BOM描述了与浏览器进行交互的方法和接口。

认识认识DOM

先来看看下面代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<body>

<h2><a href="http://www.baidu.com">javascript DOM</a></h2>

<p>对HTML元素进行操作，可添加、改变或移除css样式等</p>

<ul>

<li>Javascript</li>

</ul>

</body>

</html>

将HTML代码分解为DOM节点层次图:

**HTML文档可以说由节点构成的集合，DOM节点有:**

1. 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。

2. 文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。

3. 属性节点:元素属性，如<a>标签的链接属性href="http://www.baidu.com"。

节点属性

nodeName返回一个字符串，其内容是节点的名字nodeType返回一个整数，这个数值代表给定节点的类型nodeValue返回给

下载后可阅读完整内容，剩余9页未读，立即下载

weixin_38663608

粉丝: 5
资源: 948

深入理解JavaScript的DOM与BOM：浏览器交互与内容操作关键

JavaScript基础笔记.md

JavaScript达内学习笔记

JavaScript学习笔记：DOM、BOM与AJAX详解

JavaScript基础入门：ECMAScript、DOM与BOM详解

我的javascript学习笔记记录

JavaScript笔记1

javaScript达内培训笔记

JavaScript进阶笔记：数据类型、数组、对象与DOM操作详解

Node.js与Webpack学习笔记：模块化构建详解

JavaScript核心与高级特性详解：从DOM到闭包

最新资源