JS-DOM和事件(二)

1.什么是DOM

DOM 是 Document Object Model(文档对象模型)的缩写。HTML DOM 定义了所有 HTML 元素的对象和属性,以及访问它们的方法。换言之,HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

2.DOM常用方法

JS-DOM和事件(二)_第1张图片

getElementById(id)表示根据id获取,获取的是一个元素

getElementsByName表示通过属性的name的值获取,获取的是数组

JS-DOM和事件(二)_第2张图片

getElementByTagName表示根据标签名称获取,获取的是数组

JS-DOM和事件(二)_第3张图片

DOM常用属性

innerHTML 属性可用于获取或改变任意 HTML 元素,包括 html和 body。

nodeValue 属性nodeValue 属性规定节点的值。元素节点的 nodeValue 是 undefined 或 null,文本节点的 nodeValue 是文本本身,属性节点的nodeValue是属性值

JS-DOM和事件(二)_第4张图片

nodeType 属性

JS-DOM和事件(二)_第5张图片

3.事件

onchange、onclick、 onmouseover、 onmouseout、onload\onunload、onmousedown、onmouseup、、、、、

常规的事件处理方法无法批量的为节点添加事件,所以一般都是要通过如下方式进行事件操作

JS-DOM和事件(二)_第6张图片

使用这种方式可能带来的问题如下所示

JS-DOM和事件(二)_第7张图片
'

Event和window.event

对于以上事件的处理方式而言,会默认传递一个event的参数来获取一些事件信息,但是对于IE和firefox的获取方式不一致,IE使用window.event,Firefox使用event获取.所以需要使用如下方法解决


JS-DOM和事件(二)_第8张图片

以上问题的解决方案有两种

2.1、在body中加入onload=xxx来解决

JS-DOM和事件(二)_第9张图片

2.2、使用window.onload事件解决

JS-DOM和事件(二)_第10张图片

你可能感兴趣的:(JS-DOM和事件(二))