0
点赞
收藏
分享

微信扫一扫

JS中的元素获取

Java架构领域 2022-05-04 阅读 44

一、元素的获取方法

1.getElementsByTagName :根据标签名获取元素,返回一个数组;

2.getElementsByClassName:根据类名获取元素,返回一个数组;

3.getElementsById:根据id名获取元素;

4.querySelector:获取一个元素。推荐使用 用法类似写css;

5.querySelectorAll:返回一个元素数组。

console结果如图所示:

 

二、代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素的获取方法</title>
</head>

<body>
    <p>我是p标签</p>
    <p>我是p标签</p>
    <div class="d1">我是div1</div>
    <div class="d2">我是div2</div>
    <div id="d3">我是div3</div>

</body>
<script>
    // 通过标签名获取元素
    var ps = document.getElementsByTagName("p");
    console.log(ps)
        // 给p标签设置背景颜色
    ps[0].style.backgroundColor = 'red';
    //通过类名获取元素
    var d1 = document.getElementsByClassName("d1");
    console.log(d1)
        // 给d1设置背景颜色
    d1[0].style.backgroundColor = 'pink';
    // 通过id名获取元素
    var d3 = document.getElementById("d3");
    console.log(d3)
        // 给d3设置背景颜色
    d3.style.backgroundColor = 'black';
    var ps1 = document.querySelectorAll('body>p')
    console.log(ps1)
</script>

</html>

图如图所示:

 

举报

相关推荐

0 条评论