From a065e04d529da1d847b5062a12c46d916408bf32 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 21:46:22 -0500 Subject: update based on https://github.com/mdn/yari/issues/2028 --- files/ja/code_snippets/queryselector/index.html | 99 ------------------------- 1 file changed, 99 deletions(-) delete mode 100644 files/ja/code_snippets/queryselector/index.html (limited to 'files/ja/code_snippets/queryselector/index.html') diff --git a/files/ja/code_snippets/queryselector/index.html b/files/ja/code_snippets/queryselector/index.html deleted file mode 100644 index 6662d876ab..0000000000 --- a/files/ja/code_snippets/queryselector/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: QuerySelector -slug: Code_snippets/QuerySelector -tags: - - DOM -translation_of: Archive/Add-ons/Code_snippets/QuerySelector ---- -

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 をサポートしています)。

-- cgit v1.2.3-54-g00ecf