前端技术学习第四讲：JavaScript中DOM和BOM

JavaScript中DOM和BOM

一、DOM和BOM

DOM：文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(HTMl和XML文档是通过说明部分定义的)。
BOM：浏览器对象模型（Browser Object Model)，简称BOM），是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。
图中A部分为DOM管理，根节点为Document。
图中B部分为BOM管理，根节点为Window。

二、DOM属性和方法

DOM是一种与平台和语言无关的模型，用来表示 HTML 或 XML 文档。文档对象模型中定义了文档的逻辑结构，以及程序访问和操作文档的方式。当网页加载时，浏览器就会自动创建当前页面的文档对象模型（DOM）。在 DOM 中，文档的所有部分（例如元素、属性、文本等）都会被组织成一个逻辑树结构（类似于族谱），树中每一个分支的终点称为一个节点，每个节点都是一个对象。
借助 DOM 可以使用 JavaScript 来访问、修改、删除或添加 HTML 文档中的任何内容或调整HTML中CSS的样式。
DOM常用属性

属性名称	属性描述
document.body	返回文档的 body 元素
document.domain	返回当前文档的域名
document.forms	返回文档中所有 Form 对象的引用
document.images	返回文档中所有 Image 对象的引用
document.inputEncoding	返回文档的编码方式
document.referrer	返回载入当前文档的 URL
document.scripts	返回页面中所有脚本的集合
document.title	返回当前文档的标题
document.URL	返回文档的完整 URL

DOM常用方法

方法名称	方法描述
document.getElementsByClassName()	返回文档中所有具有指定类名的元素集合
document.getElementById()	返回文档中具有指定 id 属性的元素
document.getElementsByName()	返回具有指定 name 属性的对象集合
document.getElementsByTagName()	返回具有指定标签名的对象集合
document.write()	向文档中写入某些内容
document.writeln()	等同于 write() 方法，不同的是 writeln() 方法会在末尾输出一个换行符

三、DOM元素对象（element对象）

在Document对象中，例如getElementsByTagName()、getElementById()、getElementsByClassName() 等方法调用时，会返回一个element对象，element对象代表元素对象。
element对象常用属性

属性名称	属性描述
element.attributes	返回一个元素的属性数组
element.childNodes	返回元素的一个子节点的数组
element.children	返回元素中子元素的集合
element.classList	返回元素中类名组成的对象
element.className	设置或返回元素的 class 属性
element.clientHeight	返回内容的可视高度（不包括边框，边距或滚动条）
element.clientWidth	返回内容的可视宽度（不包括边框，边距或滚动条）
element.contentEditable	设置或返回元素的内容是否可编辑
element.dir	设置或返回一个元素中的文本方向
element.firstChild	返回元素中的第一个子元素
element.id	设置或者返回元素的 id
element.innerHTML	设置或者返回元素的内容
element.isContentEditable	返回元素内容是否可编辑，如果可编辑则返回 true，否则返回 false
element.lang	设置或者返回一个元素的语言
element.lastChild	返回元素的最后一个子元素
element.nextSibling	返回指定元素之后的兄弟元素，两个元素在 DOM 树中位于同一层级（包括文本节点、注释节点）
element.nextElementSibling	返回指定元素之后的兄弟元素，两个元素在 DOM 树中位于同一层级（不包括文本节点、注释节点）
element.nodeName	返回元素名称（大写）
element.nodeType	返回元素的节点类型
element.nodeValue	返回元素的节点值
element.offsetHeight	返回元素的高度，包括边框和内边距，但不包括外边距
element.offsetParent	返回距离该元素最近的进行过定位的父元素
element.ownerDocument	返回元素的根元素（文档对象）
element.parentNode	返回元素的父节点
element.previousSibling	返回元素之前的兄弟元素，两个元素在 DOM 树中位于同一层级（包括文本节点、注释节点）
element.previousElementSibling	返回元素之前的兄弟元素，两个元素在 DOM 树中位于同一层级（不包括文本节点、注释节点）
element.scrollHeight	返回元素的完整高度（包括被滚动条隐蔽的部分）
element.scrollLeft	设置或返回元素滚动条距离元素左侧的距离
element.scrollTop	设置或返回元素滚动条距离元素上方的距离
element.scrollWidth	返回元素的完整宽度（包括被滚动条隐蔽的部分）
element.style	设置或返回元素的样式属性
element.tabIndex	设置或返回元素的标签顺序
element.tagName	以字符的形式返回元素的名称（大写）
element.textContent	设置或返回某个元素以及其中的文本内容
element.title	设置或返回元素的 title 属性
element.length	返回对象的长度

