标签 获取元素 下的文章


var div = document.querySelector('div');

// 封装
		
function $(str){
    var div = document.querySelector(str);		
    return div;
}

// 简化
// 去掉变量，直接返回

function $(str){
    return document.querySelector(str);
}



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        function $(str){
            return document.querySelector(str);
        }

        $('div').style.backgroundColor = 'yellow';

    </script>
</body>
</html>



<!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';