web前端开发 - 4 JavaScript的BOM与DOM对象

JavaScript 的组成部分:

ECMAScript : 核心; ECMAScript是JavaScript的规格，JavaScript是ECMAScript的一种实现 .

BOM : 浏览器对象模型; 它定义了JavaScript可以进行操作的浏览器的各个功能部件的接口, BOM 的核心对象是

​ window, 它的作用使JavaScript有能力与浏览器’对话.

DOM : 文档对象模型; DOM是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口, 它是W3C 的标准[所有浏览器公共遵守的标准] .

1.BOM 浏览器对象模型

(1) window对象

window对象: 代表的是浏览器中打开的窗口, 在js中我们使用window来引用window对象, window对象是最顶层的一个对象, 它的属性和方法的调用都可以省略window.

序号	属性	功能
1	innerHeight / innerWidth	获取浏览器窗口的内部高度 / 宽度(包括滚动条)
2	screen.availWidth / availHeight	获取可用的屏幕宽度 / 高度
3	prompt()	弹出输入框
4	alert()	弹框警告框
5	confirm()	弹出确认与取消提示框(返回的布尔值true和false)
6	open(‘url’)	打开新窗口
7	close()	关闭浏览器窗口
8	print()	打印当前窗口的内容(调出打印机)
9	moveTo(, )	移动当前窗口
10	resizeTo(, )	调整当前窗口的尺寸

(2) location对象

location对象: 代表的是URL(统一资源定位符, 通常所说的网址); 使用location. 来调用属性

序号	属性	方法
1	location.hostname	返回 web 主机的域名
2	location.pathname	返回当前页面的路径和文件名
3	location.port	返回 web 主机的端口 （80 或 443）
4	location.protocol	返回所使用的 web 协议（http:// 或 https://）
5	location.href	返回当前页面的URL
6	location.assign(‘url’)	加载新的文档网页
7	location.reload()	重新加载, 刷新页面

(3) history对象

window.history: 对象返回浏览器的历史记录列表; 使用 history. 来调用属性

序号	属性	功能
1	history.forward()	前进
2	history.back()	后退
3	go(number)	+前进 / -后退

(4) navigator对象

navigator对象: 包含有关浏览器的信息

序号	属性	功能
1	navigator.appCodeName	浏览器代号
2	navigator.appName	浏览器名称
3	navigator.appVersion	浏览器版本
4	navigator.cookieEnabled	启用Cookies

(5)计时器 (计时事件)

计时事件: 我们通过使用JavaScript能做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行.

序号	属性	功能
1	setInterval (function() {) },2000);	间隔指定的毫秒数不停地执行指定的代码(周期执行)
2	clearInterval()	用于停止 setInterval() 方法执行的函数代码。
3	setTimeout (function(){)}, 2000);	在指定的毫秒数后执行指定代码(执行一次)
4	clearTimeout()	用于停止执行setTimeout()方法的函数代码

2.DOM 文档对象模型

使用DOM模型能够使用JS操作文档内容进行 添加, 删除, 修改, 查询, 复制, 等.

(1)获取元素节点

序号	属性	功能
1	document. getElementById() / document.querySelector	通过id查找元素, 返回带有指定id的元素对象(拿单个元素)
2	document. getElementsByTagName() / getElementsByName	通过标签名查找元素, 返回指定标签的所有元素的集合(使用lenght获取元素个数)
3	document. getElementsByClassName() / document. querySelectorAll	通过类名查找元素, 返回指定类名的所有元素的集合(使用lenght获取元素个数)

(2) 添加节点

序号	属性	功能
1	var 变量名 = document.createElement(‘li’)	创建元素节点
2	var 变量名 = document.createTextNode(‘hello’)	创建文本节点
3	ul.appendChild(li)	添加节点(添加到内部末尾)
4	ul. insertBefore(li, li[0])	插入节点(添加到内部之前)

(3) 删除节点

序号	属性	功能
1	父元素.removeChild(删除的节点对象)	删除指定的节点
2	元素. removeAttribute(属性名)	删除指定的属性

(4) 修改元素内容及属性

序号	属性	功能
1	元素. innerHTML	获取 / 修改内部的HTML文本, 会渲染标签
2	元素. innerText / textContent	获取 / 修改内部的纯文本
3	元素. setAttribute(属性名, 属性值)	修改元素的的属性, 设置新属性
4	元素. getAttribute(属性名)	通过元素名获取属性的值
5	元素. 属性名 = 属性值	直接修改属性值
6	元素. style. 属性名 = 属性值	修改CSS的属性

(5) 节点查找(层次)

序号	属性	功能
1	parentNode	查找某节点的父节点
2	childNodes	查找所有孩子节点
3	children	查找被选元素的所有直接子元素
4	firstChild	查找被选节点的第一个节点
5	lastChild	查找被选节点的最后一个节点
6	previousSibling	查找被选节点的上一个兄弟节点
7	nextSibling	查找备选节点的后一个兄弟节点

(6) 复制节点

序号	属性	功能
1	var copy = node. cloneNode(true / false)	参数表示是否克隆后代, 默认为false, 即不克隆后代

(7) 事件对象

事件驱动模型 : 事件(动作) –> 事件类型(动作类型) –> 事件源(事件发生的地方) –> 事件处理程序(事件响应程序 - 函

​ 数) –> 事件监听器(监听事件的发生 - 浏览器).

序号	属性	功能
1	onclick	事件在元素被点击时发生(元素被点击的整个过程)
2	onload	事件在页面或图像加载完成后立即发生
3	onunload	事件在用户退出页面时发生
4	onchange	事件会在域的内容改变时发生
5	onfocus	获得焦点是发生
6	onblur	失去焦点时发生

A. 鼠标属性

序号	属性	功能
1	onmouseover	鼠标移至元素上方时触发函数
2	onmouseout	鼠标移至移出元素时触发函数
3	onmousedown	鼠标按下时发生
4	onmouseup	鼠标释放时发生
5	onmousemove	鼠标被移动时发生

B. 键盘属性

序号	属性	功能
1	onkeydown	某个键盘按键被按下
2	onkeyup	某个键盘按键被松开
3	onkeypress	某个键盘按键被按下并松开的整个过程

注意: 事件回柄需要加on, 添加事件监听addEventListener类型不需要加’on’前缀, 其他都要加on.

(8) 事件冒泡与捕获

序号	属性	功能
1	evt.stopPropagation()	阻止事件冒泡
2	evt.cancelBubble = true	阻止事件冒泡(IE9之前)
3	evt.preventDefault()	阻止事件默认行为
4	evt.returnValue = false	阻止事件默认行为(IE9之前)

(9) 事件监听

序号	属性	功能
1	document. addEventListener(“click”, function(){ }, true) #捕获方式默认为false	添加事件监听
2	document. attachEvent(‘onclick’ , function(){ })	添加事件监听(IE9之前)
3	document. removeEventListener(“click”, function(){ })	移除事件监听
4	document. detachEvent(‘onclick’ , function(){ })	移除事件监听(IE9之前)