element对象常用方法

方法名称	方法描述
element.getAttribute()	通过属性名称获取指定元素的属性值
element.getAttributeNode()	通过属性名称获取指定元素得属性节点
element.getElementsByTagName()	通过标签名获取当前元素下的所有子元素的集合
element.getElementsByClassName()	通过类名获取当前元素下的子元素的集合
element.hasAttribute()	判断元素是否具有指定的属性，若存在则返回 true，不存在则返回 false
element.hasAttributes()	判断元素是否存在任何属性，若存在则返回 true，不存在则返回 false
element.hasChildNodes()	判断一个元素是否具有子元素，有则返回 true，没有则返回 false
element.hasFocus()	判断元素是否获得了焦点
element.setAttribute()	设置或者修改指定属性的值
element.setAttributeNode()	设置或者修改指定的属性节点

四、DOM元素属性对象（attributes对象）

在DOM中，通过 attributes 对象来表示 HTML 属性，在 attributes 对象中提供了多种添加、修改和删除 HTML 属性的方法。

属性/方法	描述
attributes.name	返回属性名称
attributes.value	设置或者返回属性的值
attributes.specified	如果定义了指定属性，则返回 true，否则返回 false
nodemap.getNamedItem()	从节点列表中返回的指定属性节点
nodemap.item()	返回节点列表中处于指定索引号的节点
nodemap.length	返回节点列表的节点数目
nodemap.removeNamedItem()	删除指定属性节点
nodemap.setNamedItem()	设置指定属性节点（通过名称）

五、BOM属性和方法

浏览器对象模型（Browser Object Model，简称 BOM）是 JavaScript 的组成部分之一，BOM 赋予了 JavaScript 程序与浏览器交互的能力。
window 对象是 BOM 的核心，用来表示当前浏览器窗口，其中提供了一系列用来操作或访问浏览器的方法和属性。另外，JavaScript 中的所有全局对象、函数以及变量也都属于 window 对象，甚至我们前面介绍的 document 对象也属于 window 对象。
BOM常用属性

属性名称	属性描述
closed	返回窗口是否已被关闭
defaultStatus	设置或返回窗口状态栏中的默认文本
document	对 Document 对象的只读引用
frames	返回窗口中所有已经命名的框架集合，集合由 Window 对象组成，每个 Window 对象在窗口中含有一个 < frame > 或 < iframe > 标签
history	对 History 对象的只读引用，该对象中包含了用户在浏览器中访问过的 URL
innerHeight	返回浏览器窗口的高度，不包含工具栏与滚动条
innerWidth	返回浏览器窗口的宽度，不包含工具栏与滚动条
length	返回当前窗口中 < iframe > 框架的数量
name	设置或返回窗口的名称
navigator	对 Navigator 对象的只读引用，该对象中包含当前浏览器的有关信息
opener	返回对创建此窗口的 window 对象的引用
outerHeight	返回浏览器窗口的完整高度，包含工具栏与滚动条
outerWidth	返回浏览器窗口的完整宽度，包含工具栏与滚动条
pageXOffset	设置或返回当前页面相对于浏览器窗口左上角沿水平方向滚动的距离
pageYOffset	设置或返回当前页面相对于浏览器窗口左上角沿垂直方向滚动的距离
parent	返回父窗口
screen	对 Screen 对象的只读引用，该对象中包含计算机屏幕的相关信息
screenLeft	返回浏览器窗口相对于计算机屏幕的 X 坐标
screenTop	返回浏览器窗口相对于计算机屏幕的 Y 坐标
screenX	返回浏览器窗口相对于计算机屏幕的 X 坐标
screenY	返回浏览器窗口相对于计算机屏幕的 Y 坐标
status	设置窗口状态栏的文本
top	返回最顶层的父窗口

BOM常用方法

