Web前端技术：JavaScript部分2---DOM事件（常用的DOM操作，DOM查找），BOM事件（窗口大小，周期性定时器、一次性定时器）

一、什么是DOM？

 

DOM（document object model）是W3C（万维网联盟）的标准，是平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。可对网页进行增删改查的操作。

常用的DOM操作：

查找节点   读取节点信息   修改节点信息   创建新节点   删除节点

 

DOM查找

*1. 按id属性 精确查找一个元素对象

var elem=document.getElementById("id") 效率非常高！getElementById只能用在document上

 问题：不是所有元素都有id

*2. 按标签名找

 

var elems=parent.getElementsByTagName("tag"); 查找指定parent节点下的所有标签为tag的子代节点

问题：不但找直接，而且找所有子代。

强调：

可用在任意父元素上

不仅查直接子节点，而且查所有子代节点

返回一个动态集合即使只找到一个元素，也返回集合必须用[0]，取出唯一元素

*3. 通过name属性查找

document.getElementsByName(‘name属性值’)

可以返回DOM树中具有指定name属性值的所有子元素集合

*4. 通过class查找

查找父元素下指定class属性的元素

var elems=parent.getElemnetsByClassName("class");

有兼容性问题: IE9+

*5. 通过CSS选择器查找

二、什么是BOM（Browser Object Model）

专门操作浏览器窗口的API （没有标准, 有兼容性问题）

窗口大小

完整窗口大小：window.outerWidth/outerHeight（显示屏窗口大小）

文档显示区大小：window.innerWidth/innerHeight（获取当前窗口大小）

 

定时器及其分类

让程序按指定时间间隔自动执行任务

网页动态效果、计时功能等

定时器的分类：

1*周期性定时器（让程序按指定时间间隔反复自动执行一项任务）

2*一次性定时器（让程序延迟一段时间执行）