美文网首页
【DOM扩展】选择符API

【DOM扩展】选择符API

作者: Wonder233 | 来源:发表于2017-11-22 10:33 被阅读0次

    Selectors API是由W3C发起制定的一个标准,致力于让浏览器原生支持CSS查询
    selectors API Level 1 的核心方法是两个:

    • querySelector()
    • querySelectorAll()

    在兼容的浏览器中,可以通过Document及Element类型的实例调用它们。

    目前已完全支持Selectors API Level 1 的浏览器由IE 8+、Firefox 3.5+、Safari 3.1+、Chrome和Opera 10+。

    querySelector()方法

    /**
     * querySelector()
     * param:接收一个CSS选择符
     * return:返回与该模式匹配的第一个元素;若没有找到匹配的元素,返回null
     */
    
    //取得body元素
    var body = document.querySelector("body");
    
    //取得ID名为“myDiv”元素
    var div = document.querySelector("#myDiv");
    
    //取得类为“selected”元素
    var selected = document.querySelector(".selected");
    
    //取得类为“button”的第一个图像元素
    var img = document.querySelector("img.button");
    

    querySelectorAll()方法

    /**
     * querySelectorAll()
     * param:接收一个CSS选择符
     * return:返回与该模式匹配的NodeList实例;若没有找到匹配的元素,返回null
     * 实际上,返回的值是带有所有属性和方法的NodeList,而其底层实现则类似一组元素的快照,
     * 而非不断的对文档进行搜索的动态查询。这样可以避免使用NodeList对象通常会引起的大多数性能问题。
     */
    
    //取得某<div>中所有<em>元素(类似于getElementsByTagName("em")
    var ems = document.getElementById("myDiv").querySelectorAll("em");
    
    //取得类为“selected”的所有元素
    var selecteds = document.querySelectorAll(".selected");
    
    //取得所有<p>元素中的所有<strong>元素
    var strongs = document.querySelectorAll("p strong");
    

    相关文章

      网友评论

          本文标题:【DOM扩展】选择符API

          本文链接:https://www.haomeiwen.com/subject/gqrnvxtx.html