js之 DOM与BOM

JavaScript HTML DOM （文档对象模型）（Document Object Model）

什么是DOM？

DOM是W3C标准。

DOM定义了访问文档的标准：

“W3C文档对象模型（DOM）是一个平台和语言中立的接口，允许程序和脚本动态访问和更新文档的内容，结构和样式。”

W3C DOM标准分为3个不同的部分：

• 核心DOM - 所有文档类型的标准模型
• XML DOM - XML文档的标准模型
• HTML DOM - HTML文档的标准模型

什么是HTML DOM？

HTML DOM是HTML的标准对象模型和 编程接口。它定义了：

• HTML元素作为对象
• 所有HTML元素 的属性
• 访问所有HTML元素的方法
• 所有HTML元素的事件

换句话说：HTML DOM是如何获取，更改，添加或删除HTML元素的标准。

使用对象模型，JavaScript可以获得创建动态HTML所需的全部功能：

• JavaScript可以更改页面中的所有HTML元素
• JavaScript可以更改页面中的所有HTML属性
• JavaScript可以更改页面中的所有CSS样式
• JavaScript可以删除现有的HTML元素和属性
• JavaScript可以添加新的HTML元素和属性
• JavaScript可以对页面中的所有现有HTML事件做出反应
• JavaScript可以在页面中创建新的HTML事件

JavaScript HTML DOM 方法

1、改变页面的元素和属性
a、获取元素的方法：
document.getElementById()
document.getElementsByTagName()
document.getElementsByClassName()
b、js输出HTML内容
document.write();
c、获取和修改元素的内容：
document.getElementById(id).innerHTML
document.getElementById(id).innerHTML=new HTML；
d、获取和修改元素的属性值：
document.getElementById(id).attribute
document.getElementById(id).attribute=new value；
e、添加html标签：document.createElement
f、添加html文本内容：document.createTextNode
g、追加元素：document.appendChild();
h、从父元素中删除子元素：parent.removeChild(child)

2、改变页面元素的样式
a、修改css样式：
document.getElementById(id).style.property
document.getElementById(id).style.property=new style；

3、对页面元素事件的监听和处理
常用的事件：
onload：当文档加载时运行脚本
onblur：当窗口失去焦点时运行脚本
onfocus：当窗口获得焦点时运行脚本
onchange：当元素改变时运行脚本
onsubmit：当提交表单时运行脚本
onkeydown：当按下按键时运行脚本
onkeypress：当按下并松开按键时运行脚本
onkeyup：当松开按键时运行脚本
onclick：当单击鼠标时运行脚本
ondblclick：当双击鼠标时运行脚本
onmousedown：当按下鼠标按钮时运行脚本
onmousemove：当鼠标指针移动时运行脚本
onmouseout：当鼠标指针移出元素时运行脚本
onmouseover：当鼠标指针移至元素之上时运行脚本
onmouseup：当松开鼠标按钮时运行脚本
onabort：当发生中止事件时运行脚本

事件监听：

addEventListener（）

removeEventListener（）

JavaScript BOM（浏览器对象模型）（Browser Object Model）

浏览器对象模型（BOM）以 window 对象为依托，表示浏览器窗口以及页面可见区域。同时， window
对象还是 ECMAScript 中的 Global 对象，因而所有全局变量和函数都是它的属性，且所有原生的构造
函数及其他函数也都存在于它的命名空间下

window对象

html DOM 也是window的属性

• window.innerHeight - 浏览器窗口的内部高度（以像素为单位）
• window.innerWidth - 浏览器窗口的内部宽度（以像素为单位）

• window.open（） - 打开一个新窗口
• window.close（） - 关闭当前窗口
• window.moveTo（） - 移动当前窗口
• window.resizeTo（） - 表示当前窗口

Screen：

• screen.width         返回访问者屏幕的宽度
• screen.height        属性返回访问者屏幕的高度
• screen.availWidth 返回访问者屏幕的宽度，减去Windows任务栏等界面功能
• screen.availHeight返回访问者屏幕的高度，减去Windows任务栏等界面功能
• screen.colorDepth返回用于显示一种颜色的位数
• screen.pixelDepth属性返回屏幕的像素深度

location：

• window.location.href返回当前页面的href（URL）
• window.location.hostname返回Web主机的域名
• window.location.pathname返回当前页面的路径和文件名
• window.location.protocol返回使用的Web协议（http：//或https：//）
• window.location.assign加载一个新文档

history：

• history.back（） - 与在浏览器中单击返回相同
• history.forward（） - 与在浏览器中单击向前相同

navigator：

• navigator.appName返回浏览器的名称
• navigator.appCodeName返回浏览器的名称
• navigator.platform返回浏览器平台（操作系统）
• navigator.cookieEnabled 导航器cookie是否已启用
• navigator.product返回浏览器的引擎名称
• navigator.appVersion返回有关浏览器的版本信息
• navigator.userAgent返回有关浏览器的版本信息
• navigator.language返回浏览器的语言
• navigator.javaEnabled()java是否启用了

popup alert：

• window.confirm（）确认框
• window.prompt（）提示框
• window.alert（）警告框

Timing：

setTimeout(函数，时间) 只执行一次
setInterval(函数，时间) 无限执行
clearTimeout(定时器名称) 清除定时器