前端技术学习第四讲: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 中,文档的所有部分(例如元素、属性、文本等)都会被组织成一个逻辑树结构(类似于族谱),树中每一个分支的终点称为一个节点,每个节点都是一个对象。
前端技术学习第四讲:JavaScript中DOM和BOM_第1张图片借助 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>

你可能感兴趣的:(前端技术学习,学习,开发语言,javascript)