HTML5新增的3种selector方法

最新推荐文章于 2024-06-22 11:24:57 发布

陌上浮屠

最新推荐文章于 2024-06-22 11:24:57 发布

阅读量4.8k

点赞数

分类专栏： h5

h5 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1：querySelector()方法接收一个CSS选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="height: 100%;">
<div class="box" id="box" style="height: 200px;">
    <ul class="list" style="height:100px">
        <li class="in" style="height: 30px;">1</li>
        <li class="in" style="height: 30px;" title="test">2</li>
        <li class="in" style="height: 30px;">3</li>
    </ul>
</div>
<script>
    //因为没有.null类名，所以返回null
    var oNull = document.querySelector('.null');
    console.log(oNull);//null
    //通过<body>标签取得元素
    var body = document.querySelector("body");
    console.log(body.style.height);//100%
    //通过id属性取得元素
    var oBox = document.querySelector('#box');
    console.log(oBox.style.height);//200px
    //通过结合元素的类选择器取得元素
    var oList = document.querySelector('ul.list');
    console.log(oList.style.height);//100px
    //通过类名取得元素
    var oIn = document.querySelector('.in');
    console.log(oIn.innerHTML);//1
    //通过属性选择器取得元素
    var oTest = body.querySelector('[title="test"]');
    console.log(oTest.innerHTML);//2
</script>
</body>
</html>

2：querySelectorAll()接收一个CSS选择符，返回一个类数组对象NodeList的实例。具体来说，返回的值实际上是带有所有属性和方法的NodeList，而其底层实现则类似于一组元素的快照，而非不断对文档进行搜索的动态查询。这样实现可以避免使用NodeList对象通常会引起的大多数性能问题。只要传给querySelectorAll()方法的CSS选择符有效，该方法都会返回一个NodeList对象，而不管找到多少匹配的元素

　　没有匹配元素时，返回空的类数组对象，而不是null
　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="height: 100%;">
<div class="box" id="box" style="height: 200px;">
    <ul class="list" style="height:100px">
        <li class="in" style="height: 30px;">1</li>
        <li class="in" style="height: 30px;" title="test">2</li>
        <li class="in" style="height: 30px;">3</li>
    </ul>
</div>
<script>
    //返回[]
    var oNull = document.querySelectorAll('.null');
    console.log(oNull);
    //取得body元素
    var body = document.querySelectorAll("body")[0];
    console.log(body.style.height);//100%
    //取得所有class为"in"的元素
    var oIn = document.querySelectorAll('.in');
    for(var i = 0 ; i < oIn.length; i++){
        console.log(oIn[i].innerHTML);//1,2,3
    }
    //取得title属性为test的元素
    var oTest = body.querySelectorAll('[title="test"]');
    console.log(oTest);//[li.in]
</script>
</body>
</html>

这里写图片描述

3：matchesSelector()方法接收一个CSS选择符参数，如果调用元素与该选择符相匹配，返回true；否则返回false

function matchesSelector(element,selector){
        if(element.matchesSelector){
            return element.matchesSelector(selector);
        }
        if(element.msMatchesSelector){
            return element.msMatchesSelector(selector);
        }
        if(element.mozMatchesSelector){
            return element.mozMatchesSelector(selector);
        }
        if(element.webkitMatchesSelector){
            return element.webkitMatchesSelector(selector);
        }
    }
    console.log(matchesSelector(document.body,'#test'));//true

4：
与getElementById()和getElementsByTagName()方法不同，querySelector()和querySelectorAll()方法得到的类数组对象是非动态实时的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="height: 100%;">
<div id="container">
    <div>1</div>
    <div>2</div>
</div>
<script>
    var container = document.getElementById('container');
    var divOne = container.querySelector('div:last-child');
    var divAll = container.querySelectorAll('div');
    console.log(container.children.length);//2
    console.log(divOne.innerHTML);//2
    console.log(divAll.length);//2

    var newDiv = document.createElement('div');
    newDiv.innerHTML = 3;
    container.appendChild(newDiv);

    console.log(container.children.length);//3
    //由于querySelector不是实时的，所以其保存的仍然是原来第二个div的值
    console.log(divOne.innerHTML);//2
    //由于querySelectorAll不是实时的，所以仍然只保存了两个div元素
    console.log(divAll.length);//2

    console.log(container.querySelector('div:last-child').innerHTML);//3
    console.log(container.querySelectorAll('div').length);//3
</script>
</body>
</html>

陌上浮屠

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTML5新增的3种selector方法

1：querySelector()方法接收一个CSS选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null。&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&
复制链接

扫一扫

专栏目录