沿着其他框架,如jQuery或Prototype, 缩短“querySelector”的名称可以很方便:

    HTMLDocument.prototype.$ = function (selector) { 
        // Only for HTML
        return this.querySelector(selector);
    };
    $(`div`);
    HTMLDocument.prototype.$$ = function (selector) { 
        // Only for HTML
        return this.querySelectorAll(selector);
    };
    $$(`div`);
function $ (selector, el) {
     if (!el) {el = document;}
     return el.querySelector(selector);
}
function $$ (selector, el) {
     if (!el) {el = document;}
     return el.querySelectorAll(selector);
     // Note: the returned object is a NodeList.
     // If you'd like to convert it to a Array for convenience, use this instead:
     // return Array.prototype.slice.call(el.querySelectorAll(selector));
}
alert($('#myID').id);

(请注意,在使用火狐浏览器控制台时,上述功能可自动使用.)

 XUL 甚至 XML可以很简单的支持(有以下两种替代方法,添加ChromeWindow.prototype 或者 Window.prototype,访问 this.document.querySelector, 或者根据jQuery 风格的链接,即在每个原型的$()方法中返回的‘this'

HTMLDocument.prototype.$ = function (selector) { // 只用于HTML
    return this.querySelector(selector);
};

Example:

<h1>Test!</h1>
<script>
HTMLDocument.prototype.$ = function (selector) {
    return this.querySelector(selector); 
}; 
alert(document.$('h1')); // [object HTMLHeadingElement]
</script>
XULDocument.prototype.$ = function (selector) { // 只用于XUL
    return this.querySelector(selector);
};

Example:

<label value="Test!"/>
<script type="text/javascript"><![CDATA[
XULDocument.prototype.$ = function (selector) { // 只用于XUL
    return this.querySelector(selector);
};

alert(document.$('label')); // [object XULElement]
]]></script>
Document.prototype.$ = function (selector) { // 只用于XML
    return this.querySelector(selector);
};
var foo = document.implementation.createDocument('someNS', 'foo', null); // Create an XML document <foo xmlns="someNS"/>
var bar = foo.createElementNS('someNS', 'bar'); // add <bar xmlns="someNS"/>
foo.documentElement.appendChild(bar);
alert(foo.$('bar').nodeName); // gives 'bar'
Element.prototype.$ = function (selector) { // 可用于HTML,XUL,XML
    return this.querySelector(selector);
};

HTML 例子:
<h1><a>Test!<a/></h1>
<script>
Element.prototype.$ = function (selector) {
    return this.querySelector(selector); 
};
alert(document.getElementsByTagName('h1')[0].$('a').nodeName); // 'A'

XUL 例子:
<hbox><vbox/></hbox>
<script type="text/javascript"><![CDATA[
Element.prototype.$ = function (selector) {
    return this.querySelector(selector); 
};
var XULNS = 'http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul';
alert(document.getElementsByTagNameNS(XULNS, 'hbox')[0].$('vbox').nodeName); // vbox
]]></script>

XML 例子:
<foo xmlns="someNS"><bar/></foo> in document earlier
var foo = document.getElementsByTagNameNS('someNS', 'foo')[0];
alert(foo.$('bar'));

注意在XML中,  # 'id'选择器将不能体现为'id'属性(因此一个这样名字的属性不一定是XML的ID,尽管他在HTML 和XUL中是这样的), 也不会对 xml:id 起作用.

然而,它将工作于指向没有无前缀属性选择器 (例如'id',但是不是 xml:id: http://www.w3.org/TR/selectors-api/#resolving) (即使 CSS3 支持命名空间属性选择器: http://www.w3.org/TR/css3-selectors/#attrnmsp 以及可能将xml:id 当作 #: http://www.w3.org/TR/css3-selectors/#id-selectors ).

文档标签和贡献者

标签: 
 此页面的贡献者: ZZES_REN, jaiJia, xgqfrms-GitHub
 最后编辑者: ZZES_REN,