jQuery や Prototype などの他のフレームワークのラインに沿って、 "querySelector" という名前を短縮すると便利です:

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);

(Firefox の Web コンソールを使用している間は、上記の機能は自動的に利用可能です。)

XUL と XML の両方を簡単にサポートすることができます (次の代替アプローチは、ChromeWindow.prototype または Window.prototype を追加したり、this.document.querySelector にアクセスしたり、jQuery スタイルのチェーンに続いて $() のプロトタイプメソッドを含む 'this' を返すことです):

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'));

単純なXMLの場合、# 'id' セレクタは 'id' 属性では機能しないことに注意してください (このような名前付き属性は HTML や XUL にはありますが、XML では必ずしも ID 型である必要はない) xml:id で動作します。

しかし、プレフィックスのないアトリビュート (「id」など。しかし xml:id:http://www.w3.org/TR/selectors-api/#resolving ではない) をターゲットとする属性セレクタでも機能します (CSS3 名前空間の属性セレクタ:http://www.w3.org/TR/css3-selectors/#attrnmsp および潜在的な xml:id as#:http://www.w3.org/TR/css3-selectors/#id-selectors をサポートしています)。

ドキュメントのタグと貢献者

タグ: 
このページの貢献者: silverskyvicto
最終更新者: silverskyvicto,