DOM中的节点、事件操作

一、节点层级

(1)获取子节点、子元素的方式

A、childNodes属性：返回当前节点的所有子节点的集合(NodeList),返回的节点包括元素、文本和其他节点。

B、children属性：只返回子元素节点的集合(HTMLCollection)。

C、firstChild属性：返回第一个子节点(元素节点或文本节点)。

D、firstElementChild属性：返回第一个子元素。

E、lastChild属性：返回最后一个子节点(元素节点或文本节点)。

F、lastElementChild属性：返回最后一个子元素

(2)获取兄弟节点、兄弟元素的方式

A、nextSibling属性：返回后一个兄弟节点

B、previousSibling属性：返回前一个兄弟节点

C、nextElementSibling属性：返回下一个兄弟元素

D、previousElementSibling属性：返回前一个兄弟元素

二、事件

(1)事件的注册

事件的注册又称为事件的绑定。

A、传统方式：

 对象.事件名 = 事件处理程序

例如：

   btn.onclick = function() {
    }

优点：同一个对象的同一个事件只能注册一个处理程序，后面注册的程序会将前面注册的程序覆盖掉(唯一性)。

B、事件监听方式

事件监听方式同一个对象的同一个事件添加多个事件处理程序。

a、早期的浏览器：

dom对象.attachEvent(type,callback)。

type参数：表示事件的类型，如click、change、foucs等。

callback参数：是回调函数，表示事件处理程序。

b、标准浏览器:

dom对象.addEventListener(type,callback,[capture])。

type参数：表示事件的类型，如click、change、foucs等。

callback参数：是回调函数，表示事件处理程序。

capture参数：可选参数，用来指定事件处理的方式；true表示事件在捕获阶段处理;false表明在冒泡阶段处理。

冒泡和捕获阶段如下：