嶙峋疾

DOM – 获取元素

根据CSS选择器来获取DOM元素

1. 选择匹配的第一个元素

语法：document.querySelector('CSS选择器') 参数：包含一个或多个有效的CSS选择器字符串 返回值：CSS选择器匹配的第一个元素，一个HTMLElement对象。如果没有匹配到，则返回null。

2. 选择匹配的多个元素

语法：document.querySelectorAll('CSS选择器') 参数：包含一个或多个有效的CSS选择器字符串 返回值：CSS选择器匹配的NodeList对象集合 得到的是一个伪数组：

• 有长度有索引号的数组
• 没有pop() push()等数组方法

想要得到里面的每一个对象，需要遍历（for）获得：

const lis = document.querySelectorAll('.nav li')
for (let i = 0; i < lis.length; i++) {
    console.log(lis[i]) // 每一个li对象
}

其他获取DOM元素方法（了解）

document.getElementById('id名')：返回带有ID的元素对象 document.getElementsByTagName('标签名')：返回带有指定标签名的对象的集合（伪数组） element.getElementsByTagName('标签名')：返回某个父元素（指明的单个对象）内部所有指定标签名的子元素集合 document.getElementsByClassName('类名')：根据类名返回元素对象集合 document.body：返回body元素对象 document.documentElement：返回html元素对象

事件基础

事件三要素：事件源、事件类型、事件处理程序

鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发