文章目录
- 获取DOM对象
- 根据CSS选择器来获取DOM元素
- 选择匹配的第一个元素
- 选择匹配多个元素
- 其他获取DOM元素方法
获取DOM对象
查找元素DOM就是利用JavaScript选择页面中标签元素
根据CSS选择器来获取DOM元素
选择匹配的第一个元素
语法:document.querySelector('css选择器')
参数:包含一个或多个有效的CSS选择器字符串
返回值:CSS选择器匹配的第一个元素,一个HTMLElement对象。如果没有匹配到,则返回null
可以直接操作修改
选择匹配多个元素
语法:document.querySelectorAll('css选择器')
参数:包含一个或多个有效的CSS选择器字符串
返回值:CSS选择器匹配的NodeList对象集合
此方式得到的是一个伪数组(有长度有索引号,但是无法使用pop()push()等数组方法修改数组)
只能通过遍历(for)的方式修改
例如:
<body>
<ul class="nav">
<li>1</li>
<li>2</li>
<li>3</li>
<script>
const lis = document.querySelectorAll('.nav li')
for(let i = 0;i<lis.length;i++)
{
console.log(lis[i])
}
</script>
</body>
其他获取DOM元素方法
//根据id获取一个元素
document.getElementById('nav')
//根据标签获取一类元素 获取页面所有div
document.getElementsByTagName('div')
//根据类名获取元素 获取页面所有类名为w的
document.getElementsByClassName('w')