方法名称	方法描述
alert()	在浏览器窗口中弹出一个提示框，提示框中有一个确认按钮
blur()	把键盘焦点从顶层窗口移开
clearInterval()	取消由 setInterval() 方法设置的定时器
clearTimeout()	取消由 setTimeout() 方法设置的定时器
close()	关闭某个浏览器窗口
confirm()	在浏览器中弹出一个对话框，对话框带有一个确认按钮和一个取消按钮
createPopup()	创建一个弹出窗口，注意：只有 IE 浏览器支持该方法
focus()	使一个窗口获得焦点
getSelection()	返回一个 Selection 对象，对象中包含用户选中的文本或光标当前的位置
getComputedStyle()	获取指定元素的 CSS 样式
moveBy()	将浏览器窗口移动指定的像素
moveTo()	将浏览器窗口移动到一个指定的坐标
open()	打开一个新的浏览器窗口或查找一个已命名的窗口
print()	打印当前窗口的内容
prompt()	显示一个可供用户输入的对话框
resizeBy()	按照指定的像素调整窗口的大小，即将窗口的尺寸增加或减少指定的像素
resizeTo()	将窗口的大小调整到指定的宽度和高度
scrollBy()	将窗口的内容滚动指定的像素
scrollTo()	将窗口的内容滚动到指定的坐标
setInterval()	创建一个定时器，按照指定的时长（以毫秒计）来不断调用指定的函数或表达式
setTimeout()	创建一个定时器，在经过指定的时长（以毫秒计）后调用指定函数或表达式，只执行一次
stop()	停止页面载入

六、BOM浏览器对象（Navigator对象）

navigator 对象中存储了与浏览器相关的信息，例如名称、版本等，我们可以通过 window 对象的 navigator 属性（即 window.navigator）来引用 navigator 对象，并通过它来获取浏览器的基本信息。
由于 window 对象是一个全局对象，因此在使用 window.navigator 时可以省略 window 前缀。
Navigator常用属性

属性名称	属性方法
appCodeName	返回当前浏览器的内部名称（开发代号）
appName	返回浏览器的官方名称
appVersion	返回浏览器的平台和版本信息
cookieEnabled	返回浏览器是否启用 cookie，启用返回 true，禁用返回 false
onLine	返回浏览器是否联网，联网则返回 true，断网则返回 false
platform	返回浏览器运行的操作系统平台
userAgent	返回浏览器的厂商和版本信息，即浏览器运行的操作系统、浏览器的版本、名称

七、BOM屏幕对象（Screen对象）

screen 对象中包含了有关计算机屏幕的信息，例如分辨率、宽度、高度等，我们可以通过 window 对象的 screen 属性来获取它。由于 window 对象是一个全局对象，因此在使用 window.screen 时可以省略 window 前缀。
Screen常用属性

属性名称	属性描述
availTop	返回屏幕上方边界的第一个像素点（大多数情况下返回 0）
availLeft	返回屏幕左边边界的第一个像素点（大多数情况下返回 0）
availHeight	返回屏幕的高度（不包括 Windows 任务栏）
availWidth	返回屏幕的宽度（不包括 Windows 任务栏）
colorDepth	返回屏幕的颜色深度（color depth），根据 CSSOM（CSS 对象模型）视图，为兼容起见，该值总为 24。
height	返回屏幕的完整高度
pixelDepth	返回屏幕的位深度/色彩深度（bit depth），根据 CSSOM（CSS 对象模型）视图，为兼容起见，该值总为 24
width	返回屏幕的完整宽度
orientation	返回当前屏幕的方向

八、BOM路径对象（Location对象）

location 对象中包含了有关当前页面链接（URL）的信息，例如当前页面的完整 URL、端口号等，我们可以通过 window 对象中的 location 属性来获取 location 对象。由于 window 对象是一个全局对象，因此在使用 window.location 时可以省略 window 前缀。
Location常用属性

属性名称	属性描述
hash	返回一个 URL 中锚的部分，例如：http://c.biancheng.net#js 中的 #js。
host	返回一个 URL 的主机名和端口号，例如 http://c.biancheng.net:8080。
hostname	返回一个 URL 的主机名，例如 http://c.biancheng.net。
href	返回一个完整的 URL，例如 http://c.biancheng.net/javascript/location-
pathname	返回一个 URL 中的路径部分，开头有个 /。
port	返回一个 URL 中的端口号，如果 URL 中不包含明确的端口号，则返回一个空字符串 ’ '。
protocol	返回一个 URL 协议，即 URL 中冒号:及其之前的部分，例如 http: 和 https:。
search	返回一个 URL 中的查询部分，即 URL 中 ? 及其之后的一系列查询参数。
Location常用方法
方法名称	方法描述
–	–
assign()	加载指定的 URL，即载入指定的文档。
reload()	重新加载当前 URL。
replace()	用指定 URL 替换当前的文档，与 assign() 方法不同的是，使用 replace() 替换的新页面不会保存在浏览历史中，用户不能使用后退来返回该页面。

九、BOM浏览历史对象（History对象）

