二、（6）JavaScriptDOM和BOM

2022-07-11 13:55:48

JavaScript-DOM和BOM

1. JavaScript组成

　　JavaScript和ECMAScript通常都被人们用来表达相同的含义，但JavaScript的含义却比ECMA-262中规定的要多得多。

组成部分:

  • 1、核心( ECMAScript)：JavaScript语言的核心，包含基本语法、数据类型、关键字...
  • 2、文档对象模型( DOM)：提供访问和操作网页内容的方法和接口；可操作HTML中的标签内容、样式、结构；document.write(“你好”)，输出内容至网页，这就是DOM中方法。
  • 3、浏览器对象模型( BOM)：提供与浏览器交互的方法和接口。可操作浏览器窗口，比如浏览器地址栏，浏览器访问历史等；window.alert(“你好”);，浏览器弹出一个消息对话框，这就是BOM中的方法。

二、（6）JavaScriptDOM和BOM

2. DOM和BOM简介

　　DOM:文档对象模型,主要是操作是HTML中标签；

　　BOM:浏览器对象模型,主要是操作的浏览器窗口；

　　DOM(Document Object Model)即文档对象模型使JavaScript有能力与HTML 文档的所有元素“对话”。

　　BOM(Browser Object Model)即浏览器对象模型使 JavaScript 有能力与浏览器“对话”。

　　BOM提供了访问浏览器各种功能部件的途径，例如浏览器窗口本身、浏览历史等；而DOM提供了访问浏览器中网页文档各元素的途径，包括页面中的超链接、表单等各种HTML元素及其内容。

　　BOM与DOM是独立于程序语言和平台的标准，W3C定义了一组标准接口，而这些接口在浏览器中以对象的形式实现。BOM与DOM均由一组对象组成，对象定义了属性和方法。

　　BOM与DOM关系非常密切。BOM的window对象中包含一个document属性，该属性是对DOM模型的document对象的引用，代表了当前窗口中网页文档所对应的document对象，通过该属性可以访问网页文档的各种内容。

为什么要学习BOM和DOM

通过BOM对象完成以下内容:

  • 1. 弹出新的浏览器窗口、移动、关闭浏览器窗口及调整窗口大小；
  • 2. 提供WEB浏览器详细信息的导航对象；
  • 3. 提供装载到浏览器中页面的详细信息的定位对象；
  • 4. 提供用户屏幕分辩率详细信息的屏幕对象；
  • 5. 对cookie的支持。 

通过DOM对象完成以下内容:

　　使得程序的脚本可以动态地访问并更新页面的内容，结构以及样式，文档可以被进一步加工处理并且处理结果可以显示在当前页面上. 如当当网的事例,已经所有网页上的动态效果(除flash外).

BOM模型对象结构图

　　BOM并不是只有一个对象而是有以下对象组成的.
二、（6）JavaScriptDOM和BOM

BOM结构图说明:

  • 1. 反映了BOM中各对象之间的层次关系；
  • 2. 在BOM中，window对象是顶层对象，其它对象均是其子对象；
  • 3. history浏览器的浏览历史
  • 4. location对象代表当前显示的文档的地址
  • 5. Navigator对象提供有关浏览器的各种信息
  • 6. screen对象提供显示器屏幕相关的一些信息
  • 7. Frames[]为window对象的数组型属性，每一个数组元素对应框架集(frameset)中的一个框架(frame)所对应的窗口。
  • 8. Document对象是对DOM的引用，代表了当前浏览器窗口中的网页文档

3. Window对象（重点）

　　Window对象是BOM与DOM的顶层对象，表示浏览器窗口或者网页中的框架。

　　Window对象是脚本中的全局对象，可以在任何地方调用，脚本中任何对象的使用最终都要追溯到对window对象的访问，所以在使用window对象的各种属性和方法时，window前缀可以省略。

　　访问window对象或子对象属性和方法，要按照层次关系，使用“.”运算符将它们连接起来。

　　window.alert(); 　　 　　　　   简写方式 alert();

　　window.document.write(); 　　 简写方式 document.write()

　　所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性

//变量a就是全局变量，也是window对象上的属性
var a = 12;
//调用
console.log(window.a);//12

全局函数是 window 对象的方法

//定义全局函数
function box(){
console.log("全局方法");
}
//调用
window.box();

　　甚至 HTML DOM 的 document 也是 window 对象的属性之一.

window对象的属性和方法

Window 对象方法

二、（6）JavaScriptDOM和BOM

 

 

 

1. 定时器函数

　　setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

　　setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

setInterval语法：setInterval(code,millisec)

  • code 必需。要调用的函数或要执行的代码串。
  • millisec 必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式

setTimeout语法：setTimeout(code,millisec)

  • code 必需。要调用的函数后要执行的 JavaScript 代码串。
  • millisec 必需。在执行代码前需等待的毫秒数。

清除计时器：

clearInterval(timeId) 取消由 setInterval() 设置的 timeId。

clearTimeout(timeId) 取消由 setTimeout() 方法设置的 timeId。

作用：定时器一般用于制作动画效果，比如每隔一段时间就移动某个元素的位置；

4. BOM其他对象

screen对象

二、（6）JavaScriptDOM和BOM

history对象

　　该对象记录了浏览器的浏览历史，并提供一组方法访问曾经访问过的历史页面。
二、（6）JavaScriptDOM和BOM

