获取DOM元素

文章
/
learn / js
/ 获取DOM元素
返回文章列表

获取DOM元素

learn/js
#JS

单个选择

JS
1
2
3
4
5
6
7
<body>
  <div class="box">123</div>
</body>
let box = document.querySelector('div')
或
let box = document.querySelector('.box') //这里是 .box
comsole.log(box)

复合选择

JS
1
2
3
4
5
6
7
8
9
10
<p id = nav>123 </p>
const nav = document.querySelector('#nav')
<ul>
<li>123</li>
<li>456</li>
<li>789</li>
</ul>
const li = document.querySelector('ul li:first-child') //获取第一个li标签
//选择所有的li标签
const lis = document.querySelectorAll('ul li')//返回数组形式的对象的集合

直接修改样式

JS
1
2
3
<p id = nav>123 </p>
const nav = document.querySelector('#nav')
nav.style.color = 'red'

遍历元素

JS
1
2
3
4
5
6
7
8
9
<u class= navl>
<li>123</li>
<li>456</li>
<li>789</li>
</ul>
const lis =document.querySelectorAll(''.nav li")
for(let i = 0; i <lis.length; i++){
console.log(lis[i])
}

其他获取 DOM 元素的方法

JS
1
2
3
4
document.getElementById('nav')//根据ID获取元素
//以下是伪数组，是getElements
document.getElementsByTagName('div') //根据标签获取元素
document.getElementsByClassName('W') //根据类名获取元素