history 对象中包含了用户在浏览器中访问过的历史记录，其中包括通过浏览器浏览过的页面，以及当前页面中通过< iframe >加载的页面。我们可以通过 window 对象中的 history 属性来获取 history 对象，由于 window 对象是一个全局对象，因此在使用window.history 时可以省略 window 前缀。
History常用属性

属性名称	属性方法
length	返回浏览历史的数目，包含当前已经加载的页面。
scrollRestoration	利用浏览器特性，使我们在返回上一页或者下一页时，将页面滚动到之前浏览的位置，该属性有两个值，分别是 auto（表示滚动）与 manual（表示不滚动）。
state	返回浏览器在当前 URL 下的状态信息，如果没有调用过 pushState() 或 replaceState() 方法，则返回默认值 null。

History常用方法

方法名称	方法描述
back()	参照当前页面，返回历史记录中的上一条记录（即返回上一页），您也可以通过点击浏览器工具栏中的 ← 按钮来实现同样的效果。
forward()	参照当前页面，前往历史记录中的下一条记录（即前进到下一页），您也可以通过点击浏览器工具栏中的 → 按钮来实现同样的效果。
go()	参照当前页面，根据给定参数，打开指定的历史记录，例如 -1 表示返回上一页，1 表示返回下一页。
pushState()	向浏览器的历史记录中插入一条新的历史记录。
replaceState()	使用指定的数据、名称和 URL 来替换当前历史记录。

十、JavaScript事件处理

JavaScript 事件（event）是当用户与网页进行交互时发生的事情，例如单机某个链接或按钮、在文本框中输入文本、按下键盘上的某个按键、移动鼠标等等。当事件发生时，您可以使用 JavaScript 中的事件处理程序（也可称为事件监听器）来检测并执行某些特定的程序。
一般情况下事件的名称都是以单词on开头的，例如点击事件 onclick、页面加载事件 onload 等。

event事件：事件可以分为四大类——鼠标事件、键盘事件、表单事件和窗口事件

事件		描述
键盘鼠标事件	onclick	鼠标单击事件
	onclick	点击鼠标时触发此事件
	ondblclick	双击鼠标时触发此事件
	onmousedown	按下鼠标时触发此事件
	onmouseup	鼠标按下后又松开时触发此事件
	onmouseover	当鼠标移动到某个元素上方时触发此事件
	onmousemove	移动鼠标时触发此事件
	onmouseout	当鼠标离开某个元素范围时触发此事件
	onkeypress	当按下并松开键盘上的某个键时触发此事件
	onkeydown	当按下键盘上的某个按键时触发此事件
	onkeyup	当放开键盘上的某个按键时触发此事件
窗口事件	onabort	图片在下载过程中被用户中断时触发此事件
	onbeforeunload	当前页面的内容将要被改变时触发此事件
	onerror	出现错误时触发此事件
	onload	页面内容加载完成时触发此事件
	onmove	当移动浏览器的窗口时触发此事件
	onresize	当改变浏览器的窗口大小时触发此事件
	onscroll	当滚动浏览器的滚动条时触发此事件
	onstop	当按下浏览器的停止按钮或者正在下载的文件被中断时触发此事件
	oncontextmenu	当弹出右键上下文菜单时触发此事件
	onunload	改变当前页面时触发此事件
表单事件	onblur	当前元素失去焦点时触发此事件
	onchange	当前元素失去焦点并且元素的内容发生改变时触发此事件
	onfocus	当某个元素获得焦点时触发此事件
	onreset	当点击表单中的重置按钮时触发此事件
	onsubmit	当提交表单时触发此事件

事件绑定
事件只有与 HTML 元素绑定之后才能被触发，为 HTML 元素绑定事件处理程序的方法由很多，最简单的就是通过 HTML 事件属性来直接绑定事件处理程序，例如 onclick、onmouseover、onmouseout 等属性。

    DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>MyJavaScripttitle>
    head>
    <body>
        <button type="button" onclick="myBtn()">按钮button>
        <script type="text/javascript">
            function myBtn(){
                alert("Hello JavaScript!");
            }
        script>
    body>
    html>

也可以直接使用 JavaScript 中提供的内置函数来为指定元素绑定事件处理程序

    DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>MyJavaScripttitle>
    head>
    <body>
        <button type="button" id="myBtn">按钮button>
        <script>
            function sayHello() {
                alert('Hello JavaScript!');
            }
            document.getElementById("myBtn").onclick = sayHello;
        script>
    body>
    html>