zoukankan      html  css  js  c++  java
  • querySelector()方法

    众多js库中最长用的一项功能,就是根据css选择符选择与某个模式匹配的DOM元素,jq的核心就是通过css选择付查询DOM文档取得元素的引用,从而抛开了

    getElementById()和getElementsByTagName()

    querySelector()方法

    调用的对象包括:Document(文档) DocumentFragment(文档片段) Element(元素)

    接受一个css选择符,返回与该模式匹配的第一个元素,如果没有找到则返回null;

    <div id='div1' class='div2'>123
            <div class='div3'>456</div>
        </div>
        <script>
            var body = document.querySelector('body');//类型选择
            var div1 = document.querySelector('#div1');//id选择
            div1.style.borderColor = 'black';
            var div2 = document.querySelector('.div2');//类选择
            div1.style.color = 'black';
            var div3 = document.body.querySelector('div.div3');//类选择内的第一个div元素
            div3.style.borderColor = 'red';
        </script>

     获取文档中第一个<p>元素:

    document.querySelector('p');

    获取文档中class='example'的第一个元素:

    获取文档中id='example'的第一个元素:

    document.querySelector('.example');
    document.querySelector('#example');

     获取文档中有‘target’属性的第一个<a>元素

    document.querySelector('a[target]');

    假定你选择了两个选择器:<h2>和<h3>元素

    以下代码将为文档的第一个<h2>元素添加背景元素

    <h2>A h2 element</h2>
    <h3>A h3 element</h3>
    document.querySelector('h2,h3').style.backgroundColor = 'red';

    如果<h3> 元素位于<h2>元素之前,h3元素仙贝更改元素

    <h3>A h2 element</h3>
    <h2>A h3 element</h2>
    document.querySelector('h2,h3').style.backgroundColor = 'red';

     获取文档中 class="example" 的第一个 <p> 元素:

    <h2 class="example">class="example" 的标题</h2>
    <p class="example">class="example" 的段落。</p> 
    <p>点击按钮为第一个带有 class="example" 的 p 元素添加背景颜色。</p>
    <button onclick="myFunction()">点我</button>
    <script>
    function myFunction() {
     document.querySelector("p.example").style.backgroundColor = "red";
    }
    </script>

     实例:属性选择符和class(或ID)选择符的区别 

    <body>
        <p index='klkx'>456</p>
        <a index='klkx' class='p1' id='p2'>123</a>
        <div index='klkx' class='p1' id='p2'>789</div>
        <script>
            var s1 = document.querySelector('a[index]');
            var s2 = document.querySelector('div.p1');//ID选择var s2 = document.querySelector('div#p2');
            s1.style.color = 'red';
            s2.style.color = 'yellow';
        </script>
     </body>
  • 相关阅读:
    n8n 基于node 的流程自动化工具
    kubectl-trace 基于bpftrace 的kubernetes 集群性能分析工具
    bcc 基于bpf 分析linux 系统性能的强大工具包
    使用arthas 生成火焰图分析jvm
    openjdk11 stretch基础镜像无法找到对应openjdk dbg 包的问题
    async-profiler 容器使用常见问题
    使用jattach 在host 节点查看容器jvm信息
    使用async-profiler简单分析zeebe 工作流引擎的性能
    minio select api 试用
    使用zeebe DebugHttpExporter 查看zeebe 工作流信息
  • 原文地址:https://www.cnblogs.com/jokes/p/9497201.html
Copyright © 2011-2022 走看看