获取DOM元素就是利用JS选择页面中的标签元素
2.1 根据CSS选择器来获取DOM元素(重点)
2.1.1选择匹配的第一个元素
语法:
document.querySelector( 'css选择器' )
参数:
包含一个或多个有效的CSS选择器 字符串
返回值:
CSS选择器匹配的第一个元素，一个HTMLElement对象。
如果没有匹配到，则返回null。
2.1.2选择匹配的多个元素
语法:
document.querySelectorAll( 'css选择器' )
参数:
包含一个或多个有效的CSS选择器 字符串
返回值:
CSS选择器匹配的 NodeList 对象集合
【示例】
<body>
<div class="box">abc</div>
<div class="box">123</div>
<p id="nav">导航栏</p>
<ul>
<li>1</li>
<li>2</li>
</ul>
<script>
// 1.获取 div 匹配的第一个元素
const box = document.querySelector('div')
// const box = document.querySelector('.box')
console.dir(box)
// 2.获取 p
const nav = document.querySelector('p')
// const nav = document.querySelector('#nav')
console.dir(nav)
// 3.获取第一个 li
const li = document.querySelector('ul li:first-child')
console.dir(li)
// 4.获取所有的 li
const lis = document.querySelectorAll('ul li')
console.dir(lis)
</script>
</body>
2.1.3伪数组
querySelectorAll() 得到的是一个 伪数组
➢有长度、有索引号的数组
➢但是没有pop() push() 等数组方法
想要得到里面的每一个对象，需要遍历 (for) 的方式获得。
哪怕只有一个元素，通过querySelectAll()获取过来的也是一个伪数组，只是里面只有一个元素而已
遍历打印所有的小li ：
【示例代码】
<body>
<ul class="nav">
<li>我的首页</li>
<li>产品信息</li>
<li>联系方式</li>
</ul>
<script>
// 方法1
const lis = document.querySelectorAll('.nav li')
for (let i = 0; i < lis.length; i++) {
console.dir(lis[i])
}
// 方法2
// for (let i = 1; i <= 3; i++) {
// const li = document.querySelector(`ul li:nth-child(${i})`)
// console.dir(li)
// }
</script>
</body>
注意：
（1）获取一个DOM元素用querySelector()，能直接操作修改
（2）获取多个DOM元素用querySelectorAll()，不能直接操作修改，只能通 过遍历的方式给里面的元素做修改
2.2 其他获取DOM元素方法(了解)
//根据id获取一个元素
document.getElementById( 'nav' )
//根据 标签 获取一类元素 获取页面所有div
document.getElementsByTagName( 'div' )
//根据 类名 获取元素 获取页面所有类名为w的
document.getElementsByClassName( 'w' )
