querySelector – 学习画板

首页 » JavaScript » querySelector

querySelector

querySelector()方法接受一个CSS查询并返回匹配模式的第一个子孙元素,如果没有匹配的元素则返回null。请看下面的例子:

//获取body元素
var body = document.querySelector("body");
//获取ID为myDiv的元素
var myDiv = document.querySelecotr("#myDiv");
//获取第一个包含类selected的元素
var selected = document.querySelector(".selected");
//获取第一个包含类button的图像元素
var img = document.body.querySelector("img.button");

当querySelector()方法应用Document类型上时,它会尝试从文档元素开始匹配模式。如果应用与Element类型,查询则只会尝试从该元素的子孙节点中寻找匹配。

CSS查询可以根据需要复杂化或简单化。如果查询中有语法错误或者有不支持选择器,那么querySelector()或抛出一个错误。

querySelector()方法还接受可选的第二个参数,它是一个命名空间解析器,就是一个接受一个命名空间前缀并返回其相关URI的函数,类似于:

var nsresolver = function (prefix) {
        switch (prefix) {
        case "w3cmm":
            return "https://www.w3cmm.com";
            //此处其它代码
        }
    };

命名空间解析器对于在嵌入了其它语言诸如SVG或MathML的XHTML文档中执行查询非常有用,XML文档亦如此。CSS查询中的命名空间是使用一个管道来指定的,如下:

var svgImage = document.querySelector("svg|svg", function (prefix) {
    switch (prefix) {
    case :"svg":
        return "http://www.w3.rog/2000/svg";
    }
});

这个例子通过在文档中查找定义为<svg:svg>的元素返回了第一个SVG图像。当在查询中遇到了svg命名空间前缀时,则调用命名空间解析器函数来确定URI。没有命名空间解析器,则会抛出一个错误,因为查询引擎无法辨识svg命名空间前缀。

目前支持的浏览器包括 IE 8 +、 Firefox、 Chrome、Safari、Opera。

此文章发表在 JavaScript. 将 固定链接 加入收藏.