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 |
鼠标按下触发 |