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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
|
---
title: QuerySelector
slug: Mozilla/Add-ons/Code_snippets/QuerySelector
tags:
- $
- $$
- querySelector
translation_of: Archive/Add-ons/Code_snippets/QuerySelector
---
<p> {{ fx_minversion_header(3.5) }}</p>
<p>沿着其他框架，如jQuery或Prototype, 缩短“querySelector”的名称可以很方便：</p>
<pre class="brush: js"> HTMLDocument.prototype.$ = function (selector) {
// Only for HTML
return this.querySelector(selector);
};
$(`div`);
HTMLDocument.prototype.$$ = function (selector) {
// Only for HTML
return this.querySelectorAll(selector);
};
$$(`div`);</pre>
<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>(请注意，在使用火狐浏览器控制台时，上述功能可自动使用.)</p>
<p> XUL 甚至 XML可以很简单的支持（有以下两种替代方法，添加ChromeWindow.prototype 或者 Window.prototype，访问 this.document.querySelector, 或者根据jQuery 风格的链接，即在每个原型的$()方法中返回的‘this'</p>
<pre class="brush: js">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>
</pre>
<pre class="brush: js">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>
</pre>
<pre class="brush: js">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'
</pre>
<pre class="brush: js">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'));
</pre>
<p>注意在XML中, # 'id'选择器将不能体现为'id'属性(因此一个这样名字的属性不一定是XML的ID，尽管他在HTML 和XUL中是这样的), 也不会对 <a href="/en/xml/xml:id" title="en/xml/id">xml:id</a> 起作用.</p>
<p>然而，它将工作于指向没有无前缀属性选择器 (例如'id',但是不是 xml:id: <a class="external" href="http://www.w3.org/TR/selectors-api/#resolving" rel="freelink">http://www.w3.org/TR/selectors-api/#resolving</a>) (即使 CSS3 支持命名空间属性选择器: <a class="external" href="http://www.w3.org/TR/css3-selectors/#attrnmsp" rel="freelink">http://www.w3.org/TR/css3-selectors/#attrnmsp</a> 以及可能将xml:id 当作 #: <a class="external" href="http://www.w3.org/TR/css3-selectors/#id-selectors" rel="freelink">http://www.w3.org/TR/css3-selectors/#id-selectors</a> ).</p>
|
