querySelector()方法

标签: querySelector JavaScrit

顶[10] 分享到发表评论(0) 编辑词条

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

//获取body元素

var body = document.querySelector("body");

//获取ID为myDiv的元素

var myDiv = document.querySelector("#myDiv");

//获取第一个包含class值为selected的元素

var selected = document.querySelector(".selected");

//获取第一个包含class值为button的图像元素

var img = document.body.querySelector("img.button");

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

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

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

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

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

var svgImage = document.querySelector("svg|svg",function(prefix){
    switch(prefix){
        case "svg":
            return "http://www.w3.org/2000/svg";
            //此处其他代码
    }
});

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