一、节点层级
(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表明在冒泡阶段处理。
冒泡和捕获阶段如下: