Js获取元素

陌上花 2021-03-06 01:22:51

分类： JavaScript 1506 0


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="box" class="box1">
        <a href="#">html</a>
        <a href="#">css</a>
        <a href="#">javascript</a>
    </div>
</body>

</html>

getElementById

通过id去获取元素


document.getElementById('box')

querySelector

可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素


// 使用id去选中
document.querySelector('#box')

// 使用class去选中
document.querySelector('.box1')

// 使用元素去选中
document.querySelector('div')

// 使用父子元素去选中的写法
document.querySelector('body div')
// 使用父子元素去选中div下的a元素时，querySelector只返回匹配的第一个元素
document.querySelector('.box1 a')

querySelectorAll

document.querySelectorAll()方法返回文档中与指定的CSS选择器或者标签等匹配的所有元素


// 获取页面中所有的 <a> 元素
document.querySelectorAll('a');

// 获取id为box元素下所有的 <a>  元素
let oAs = document.querySelectorAll('#box a');
console.log(oAs.length);

// 获取class为box1元素下所有的 <a>  元素
let oAs = document.querySelectorAll('.box1 a');
// 设置第二个a元素的字体颜色为白色
oAs[1].style.color = '#fff';

Js获取元素

getElementById

querySelector

querySelectorAll

共 0 条评论关于 “Js获取元素”