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>
  • 相关阅读:
    Window 窗口类
    使用 Bolt 实现 GridView 表格控件
    lua的table库
    Windows编程总结之 DLL
    lua 打印 table 拷贝table
    使用 xlue 实现简单 listbox 控件
    使用 xlue 实现 tips
    extern “C”
    COleVariant如何转换为int double string cstring
    原来WIN32 API也有GetOpenFileName函数
  • 原文地址:https://www.cnblogs.com/jokes/p/9497201.html
Copyright © 2011-2022 走看看