想要对元素进行操作,首先要先获取到这个元素。
根据css选择器来获取DOM元素有以下两种方法:
一、document.querySelector('css选择器')
querySelector用于获取单个元素,而且是匹配到的第一个元素,一个 HTMLElement对象。如果没有匹配到,则返回null。
示例:
html代码:
<div>1</div>
<div>2</div>
<div class="three">3</div>
<div>4</div>
<div>5</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
1、querySelector获取的是第一个元素,括号里注意要加单引号
// 获取第一个元素
let div1 = document.querySelector('div')
// 打印输出
console.log(div1);
控制台输出第一个div
2、获取指定元素,可以给标签先添加类名或者ID,再按类名或ID查找。(这里只演示按类查找,按ID查找同理)
// 获取第三个元素
let div3 = document.querySelector('.three')
console.log(div3);
控制台输出第三个div
3、注意括号里的内容与css选择器的写法是一致的,我们也可以用其他的方式查找元素
// 获取ul里面最后一个li
let lastOne = document.querySelector('ul li:last-child')
console.log(lastOne);
控制台输出ul里面最后一个li
二、document.querySelectorAll('css选择器')
querySelectorAll用于获取多个符合条件的元素,获取到的元素会以伪数组的形式存放起来,所以返回的是一个数组对象,我们需要通过遍历数组来获取每一个元素
// querySelectorAll 获取多个元素 伪数组
// 获取ul里面的所有li
let list = document.querySelectorAll('ul li')
// 通过遍历获取每一个dom对象 dom(文档对象模型)
for (let i = 0; i < list.length; i++) {
console.log(list[i]);
}
控制台输出