blob: 6662d876abde1c9436fcfc6c9363547bb55fe7a5 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
---
title: QuerySelector
slug: Code_snippets/QuerySelector
tags:
- DOM
translation_of: Archive/Add-ons/Code_snippets/QuerySelector
---
<p>jQuery や Prototype などの他のフレームワークのラインに沿って、 "querySelector" という名前を短縮すると便利です：</p>
<pre class="brush: js">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);
</pre>
<p>(Firefox の <a href="/ja/docs/Tools/Web_Console">Web コンソール</a>を使用している間は、上記の機能は自動的に利用可能です。)</p>
<p>XUL と XML の両方を簡単にサポートすることができます (次の代替アプローチは、ChromeWindow.prototype または Window.prototype を追加したり、this.document.querySelector にアクセスしたり、jQuery スタイルのチェーンに続いて $() のプロトタイプメソッドを含む 'this' を返すことです)：</p>
<pre class="brush: js">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>
</pre>
<pre class="brush: js">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>
</pre>
<pre class="brush: js">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'
</pre>
<pre class="brush: js">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'));
</pre>
<p>単純なXMLの場合、# 'id' セレクタは 'id' 属性では機能しないことに注意してください (このような名前付き属性は HTML や XUL にはありますが、XML では必ずしも ID 型である必要はない) <a href="https://developer.mozilla.org/en/xml/xml:id" title="en/xml/id">xml:id</a> で動作します。</p>
<p>しかし、プレフィックスのないアトリビュート (「id」など。しかし xml:id：<a class="external external-icon" href="http://www.w3.org/TR/selectors-api/#resolving" rel="freelink">http://www.w3.org/TR/selectors-api/#resolving</a> ではない) をターゲットとする属性セレクタでも機能します (CSS3 名前空間の属性セレクタ：<a class="external external-icon" href="http://www.w3.org/TR/css3-selectors/#attrnmsp" rel="freelink">http://www.w3.org/TR/css3-selectors/#attrnmsp</a> および潜在的な xml:id as＃：<a class="external external-icon" href="http://www.w3.org/TR/css3-selectors/#id-selectors" rel="freelink">http://www.w3.org/TR/css3-selectors/#id-selectors</a> をサポートしています)。</p>
|