location对象

　　该对象存储了当前显示的文档的地址，包括完整的URL地址以及组成URL地址的各个部分。其中各个属性被重新赋值后，浏览器将自动刷新，载入新的URL地址。

二、（6）JavaScriptDOM和BOM

二、（6）JavaScriptDOM和BOM

navigator对象

　　该对象提供有关浏览器的各种信息，所有浏览器都支持该对象
二、（6）JavaScriptDOM和BOM

5. DOM文档对象

什么是DOM

　　DOM(文档对象模型)是一个使程序和脚本能够动态地访问和更新文档的内容、结构以及样式，并独立于平台和语言的接口。

　　W3C DOM提供了一套用于HTML和XML文档的标准对象，以及访问这些文档的标准接口(方法)。

　　DOM与具体的编程语言无关，可以在C、JavaScript、ActionScript、Java等语言中实现。

DOM分类

　　核心DOM：是用于XML与HTML的共用接口； （操作节点树，如创建，删除，查找等）

　　XML DOM：XML专用接口，其实就是DOM进行增强，加入了一些适用于自己的接口； (操作XML文档文件)

　　HTML DOM：HTML专用接口，其实就是DOM进行增强，加入了一些适用于自己的接口；(HTML DOM适合操作属性，如读取或修改属性的值)

HTML节点树

　　HTML文档是一种树状的结构化文档、各标记之间是一种树状的层次关系。

二、（6）JavaScriptDOM和BOM

 

 

二、（6）JavaScriptDOM和BOM

节点：

  • 由结构图中我们可以看到，整个文档就是一个文档节点。 document
  • 而每一个HTML标签都是一个元素节点。 element
  • 标签中的文字则是文本节点(回车，空格也是文本节点)。Text
  • 标签的属性是属性节点。 Attribute
  • 一切都是节点…… Node

DOM 是针对xml(html)的基于树的API。

DOM树:节点（node）的层次。

DOM 把一个文档表示为一棵家谱树（父，子，兄弟）

DOM定义了Node的接口以及许多种节点类型来表示XML节点的多个方面

6. HTML DOM介绍

什么是HTML DOM

　　HTML DOM为HTML文档定义了一些专用的接口，称为HTML DOM，这些接口使对HTML文档的访问与操作更加方便。

　　HTML DOM访问HTML元素更方便的特性
　　一个HTML标记对应一个相应类型的元素对象(Element Object)，如<img>标记对应一个image对象；

　　HTML标记的属性对应于元素对象的一个同名属性。例如id_img.src=“images/01.jpg”
　　可以直接通过HTML标记的id属性的值访问标记对应的元素对象。

HTML DOM中提供的现成的对象来访问到里面的元素

二、（6）JavaScriptDOM和BOM

HTML DOM中访问HTML元素方法（重点）

1. 使用getElementById()方法

功能：在文档中查找指定的id节点，如果找到则返回该节点

例如：

var id_img=document.getElementById(“id_img”);

说明：所有浏览器都支持。

2. getElementsByTagName()

功能：返回带有指定标签名的对象的数组

例如：

 

var list=ulObj.getElementsByTagName(“li”);

 

说明：节点列表length属性表示了节点列表中节点的个数

3. getElementsByName()

功能：返回带有指定名字（name）对象的数组

例如：

var hobby=document.getElementsByName(“hobby”)
<input type=”radio” vlaue=”写代码” name=”hobby”/>
<input type=”radio” vlaue=”玩游戏” name=”hobby”/>
<input type=”radio” vlaue=”看小说” name=”hobby”/>

4. getElementsByClassName(类名)

功能：返回带有指定类名（className）对象的数组

例如：

var box = obj.getElementsByClassName(‘box’);
<div class=”box”></div>
<div class=”box”></div>
<div class=”box”></div>

5. 快速访问方式（了解）

通过 name属性访问
　　• 在表单中，可以通过name属性进行访问。
　　• 例如：document.myform.username.value
　　注意：主要是访问表单中的元素
通过元素数组访问
　　• 常用的数组：images、links、forms等
　　• 例如：document.images[0].src=“images/01.jpg”;

6. HTML5 选择器访问（重点）

1. document.querySelector(“选择器”);//返回页面中的第一个元素
比如:

document.querySelector(“div”); //获取页面中的第一个div;
　　document.querySelector(“#username”);
　　//获取页面中id为username的元素

2. document.querySelectorAll(“选择器”);//返回页面中所有匹配的元素
比如：

document.querySelectorAll(“div”);
//获取页面中所有的div，返回值是一个数组；

7. 作业

1、什么是DOM，使用DOM可以干什么；

2、为浏览器中所有的a标签添加点击事件，点击的时候提示“你确定删除该数据吗”，如果是确定就进行浏览器默认行为，如果是取消，就阻止浏览器行为 return false;

3、实时显示当前日期、时间、星期几到网页上，每秒钟更新一次。

4、制作一个倒计时5秒钟的页面，时间显示为0时跳转到淘宝首页。

5、修改页面中所有div的背景色为yellow；

6、把一个文本输入框设置为只读模式；

7、让页面中所有的按钮都设置为禁用；

8、DOM操作一个性别选项，默认选中男性

9、一个下拉菜单列表有5个选项，DOM操作选中第三项。

上一篇：JS入门笔记二十三:初识BOM


下一篇：BOM和DOM操作