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 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(定时器名称) 清除定时器

猜你喜欢