MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

QuerySelector

这篇翻译不完整。请帮忙从英语翻译这篇文章

 

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

    HTMLDocument.prototype.$ = function (selector) { 
        // Only for HTML
        return this.querySelector(selector);
    };
    $(`div`);
    HTMLDocument.prototype.$S = 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);

(Note that while using the Firefox Web Console, the above functions are available automatically.)

Both XUL and even XML can be easily made supportable (an alternative approach to the following would be to add ChromeWindow.prototype or Window.prototype, accessing this.document.querySelector, or following the jQuery style of chaining by returning 'this' within each prototype method of $()):

HTMLDocument.prototype.$ = function (selector) { // Only for 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) { // Only for XUL
    return this.querySelector(selector);
};

Example:

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

alert(document.$('label')); // [object XULElement]
]]></script>
Document.prototype.$ = function (selector) { // Only for plain 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) { // Works for HTML, XUL, and plain XML
    return this.querySelector(selector);
};

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

XUL example:
<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 example:
<foo xmlns="someNS"><bar/></foo> in document earlier
var foo = document.getElementsByTagNameNS('someNS', 'foo')[0];
alert(foo.$('bar'));

Note that for plain XML, the # 'id' selector will not work with an 'id' attribute (since a such-named attribute need not necessarily be of type ID in XML, though it is in HTML and XUL), nor will it work with xml:id.

However, it will work with attribute selectors that target non-prefixed attributes (such as 'id', but not xml:id: http://www.w3.org/TR/selectors-api/#resolving) (even though CSS3 does support namespaced attribute selectors: http://www.w3.org/TR/css3-selectors/#attrnmsp and potentially xml:id as #: http://www.w3.org/TR/css3-selectors/#id-selectors ).

文档标签和贡献者

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