javascript中的querySelector()各种引用

最新推荐文章于 2024-02-15 08:05:26 发布

weixin_51855195

最新推荐文章于 2024-02-15 08:05:26 发布

阅读量1.1k

点赞数 2

本文链接：https://blog.csdn.net/weixin_51855195/article/details/115284036

版权

querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。
这个真的不是我想的那么简单呀呀呀，可以直接控制台输出也可以进行定义选择要输出的元素，在进行颜色定义，

<!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>Document</title>
</head>
<body>
//这里就是控制台输出然后输出格式是定义的完整句式全部输出
    <div id="contatiner">huang</div>
    <script>
        var destination=document.querySelector("#contatiner");
        console.log(destination);//输出的结果为  <div id="contatiner">huang</div>
    </script>
</body>
</html>

然后这里是相关的引用就是红红的框框进行突出

<!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>Document</title>
    <style>
       a[target]{ 
           background-color:yellow;
       }
        </style>
</head>
<body>
    <!-- querySelector()只能获取第一个元素-->
    <!-- 获取文档中第一个p元素 -->
    <p>这是第一个P与元素</p>
    <p>这也是一个p与元素</p>
    <p>点击按按钮修改文档中第一个p与元素的背景颜色</p>
    <button onclick="myfunction()">点击我</button>
    <script>
        function myfunction(){
            document.querySelector("p").style.background="red";
        }
        //也可以这样子写
          var desination=document.querySelector("p")
        console.log(desination);//但这里是控制台输出，然后输出格式是 <p>这是第一个P与元素</p>
    </script>





    <!-- 获取文档中class="example"的第一个exmple元素 -->
    <h1 class="example">class="example"的标题</h1>
    <p class="example">class="example"的段落</p>
    <p>点击按钮为第一个class="example"的元素添加背景颜色</p>
    <button onclick="bbtn()">点我</button>
    <script>
        function bbtn(){
            document.querySelector(".example").style.background="red";
        }
    </script>




    <!-- 获取文档中calss="example"中的第一个<p>元素 -->
        <h2 class="example">class="example"的标题</h2>
        <p1 class="example">class="example"的段落</p1>
        <p>点击按钮为第一个class="example"的元素添加背景颜色</p>
        <button onclick="btn()">点我</button>
        <script>
            function btn(){
                document.querySelector("p1.example").style.background="red";
            }
        </script>



        <!-- 假定你选择了两个选择器: <h3> 和 <h4> 元素,以下代码将为文档的第一个 <h3> 元素添加背景颜色： -->
            <h3> h3 元素</h3>
            <h4> h4 元素</h4>
            <script>
            document.querySelector("h3,h4").style.backgroundColor = "red";
            </script>



        <!-- 但是，如果文档中 <h6> 元素位于 <h5> 元素之前，<h6> 元素将会被设置指定的背景颜色。 -->
        <h6>h6元素</h6>
        <h5>h5元素</h5>
        <script>
            document.querySelector("h5,h6").style.backgroundColor="red";

        </script>



        <!-- 获取文档中有 "target" 属性的第一个 <a> 元素： -->
    <p>CSS选择器a[target]确保所有有target属性的链接背景颜色为黄色：</p>
    <a href="//www.w3csschool.cc">w3csschool.cc</a>
    <a href="//www.disney.com" target="_blank">disney.com</a>
    <a href="//www.wikipedia.org" target="_top">wikipedia.org</a>
    <p>点击按钮为带有target属性连接添加红色背景</p>
    <button onclick="myFunction()">点击</button>
    <script>
        function myFunction(){
            document.querySelector("a[target]").style.border="10px solid red"
        }
    </script>
</body>
</html>

在这里插入图片描述

weixin_51855195

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
javascript中的querySelector()各种引用

javascript中的querySelector()各种引用，在我看来它的作用就是选择一个元素，然后在定义颜色，突出强调的作用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content
复制链接

扫一扫