html dom与bom,JS DOM（文档对象模型）与BOM（浏览器对象模型）

2016年3月15日

在JS中，对DOM(Document Object Model)对象和BOM(Browser Object Model )对象的操作是非常重要的内容。DOM主要包括HTML文档的属性和方法，像对HTML节点的操作，CSS的操作和HTML事件的监听和处理。BOM不要包括浏览器相关的一些属性和方法。

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).getAttribute(attribute)

document.getElementById(id).setAttribute(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；

document.getElementById(id).getComputedStyle;//获取当前样式，IE9以下不支持，返回null,IE9以下需要使用currentStyle方法。

3、对页面元素事件的监听和处理

常用的事件：

onload：当文档加载时运行脚本

onblur：当窗口失去焦点时运行脚本

onfocus：当窗口获得焦点时运行脚本

onchange：当元素改变时运行脚本

onsubmit：当提交表单时运行脚本

onkeydown：当按下按键时运行脚本

onkeypress：当按下并松开按键时运行脚本

onkeyup：当松开按键时运行脚本

onclick：当单击鼠标时运行脚本

ondblclick：当双击鼠标时运行脚本

onmousedown：当按下鼠标按钮时运行脚本

onmousemove：当鼠标指针移动时运行脚本

onmouseout：当鼠标指针移出元素时运行脚本

onmouseover：当鼠标指针移至元素之上时运行脚本

onmouseup：当松开鼠标按钮时运行脚本

onabort：当发生中止事件时运行脚本

BOM知识点

a、窗口

window.open()：打开新窗口

window.close()：关闭当前窗口

window.moveTo()：移动当前窗口

window.resizeTo()：调整当前窗口的尺寸

b、窗口的内部高度和宽度

标准浏览器：

window.innerHeight

window.innerWidth

对于 Internet Explorer 8、7、6、5：

document.documentElement.clientHeight 或者 document.body.clientHeight

document.documentElement.clientWidth 或者 document.body.clientWidth

c、屏幕对象

screen.availWidth：可用的屏幕宽度

screen.availHeight：可用的屏幕高度

d、地址栏对象

location.hostname：web 主机的域名

location.pathname：当前页面的路径和文件名

location.port：主机的端口 (80 或 443)

location.protocol：所使用的 web 协议(http:// 或 https://)

history.back()：与在浏览器点击后退按钮相同

history.forward()：与在浏览器中点击按钮向前相同

e、浏览器自带的信息

navigator.appVersion：浏览器版本

navigator.platform：浏览器平台

navigator.userAgent：浏览器User-agent header

f、计时器相关的

setInterval()和clearInterval 间隔几秒循环执行/清除定时器

setTimeout 和 clearTimeout() 间隔几秒执行(单次)/清除定时器