2021/09/15 時点の英語版に同期

8 files changed, 396 insertions, 370 deletions

diff --git a/files/ja/web/api/element/after/index.md b/files/ja/web/api/element/after/index.md
index 52186ca2fb..40344ddd30 100644
--- a/files/ja/web/api/element/after/index.md
+++ b/files/ja/web/api/element/after/index.md
@@ -4,40 +4,38 @@ slug: Web/API/Element/after
 tags:
   - API
   - DOM
-  - Method
+  - メソッド
   - Node
-  - Reference
+  - リファレンス
 browser-compat: api.Element.after
 translation_of: Web/API/Element/after
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p><code><strong>Element.after()</strong></code> は、<code>Element</code> の親の子リストの、<code>Element</code> の直後に、 {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトのセットを挿入します。 {{domxref("DOMString")}} オブジェクトは {{domxref("Text")}} ノードと等価なノードとして挿入されます。</p>
+**`Element.after()`** は、一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトをこの `Element` の親の子リストの、 `Element` の直後に挿入します。 {{domxref("DOMString")}} オブジェクトは {{domxref("Text")}} ノードと等価なノードとして挿入されます。
 
-<h2 id="Syntax">構文</h2>
+## 構文
 
-<pre class="brush: js">
+```js
 after(... nodes)
-</pre>
+```
 
-<h3 id="Parameters">引数</h3>
+### 引数
 
-<dl>
-  <dt><code>nodes</code></dt>
-  <dd>挿入する一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトです。</dd>
-</dl>
+- `nodes`
+  - : 挿入する一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトです。
 
-<h3 id="Exceptions">例外</h3>
+### 例外
 
-<ul>
-  <li>{{domxref("HierarchyRequestError")}}: ノードを階層内の指定の位置に挿入できません。</li>
-</ul>
+- `HierarchyRequestError` {{DOMxRef("DOMException")}}
+  - : ノードが階層構造の中の指定された位置に挿入できなかったときに発生します。
 
-<h2 id="Examples">例</h2>
+## 例
 
-<h3 id="Inserting_an_element">要素の挿入</h3>
+### 要素の挿入
 
-<pre class="brush: js">let container = document.createElement("div");
+```js
+let container = document.createElement("div");
 let p = document.createElement("p");
 container.appendChild(p);
 let span = document.createElement("span");
@@ -45,23 +43,26 @@ let span = document.createElement("span");
 p.after(span);
 
 console.log(container.outerHTML);
-// "&lt;div&gt;&lt;p&gt;&lt;/p&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;"
-</pre>
+// "<div><p></p><span></span></div>"
+```
 
-<h3 id="Inserting_text">テキストの挿入</h3>
+### テキストの挿入
 
-<pre class="brush: js">let container = document.createElement("div");
+```js
+let container = document.createElement("div");
 let p = document.createElement("p");
 container.appendChild(p);
 
 p.after("Text");
 
 console.log(container.outerHTML);
-// "&lt;div&gt;&lt;p&gt;&lt;/p&gt;Text&lt;/div&gt;"</pre>
+// "<div><p></p>Text</div>"
+```
 
-<h3 id="Inserting_an_element_and_text">要素とテキストの挿入</h3>
+### 要素とテキストの挿入
 
-<pre class="brush: js">let container = document.createElement("div");
+```js
+let container = document.createElement("div");
 let p = document.createElement("p");
 container.appendChild(p);
 let span = document.createElement("span");
@@ -69,22 +70,21 @@ let span = document.createElement("span");
 p.after(span, "Text");
 
 console.log(container.outerHTML);
-// "&lt;div&gt;&lt;p&gt;&lt;/p&gt;&lt;span&gt;&lt;/span&gt;Text&lt;/div&gt;"</pre>
+// "<div><p></p><span></span>Text</div>"
+```
 
-<h2 id="Specification">仕様書</h2>
+## 仕様書
 
 {{Specifications}}
 
-<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+## ブラウザーの互換性
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="See_also">関連情報</h2>
+## 関連情報
 
-<ul>
-  <li>{{domxref("Element.before()")}}</li>
-  <li>{{domxref("Element.append()")}}</li>
-  <li>{{domxref("Node.appendChild()")}}</li>
-  <li>{{domxref("Element.insertAdjacentElement()")}}</li>
-  <li>{{domxref("NodeList")}}</li>
-</ul>
+- {{domxref("Element.before()")}}
+- {{domxref("Element.append()")}}
+- {{domxref("Node.appendChild()")}}
+- {{domxref("Element.insertAdjacentElement()")}}
+- {{domxref("NodeList")}}
diff --git a/files/ja/web/api/element/append/index.md b/files/ja/web/api/element/append/index.md
index 82feaa6f91..ffe3f44068 100644
--- a/files/ja/web/api/element/append/index.md
+++ b/files/ja/web/api/element/append/index.md
@@ -4,97 +4,96 @@ slug: Web/API/Element/append
 tags:
   - API
   - DOM
-  - Method
+  - メソッド
   - Node
   - Element
-  - Reference
+  - リファレンス
 browser-compat: api.Element.append
 translation_of: Web/API/Element/append
 original_slug: Web/API/ParentNode/append
 ---
-<p>{{APIRef("DOM")}}</p>
+{{APIRef("DOM")}}
 
-<p><strong><code>Element.append()</code></strong> メソッドは、一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトを <code>Element</code> のの最後の子の後に挿入します。 {{domxref("DOMString")}} オブジェクトは等価な {{domxref("Text")}} ノードとして挿入されます。</p>
+**`Element.append()`** メソッドは、一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトを `Element` のの最後の子の後に挿入します。 {{domxref("DOMString")}} オブジェクトは等価な {{domxref("Text")}} ノードとして挿入されます。
 
-<p>{{domxref("Node.appendChild()")}} との違いは次の通りです。</p>
+{{domxref("Node.appendChild()")}} との違いは次の通りです。
 
-<ul>
-  <li><code>Element.append()</code> は {{domxref("DOMString")}} も追加することができますが、<code>Node.appendChild()</code> は{{domxref("Node")}} オブジェクトのみを受け付けます。</li>
-  <li><code>Element.append()</code> には返値がありませんが、<code>Node.appendChild()</code> は追加された{{domxref("Node")}} オブジェクトを返します。</li>
-  <li><code>Element.append()</code> は複数のノードや文字列を追加することができますが、<code>Node.appendChild()</code> はノードを 1 つだけしか追加することができせん。</li>
-</ul>
+- `Element.append()` は {{domxref("DOMString")}} も追加することができますが、`Node.appendChild()` は{{domxref("Node")}} オブジェクトのみを受け付けます。
+- `Element.append()` には返値がありませんが、`Node.appendChild()` は追加された {{domxref("Node")}} オブジェクトを返します。
+- `Element.append()` は複数のノードや文字列を追加することができますが、`Node.appendChild()` はノードを 1 つだけしか追加することができせん。
 
-<h2 id="Syntax">構文</h2>
+## 構文
 
-<pre class="brush: js">
+```js
 append(...nodesOrDOMStrings)
-</pre>
+```
 
-<h3 id="Parameters">引数</h3>
+### 引数
 
-<dl>
-  <dt><code>nodesOrDOMStrings</code></dt>
-  <dd>挿入する一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトです。</dd>
-</dl>
+- `nodesOrDOMStrings`
+  - : 挿入する一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトです。
 
-<h3 id="Exceptions">例外</h3>
+### 例外
 
-<ul>
-  <li>{{domxref("HierarchyRequestError")}}: ノードを階層の特定の位置に挿入することができません。</li>
-</ul>
+- `HierarchyRequestError` {{DOMxRef("DOMException")}}
+  - : ノードが階層構造の中の指定された位置に挿入できなかったときに発生します。
 
-<h2 id="Examples">例</h2>
+## 例
 
-<h3 id="Appending_an_element">要素の追加</h3>
+### 要素の追加
 
-<pre class="brush: js">let div = document.createElement("div")
+```js
+let div = document.createElement("div")
 let p = document.createElement("p")
 div.append(p)
 
-console.log(div.childNodes) // NodeList [ &lt;p&gt; ]
-</pre>
+console.log(div.childNodes) // NodeList [ <p> ]
+```
 
-<h3 id="Appending_text">テキストの追加</h3>
+### テキストの追加
 
-<pre class="brush: js">let div = document.createElement("div")
+```js
+let div = document.createElement("div")
 div.append("Some text")
 
-console.log(div.textContent) // "Some text"</pre>
+console.log(div.textContent) // "Some text"
+```
 
-<h3 id="Appending_an_element_and_text">要素とテキストの追加</h3>
+### 要素とテキストの追加
 
-<pre class="brush: js">let div = document.createElement("div")
+```js
+let div = document.createElement("div")
 let p = document.createElement("p")
 div.append("Some text", p)
 
-console.log(div.childNodes) // NodeList [ #text "Some text", &lt;p&gt; ]</pre>
+console.log(div.childNodes) // NodeList [ #text "Some text", <p> ]
+```
 
-<h3 id="The_append_method_is_unscopable">append メソッドはスコープが効かない</h3>
+### append メソッドはスコープが効かない
 
-<p><code>append()</code> メソッドは <code>with</code> 文の中ではスコープが効きません。詳しくは {{jsxref("Symbol.unscopables")}} をご覧ください。</p>
+`append()` メソッドは `with` 文の中ではスコープが効きません。詳しくは {{jsxref("Symbol.unscopables")}} をご覧ください。
 
-<pre class="brush: js">let div = document.createElement("div")
+```js
+let div = document.createElement("div")
 
 with(div) {
   append("foo")
 }
-// ReferenceError: append is not defined </pre>
+// ReferenceError: append is not defined
+```
 
-
-<h2 id="Specifications">仕様書</h2>
+## 仕様書
 
 {{Specifications}}
 
-<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+## ブラウザーの互換性
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="See_also">関連情報</h2>
+## 関連情報
 
-<ul>
-  <li>{{domxref("Element.prepend()")}}</li>
-  <li>{{domxref("Node.appendChild()")}}</li>
-  <li>{{domxref("Element.after()")}}</li>
-  <li>{{domxref("Element.insertAdjacentElement()")}}</li>
-  <li>{{domxref("NodeList")}}</li>
-</ul>
+- {{domxref("Element.prepend()")}}
+- {{domxref("Node.appendChild()")}}
+- {{domxref("Element.after()")}}
+- {{domxref("Element.insertAdjacentElement()")}}
+- {{domxref("NodeList")}}
diff --git a/files/ja/web/api/element/before/index.md b/files/ja/web/api/element/before/index.md
index 652f38c95f..2bef18e920 100644
--- a/files/ja/web/api/element/before/index.md
+++ b/files/ja/web/api/element/before/index.md
@@ -4,39 +4,39 @@ slug: Web/API/Element/before
 tags:
   - API
   - DOM
-  - Method
+  - メソッド
   - Node
-  - Reference
+  - リファレンス
 browser-compat: api.Element.before
 translation_of: Web/API/Element/before
 original_slug: Web/API/ChildNode/before
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p><code><strong>Element.before()</strong></code> は一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトを、この <code>Element</code> の親の子リストの中、この <code>Element</code> の直前に挿入します。 {{domxref("DOMString")}} オブジェクトは {{domxref("Text")}} ノードと等価なノードとして挿入されます。</p>
+**`Element.before()`** は一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトを、この `Element` の親の子リストの中、この `Element` の直前に挿入します。 {{domxref("DOMString")}} オブジェクトは {{domxref("Text")}} ノードと等価なノードとして挿入されます。
 
-<h2 id="Syntax">構文</h2>
+## 構文
 
-<pre class="brush: js">before(... nodes)</pre>
+```js
+before(... nodes)
+```
 
-<h3 id="Parameters">引数</h3>
+### 引数
 
-<dl>
-	<dt><code>nodes</code></dt>
-	<dd>挿入する一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトです。</dd>
-</dl>
+- `nodes`
+  - : 挿入する一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトです。
 
-<h3 id="Exceptions">例外</h3>
+### 例外
 
-<ul>
-	<li>{{domxref("HierarchyRequestError")}}: 階層の指定の位置にノードを挿入できない。</li>
-</ul>
+- `HierarchyRequestError` {{DOMxRef("DOMException")}}
+  - : ノードが階層構造の中の指定された位置に挿入できなかったときに発生します。
 
-<h2 id="Examples">例</h2>
+## 例
 
-<h3 id="Inserting_an_element">要素の挿入</h3>
+### 要素の挿入
 
-<pre class="brush: js">let container = document.createElement("div");
+```js
+let container = document.createElement("div");
 let p = document.createElement("p");
 container.appendChild(p);
 let span = document.createElement("span");
@@ -44,23 +44,26 @@ let span = document.createElement("span");
 p.before(span);
 
 console.log(container.outerHTML);
-// "&lt;div&gt;&lt;span&gt;&lt;/span&gt;&lt;p&gt;&lt;/p&gt;&lt;/div&gt;"
-</pre>
+// "<div><span></span><p></p></div>"
+```
 
-<h3 id="Inserting_text">テキストの挿入</h3>
+### テキストの挿入
 
-<pre class="brush: js">let container = document.createElement("div");
+```js
+let container = document.createElement("div");
 let p = document.createElement("p");
 container.appendChild(p);
 
 p.before("Text");
 
 console.log(container.outerHTML);
-// "&lt;div&gt;Text&lt;p&gt;&lt;/p&gt;&lt;/div&gt;"</pre>
+// "<div>Text<p></p></div>"
+```
 
-<h3 id="Inserting_an_element_and_text">要素とテキストの挿入</h3>
+### 要素とテキストの挿入
 
-<pre class="brush: js">let container = document.createElement("div");
+```js
+let container = document.createElement("div");
 let p = document.createElement("p");
 container.appendChild(p);
 let span = document.createElement("span");
@@ -68,24 +71,22 @@ let span = document.createElement("span");
 p.before(span, "Text");
 
 console.log(container.outerHTML);
-// "&lt;div&gt;&lt;span&gt;&lt;/span&gt;Text&lt;p&gt;&lt;/p&gt;&lt;/div&gt;"</pre>
+// "<div><span></span>Text<p></p></div>"
+```
 
-
-<h2 id="Specification">仕様書</h2>
+## 仕様書
 
 {{Specifications}}
 
-<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+## ブラウザーの互換性
 
-<p>{{Compat}}</p>
+{{Compat}}
 
-<h2 id="See_also">関連情報</h2>
+## 関連情報
 
-<ul>
-  <li>{{domxref("Element.after()")}}</li>
-  <li>{{domxref("Element.append()")}}</li>
-  <li>{{domxref("Node.appendChild()")}}</li>
-  <li>{{domxref("Node.insertBefore()")}}</li>
-  <li>{{domxref("Element.insertAdjacentElement()")}}</li>
-  <li>{{domxref("NodeList")}}</li>
-</ul>
+- {{domxref("Element.after()")}}
+- {{domxref("Element.append()")}}
+- {{domxref("Node.appendChild()")}}
+- {{domxref("Node.insertBefore()")}}
+- {{domxref("Element.insertAdjacentElement()")}}
+- {{domxref("NodeList")}}
diff --git a/files/ja/web/api/element/closest/index.md b/files/ja/web/api/element/closest/index.md
index dd876b80aa..5cb1ccccda 100644
--- a/files/ja/web/api/element/closest/index.md
+++ b/files/ja/web/api/element/closest/index.md
@@ -3,56 +3,56 @@ title: Element.closest()
 slug: Web/API/Element/closest
 tags:
   - API
+  - CSS セレクター
   - DOM
   - Element
-  - Method
-  - Reference
   - メソッド
+  - リファレンス
+  - セレクター
+browser-compat: api.Element.closest
 translation_of: Web/API/Element/closest
 ---
-<div>{{APIRef('DOM')}}</div>
+{{APIRef('DOM')}}
 
-<div><code><strong>closest()</strong></code> メソッドは、要素とその親 (文書ルートに向かって) を、指定されたセレクター文字列に一致するノードが見つかるまで探索します。自分自身または一致する祖先を返します。そのような要素が存在しない場合は、 <code>null</code> を返します。
+**`closest()`** は {{domxref("Element")}} インターフェイスのメソッドで、この要素 ({{domxref("Element")}}) とその親階層に（文書ルートに向かって）、指定されたセレクター文字列に一致するノードが見つかるまで探索します。自分自身または一致する祖先を返します。そのような要素が存在しない場合は、 `null` を返します。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
-<pre class="syntaxbox">var <var>closestElement</var> = <var>targetElement</var>.closest(<var>selectors</var>);
-</pre>
+```js
+var closestElement = targetElement.closest(selectors);
+```
 
-<h3 id="Parameters" name="Parameters">引数</h3>
+### 引数
 
-<ul>
- <li><code><var>selectors</var></code> は {{domxref("DOMString")}} で、セレクターのリストを指定します。<br>
-  例: <code>p:hover, .toto + q</code></li>
-</ul>
+- `selectors` は {{domxref("DOMString")}} で、セレクターのリストを指定します。
+  例: `p:hover, .toto + q`
 
-<h3 id="Return_value" name="Return_value">返値</h3>
+### 返値
 
-<ul>
- <li><code><var>closestElement</var></code> は選択された要素の直近の祖先に当たる {{domxref("Element")}} です。 <code>null</code> になることがあります。</li>
-</ul>
+- `closestElement` は選択された要素の直近の祖先に当たる {{domxref("Element")}} です。 `null` になることがあります。
 
-<h3 id="Exceptions" name="Exceptions">例外</h3>
+### 例外
 
-<ul>
- <li><code><var>selectors</var></code> が妥当なセレクターリストの文字列ではない場合、 {{exception("SyntaxError")}} が投げられます。</li>
-</ul>
+- {{exception("SyntaxError")}} は `selectors` が妥当なセレクターリストの文字列ではない場合に発生します。
 
-<h2 id="Example" name="Example">例</h2>
+## 例
 
-<h3 id="HTML">HTML</h3>
+### HTML
 
-<pre class="brush: html">&lt;article&gt;
-  &lt;div id="div-01"&gt;Here is div-01
-    &lt;div id="div-02"&gt;Here is div-02
-      &lt;div id="div-03"&gt;Here is div-03&lt;/div&gt;
-    &lt;/div&gt;
-  &lt;/div&gt;
-&lt;/article&gt;</pre>
+```html
+<article>
+  <div id="div-01">Here is div-01
+    <div id="div-02">Here is div-02
+      <div id="div-03">Here is div-03</div>
+    </div>
+  </div>
+</article>
+```
 
-<h3 id="JavaScript">JavaScript</h3>
+### JavaScript
 
-<pre class="brush: js">var el = document.getElementById('div-03');
+```js
+var el = document.getElementById('div-03');
 
 var r1 = el.closest("#div-02");
 // id=div-02 である要素を返す
@@ -64,15 +64,18 @@ var r3 = el.closest("article &gt; div");
 // 親に article を持つ div である直近の祖先、ここでは div-01 を返す
 
 var r4 = el.closest(":not(div)");
-// div ではない直近の祖先、ここではもっとも外側の article を返す</pre>
+// div ではない直近の祖先、ここではもっとも外側の article を返す
+```
 
-<h2 id="Polyfill" name="Polyfill">ポリフィル</h2>
+## ポリフィル
 
-<p><code>Element.closest()</code> に対応していないブラウザーで、 <code>element.matches()</code> (または接頭辞付きの同等のもの、すなわち IE9+) に対応しているものには、ポリフィルがあります。</p>
+`Element.closest()` に対応していないブラウザーで、 `element.matches()` (または接頭辞付きの同等のもの、すなわち IE9+) に対応しているものには、ポリフィルがあります。
 
-<pre class="brush: js">if (!Element.prototype.matches) {
-  Element.prototype.matches = Element.prototype.msMatchesSelector ||
-                              Element.prototype.webkitMatchesSelector;
+```js
+if (!Element.prototype.matches) {
+  Element.prototype.matches =
+    Element.prototype.msMatchesSelector ||
+    Element.prototype.webkitMatchesSelector;
 }
 
 if (!Element.prototype.closest) {
@@ -82,68 +85,43 @@ if (!Element.prototype.closest) {
     do {
       if (Element.prototype.matches.call(el, s)) return el;
       el = el.parentElement || el.parentNode;
-    } while (el !== null &amp;&amp; el.nodeType === 1);
+    } while (el !== null && el.nodeType === 1);
     return null;
   };
-}</pre>
+}
+```
 
-<p>しかし、本当に IE 8 の対応が必要な場合は、以下のポリフィルがとても遅い処理ながら、結果を出すことができます。但し、 IE 8 は CSS 2.1 のセレクターにしか対応しておらず、本番のウェブサイトが極端に遅くなる原因となることがあります。</p>
+しかし、本当に IE 8 の対応が必要な場合は、以下のポリフィルがとても遅い処理ながら、結果を出すことができます。但し、 IE 8 は CSS 2.1 のセレクターにしか対応しておらず、本番のウェブサイトが極端に遅くなる原因となることがあります。
 
-<pre class="brush: js">if (window.Element &amp;&amp; !Element.prototype.closest) {
-  Element.prototype.closest =
-  function(s) {
+```js
+if (window.Element && !Element.prototype.closest) {
+  Element.prototype.closest = function(s) {
     var matches = (this.document || this.ownerDocument).querySelectorAll(s),
         i,
         el = this;
     do {
       i = matches.length;
-      while (--i &gt;= 0 &amp;&amp; matches.item(i) !== el) {};
-    } while ((i &lt; 0) &amp;&amp; (el = el.parentElement));
+      while (--i >= 0 && matches.item(i) !== el) {};
+    } while ((i < 0) && (el = el.parentElement));
     return el;
   };
 }
-</pre>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-element-closest', 'Element.closest()')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>初回定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
-
-<div>
-<p>{{Compat("api.Element.closest")}}</p>
-
-<h3 id="Compatibility_notes" name="Compatibility_notes">互換性のメモ</h3>
-
-<ul>
- <li>Edge 15-18 では、要素が最初に（直接的または間接的に）コンテキストオブジェクト、例えば通常の DOM の場合は {{domxref("Document")}} オブジェクトに接続されていない場合、 <code>document.createElement(tagName).closest(tagName)</code> が <code>null</code> を返します。</li>
-</ul>
-</div>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li>{{domxref("Element")}} インターフェイス</li>
- <li>
-  <div class="syntaxbox"><a href="/ja/docs/Web/Guide/CSS/Getting_started/Selectors">セレクターの構文</a></div>
- </li>
- <li>
-  <div class="syntaxbox">Other methods that take selectors: {{domxref("element.querySelector()")}} and {{domxref("element.matches()")}}.</div>
- </li>
-</ul>
-</div>
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+### 互換性のメモ
+
+- Edge 15-18 では、要素が最初に（直接的または間接的に）コンテキストオブジェクト、例えば通常の DOM の場合は {{domxref("Document")}} オブジェクトに接続されていない場合、 `document.createElement(tagName).closest(tagName)` が `null` を返します。
+
+## 関連情報
+
+- {{domxref("Element")}} インターフェイス
+- [セレクターの構文](/ja/docs/Learn/CSS/Building_blocks/Selectors)
+- セレクターを取る他のメソッド: {{domxref("element.querySelector()")}} および {{domxref("element.matches()")}}
diff --git a/files/ja/web/api/element/getattributens/index.md b/files/ja/web/api/element/getattributens/index.md
index ee03de1cab..7ec8113595 100644
--- a/files/ja/web/api/element/getattributens/index.md
+++ b/files/ja/web/api/element/getattributens/index.md
@@ -1,47 +1,100 @@
 ---
-title: element.getAttributeNS
+title: Element.getAttributeNS()
 slug: Web/API/Element/getAttributeNS
 tags:
+  - API
   - DOM
-  - Gecko
-  - 翻訳中
+  - Element
+  - メソッド
+  - リファレンス
+browser-compat: api.Element.getAttributeNS
 translation_of: Web/API/Element/getAttributeNS
 ---
-<p>{{ ApiRef("DOM") }}</p>
+{{APIRef("DOM")}}
 
-<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3>
+**`getAttributeNS()`** は {{domxref("Element")}} インターフェイスのメソッドで、指定された名前空間と名前を持つ属性の文字列値を返します。のような名前の属性が存在しない場合は、 `null` または `""` （空文字列のどちらかを返します。詳しくは{{Anch("メモ")}}を参照してください。
 
-<p><code>getAttributeNS</code> は指定の名前空間と名前の属性の文字列値を返します。もし指定の名前の属性が存在しなければ、戻り値は <code>null</code> または <code>""</code>(空文字列) のいずれかとなります。詳細は{{ Anch("注記") }} を参照。</p>
+## 構文
 
-<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">構文</h3>
+```js
+attrVal = element.getAttributeNS(namespace, name)
+```
 
-<pre class="eval"><em>attrVal</em> =<em>element</em>.getAttributeNS(<em>namespace</em>,<em>name</em>)
-</pre>
+### 引数
 
-<h3 id=".E5.BC.95.E6.95.B0" name=".E5.BC.95.E6.95.B0">引数</h3>
+- `namespace`
+  - : 指定された属性を探す名前空間です。
+- `name`
+  - : 探す属性の名前です。
 
-<ul>
- <li><code><em>attrVal</em> </code> は指定の属性の文字列値です。</li>
- <li><code><em>namespace</em> </code> は指定の属性の名前空間です。</li>
- <li><code><em>name</em> </code> は指定の属性の名前です。</li>
-</ul>
+### 返値
 
-<h3 id=".E4.BE.8B" name=".E4.BE.8B">例</h3>
+指定された属性の文字列値です。その属性が存在しない場合、結果は `null` になります。
 
-<pre class="eval">var div1 = document.getElementById("div1");
-var a = div1.getAttributeNS("www.mozilla.org/ns/specialspace/",
-                            "special-align");
-alert(a); // div の align 属性の値を表示します。
-</pre>
+> **Note:** 古いバージョンの DOM 仕様書では、このメソッドが存在しない属性に対しては空文字列を返すと説明していました。しかし、 null の方が分かりやすいので、そのような実装はあまり行われませんでした。 DOM4 仕様書ではこのメソッドは存在しない属性に対して null を返すと書くようになりました。
 
-<h3 id=".E6.B3.A8.E8.A8.98" name=".E6.B3.A8.E8.A8.98">注記</h3>
+## 例
 
-<p><code>getAttributeNS</code> は <a href="/ja/DOM/element.getAttribute">getAttribute</a> と異なります。<code>getAttributeNS</code> は特定の名前空間に属している要求された属性をより深く特定することができます。上記の例では、属性は mozilla の架空の "specialspace" 名前空間に属しています。</p>
+以下の SVG 文書は独自の名前空間にある `foo` 属性の値を読み取ります。
 
-<p>DOM4 より前の仕様では、このメソッドは属性が存在しない場合に <code>null</code> ではなく空文字列を返すように指定されていました。しかし、ほとんどのウェブ・ブラウザは <code>null</code> を返していました。DOM4 以降は、仕様でも <code>null</code> を返すように指定されました。しかしながら、いくつかの古いウェブ・ブラウザは空文字列を返します。そのため、指定の要素に指定の属性が存在しない可能性があるなら <code>getAttributeNS</code> を呼ぶ前に <a href="/ja/docs/Web/API/Element/hasAttributeNS"><code>hasAttributeNS</code></a> を使用して属性の存在を確かめる必要があります。</p>
+```xml
+<svg xmlns="http://www.w3.org/2000/svg"
+    xmlns:test="http://www.example.com/2014/test" width="40" height="40">
 
-<p>{{ DOMAttributeMethods() }}</p>
+  <circle id="target" cx="12" cy="12" r="10" stroke="#444"
+      stroke-width="2" fill="none" test:foo="Hello namespaced attribute!"/>
 
-<h3 id=".E4.BB.95.E6.A7.98" name=".E4.BB.95.E6.A7.98">仕様</h3>
+  <script type="text/javascript">
+    var ns = 'http://www.example.com/2014/test';
+    var circle = document.getElementById( 'target' );
 
-<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElGetAttrNS">DOM Level 2 Core: getAttributeNS</a></p>
+    console.log( 'attribute test:foo: "' + circle.getAttributeNS( ns, 'foo' ) + '"' );
+  </script>
+</svg>
+```
+
+HTML5 文書では名前空間に対応していないため、この属性は `test:foo` でアクセスする必要があります。
+
+```html
+<!DOCTYPE html>
+<html>
+<body>
+
+<svg xmlns="http://www.w3.org/2000/svg"
+    xmlns:test="http://www.example.com/2014/test" width="40" height="40">
+  <circle id="target" cx="12" cy="12" r="10" stroke="#444" stroke-width="2"
+      fill="none" test:foo="Foo value"/>
+</svg>
+
+<script type="text/javascript">
+  var ns = 'http://www.example.com/2014/test';
+  var circle = document.getElementById( 'target' );
+  console.log('Attribute value: ' + circle.getAttribute('test:foo'));
+</script>
+
+</body>
+</html>
+```
+
+## メモ
+
+名前空間は XML 文書でのみ対応しています。 HTML5 文書では、代わりに `getAttribute()` を使用する必要があります。
+
+`getAttributeNS()` は {{domxref("element.getAttribute()",
+  "getAttribute()")}} とは異なり、特定の名前空間に属している要求された属性をより深く特定することができます。上記の例では、属性は Mozilla の架空の "specialspace" 名前空間に属しています。
+
+DOM4 より前の仕様では、このメソッドは属性が存在しない場合に null ではなく空文字列を返すように指定されていました。しかし、ほとんどのウェブブラウザーは null を返していました。 DOM4 以降は、仕様でも null を返すように指定されました。しかし、一部の古いウェブブラウザーは空文字列を返します。そのため、指定の要素に指定の属性が存在しない可能性があるなら、 `getAttributeNS` を呼ぶ前に {{domxref("element.hasAttributeNS()", "hasAttributeNS()")}} を使用して属性の存在を確かめる必要があります。
+
+{{DOMAttributeMethods}}
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- [コードスニペット:getAttributeNS](/ja/docs/Mozilla/Add-ons/Code_snippets/getAttributeNS)
diff --git a/files/ja/web/api/element/getelementsbyclassname/index.md b/files/ja/web/api/element/getelementsbyclassname/index.md
index c20756a14b..1b69097ee3 100644
--- a/files/ja/web/api/element/getelementsbyclassname/index.md
+++ b/files/ja/web/api/element/getelementsbyclassname/index.md
@@ -3,111 +3,108 @@ title: Element.getElementsByClassName()
 slug: Web/API/Element/getElementsByClassName
 tags:
   - API
-  - Classes
+  - クラス
   - Element
-  - Method
-  - Reference
+  - メソッド
+  - リファレンス
   - getElementsByClassName
+browser-compat: api.Element.getElementsByClassName
 translation_of: Web/API/Element/getElementsByClassName
 ---
-<div>{{APIRef("DOM")}}</div>
+{{APIRef("DOM")}}
 
-<p><span class="seoSummary">{{domxref("Element")}} の <strong><code>getElementsByClassName()</code></strong> メソッドは、引数で与えられたクラス名を含むすべての子要素を、ライブな {{domxref("HTMLCollection")}}で返します。 </span></p>
+{{domxref("Element")}} の **`getElementsByClassName()`** メソッドは、引数で与えられたクラス名を含むすべての子要素を、生きた {{domxref("HTMLCollection")}} で返します。 
 
-<p>{{domxref("Document.getElementsByClassName", "Document.getElementsByClassName()")}} メソッドはこのメソッドとほぼ同様に動作しますが、{{domxref("Document")}} 全体に働きます。特定されたドキュメントルート要素の子孫のうち、与えられたクラス名に合う複数の要素を返します。</p>
+{{domxref("Document.getElementsByClassName", "getElementsByClassName()")}} メソッドはこのメソッドとほぼ同様に動作しますが、 {{domxref("Document")}} 全体に働きます。特定された文書ルート要素の子孫のうち、与えられたクラス名に合う複数の要素を返します。
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+## 構文
 
-<pre class="syntaxbox notranslate"><var>var <em>elements</em></var> = <em>element</em>.getElementsByClassName(<em>names</em>);</pre>
+```js
+var elements = element.getElementsByClassName(names);
+```
 
-<h3 id="Parameters" name="Parameters">引数</h3>
+### 引数
 
-<dl>
- <dt><code>names</code></dt>
- <dd>マッチさせる一つ以上のクラス名を表す {{domxref("DOMString")}} で、クラス名は空白区切りで指定できます。</dd>
-</dl>
+- `names`
+  - : 一致させる一つ以上のクラス名を表す {{domxref("DOMString")}} で、クラス名は空白区切りで指定できます。
 
-<h3 id="Return_value" name="Return_value">戻り値</h3>
+### 返値
 
-<p><code>names</code> で指定したすべてのクラスを持つすべての要素のリストである <em>live</em> な {{ domxref("HTMLCollection") }} です。</p>
+{{domxref("HTMLCollection")}} で、 `names` で指定したすべてのクラスを持つすべての要素のライブで更新されるリストです。
 
-<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2>
+## 使用上の注意
 
-<p>この関数が返すコレクションは常に <em>live</em> です。つまり、この関数を呼び出された要素をルートとする DOM ツリーの現在の状態が常に反映されています。サブツリー上で <code>names</code> にマッチする新しい要素が追加されたり、サブツリー上にある <code>names</code> にマッチしなかった要素が <code>names</code> にマッチするよう変更された場合、すぐにこのコレクションに追加されます。</p>
+この関数が返すコレクションは常に*生きています*。つまり、この関数を呼び出された要素をルートとする DOM ツリーの現在の状態が常に反映されています。サブツリー上で `names` に一致する新しい要素が追加された場合は、直ちにこのコレクションに追加されます。同様に、サブツリー上にある `names` に一致しなかった要素が一致するよう変更された場合も、すぐにこのコレクションに現れます。
 
-<p>逆もしかりです。<code>names</code> にマッチしなくなったりツリーから外された要素は、すぐにコレクションから除外されます。</p>
+逆もしかりです。 `names` に一致しなくなったりツリーから外された要素は、すぐにコレクションから除外されます。
 
-<div class="note">
-<p>クラス名は<a href="/ja/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">後方互換モード</a>では大文字・小文字を区別されず、それ以外では区別されます。</p>
-</div>
+> **Note:** クラス名は[後方互換モード](/ja/docs/Web/HTML/Quirks_Mode_and_Standards_Mode)では大文字・小文字が区別されず、それ以外では区別されます。
 
-<h2 id="Syntax" name="Syntax">例</h2>
+## 例
 
-<h3 id="Matching_a_single_class" name="Matching_a_single_class">単一のクラスとマッチさせる</h3>
+### 単一のクラスと一致させる
 
-<p>単一の指定されたクラスを含む要素を探すには、 <code>getElementsByClassName()</code> を呼び出す際にそのクラス名を指定するだけです。</p>
+単一の指定されたクラスを含む要素を探すには、 `getElementsByClassName()` を呼び出す際にそのクラス名を指定するだけです。
 
-<pre class="brush: js notranslate">element.getElementsByClassName('test');</pre>
+```js
+element.getElementsByClassName('test');
+```
 
-<p>この例は <code>main</code> の <code>id</code> を持つ要素の子孫の中で、<code>test</code> クラスをもつ全要素を見つけます。</p>
+この例は `main` の `id` を持つ要素の子孫の中で、`test` クラスをもつ全要素を見つけます。
 
-<pre class="brush: js notranslate">document.getElementById('main').getElementsByClassName('test');</pre>
+```js
+document.getElementById('main').getElementsByClassName('test');
+```
 
-<h3 id="Matching_multiple_classes" name="Matching_multiple_classes">複数のクラスとマッチさせる</h3>
+### 複数のクラスと一致させる
 
-<p><code>red</code> と <code>test</code> 両方のクラスを含んだ要素を見つけます。</p>
+`red` と `test` 両方のクラスを含んだ要素を見つけます。
 
-<pre class="brush: js notranslate">element.getElementsByClassName('red test');</pre>
+```js
+element.getElementsByClassName('red test');
+```
 
-<h3 id="Examining_the_results" name="Examining_the_results">結果を調査する</h3>
+### 結果を調査する
 
-<p>標準の配列構文や、<code>HTMLCollection</code> の {{domxref("HTMLCollection.item", "item()")}} メソッドを使うことで、返されたコレクションの要素を調査することができます。しかし、<strong><u>次の例はうまく動作しないでしょう</u></strong>。<code>colorbox</code> クラスを外した際に、<code>matches</code> がすぐに変更されてしまうからです。</p>
+標準の配列構文や、`HTMLCollection` の {{domxref("HTMLCollection.item", "item()")}} メソッドを使うことで、返されたコレクションの要素を調査することができます。しかし、次の例はうまく動作しないでしょう。`colorbox` クラスを外した際に、`matches` がすぐに変更されてしまうからです。
 
-<pre class="brush: js notranslate">var matches = element.getElementsByClassName('colorbox');
+```js
+var matches = element.getElementsByClassName('colorbox');
 
-for (var i=0; i&lt;matches.length; i++) {
+for (var i=0; i<matches.length; i++) {
   matches[i].classList.remove('colorbox');
   matches.item(i).classList.add('hueframe');
 }
-</pre>
+```
 
-<p>別の手段を使いましょう。例えば、</p>
+別の手段を使いましょう。例えば、
 
-<pre class="brush: js notranslate">var matches = element.getElementsByClassName('colorbox');
+```js
+var matches = element.getElementsByClassName('colorbox');
 
-while (matches.length &gt; 0) {
+while (matches.length > 0) {
   matches.item(0).classList.add('hueframe');
   matches[0].classList.remove('colorbox');
-}</pre>
+}
+```
 
-<p>このコードは、<code>"colorbox"</code> クラスを持つ子孫要素を見つけ、<code>item(0)</code>を呼び出して <code>"hueframe"</code> クラスを追加し、（配列表記で） <code>"colorbox"</code> を削除します。その後、（もし残っていれば）別の要素が <code>item(0)</code> になります。</p>
+このコードは、`"colorbox"` クラスを持つ子孫要素を見つけ、`item(0)`を呼び出して `"hueframe"` クラスを追加し、（配列記法で） `"colorbox"` を削除します。その後、（もし残っていれば）別の要素が `item(0)` になります。
 
-<h3 id="Filtering_the_results_using_array_methods" name="Filtering_the_results_using_array_methods">Arrayメソッドで結果を抽出する</h3>
+### Array メソッドで結果を抽出する
 
-<p>このメソッドの戻り値を <code>this</code> 値として {{jsxref("Array.prototype")}} メソッドに与えることで、任意の {{ domxref("HTMLCollection") }} で <code>Array</code> メソッドを使うことができます。次の例では <code>test</code> クラスを持つすべての {{HTMLElement("div")}} 要素を見つけられます。</p>
+このメソッドの戻り値を `this` 値として {{jsxref("Array.prototype")}} メソッドに与えることで、任意の {{ domxref("HTMLCollection") }} で `Array` メソッドを使うことができます。次の例では `test` クラスを持つすべての {{HTMLElement("div")}} 要素を見つけられます。
 
-<pre class="brush: js notranslate">var testElements = document.getElementsByClassName('test');
-var testDivs = Array.prototype.filter.call(testElements, function(testElement){
-    return testElement.nodeName === 'DIV';
-});</pre>
+```js
+var testElements = document.getElementsByClassName('test');
+var testDivs = Array.prototype.filter.call(testElements, function(testElement) {
+  return testElement.nodeName === 'DIV';
+});
+```
 
-<h2 id="Specifications" name="Specifications">仕様</h2>
+## 仕様書
 
-<table class="standard-table">
- <tbody>
-  <tr>
-   <th scope="col">仕様</th>
-   <th scope="col">ステータス</th>
-   <th scope="col">コメント</th>
-  </tr>
-  <tr>
-   <td>{{SpecName('DOM WHATWG', '#dom-element-getelementsbyclassname', 'Element.getElementsByClassName()')}}</td>
-   <td>{{Spec2('DOM WHATWG')}}</td>
-   <td>初期定義</td>
-  </tr>
- </tbody>
-</table>
+{{Specifications}}
 
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
+## ブラウザーの互換性
 
-<p>{{Compat("api.Element.getElementsByClassName")}}</p>
+{{Compat}}
diff --git a/files/ja/web/api/element/getelementsbytagname/index.md b/files/ja/web/api/element/getelementsbytagname/index.md
index 248bf36639..5164678956 100644
--- a/files/ja/web/api/element/getelementsbytagname/index.md
+++ b/files/ja/web/api/element/getelementsbytagname/index.md
@@ -1,55 +1,54 @@
 ---
-title: element.getElementsByTagName
+title: Element.getElementsByTagName()
 slug: Web/API/Element/getElementsByTagName
 tags:
+  - API
   - DOM
-  - Gecko
+  - Element
+  - メソッド
+  - リファレンス
+browser-compat: api.Element.getElementsByTagName
 translation_of: Web/API/Element/getElementsByTagName
 ---
-<p>{{ ApiRef() }}</p>
+{{ APIRef("DOM") }}
 
-<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3>
+**`Element.getElementsByTagName()`** メソッドは、生きた {{domxref("HTMLCollection")}} で指定された[タグ名](/ja/docs/Web/API/Element/tagName)を持つ要素を返します。
 
-<p>指定された <a href="/ja/DOM/element.tagName">タグ名</a> による要素のリストを返します。指定された要素以下のサブツリーが検索対象となり、その要素自体は除外されます。</p>
+この要素のすべての子孫が検索されますが、要素そのものは検索されません。返されるリストは*生きており*、 DOM ツリーとともに自動的に更新されます。したがって、同じ要素と引数で `Element.getElementsByTagName()` を繰り返し呼び出す必要はなく、呼び出しの間に DOM が変化しても大丈夫です。
 
-<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">構文</h3>
+HTML 文書内の HTML 要素に対して呼び出された場合、 `getElementsByTagName` は引数を小文字に変換してから検索を行います。これは、HTML 文書内のキャメルケースの SVG 要素（例えば [`<linearGradient>`](/ja/docs/Web/SVG/Element/linearGradient)）と照合しようとする場合には望ましくありません。代わりに、 {{ domxref("Element.getElementsByTagNameNS()") }} を使ってください。この場合、タグ名の大文字と小文字は区別されます。
 
-<pre class="eval"><em>elements</em> = <em>element</em>.getElementsByTagName(<em>tagName</em>)
-</pre>
+`Element.getElementsByTagName` は {{domxref("Document.getElementsByTagName()")}} に似ていますが、指定した要素の子孫の要素のみを検索する点が異なります。
 
-<ul>
- <li><code>elements</code> は見つかった要素の「生」の <code>NodeList</code> で、サブツリー内に出現した順番になります。</li>
- <li><code>element</code> は検索を開始する要素です。この要素の子孫要素のみが検索に含まれ、この要素自体は検索対象とならないことに注意してください。</li>
- <li><code>tagName</code> は検索条件とするタグ名です。特別な文字列 <code>"*"</code> はすべての要素を表します。</li>
-</ul>
+## 構文
 
-<div class="note">
-<p>Firefox 2 (Gecko 1.8.1) およびそれ以前では、タグ名に名前空間接頭辞が付いた要素がサブツリーに含まれていた場合、このメソッドは正しく動作しません (詳しくは {{ Bug(206053) }} を参照してください)。</p>
+```js
+elements = element.getElementsByTagName(tagName)
+```
 
-<p>複数の名前空間を持ったドキュメントを扱う際は {{ Domxref("element.getElementsByTagNameNS") }} を使うことを推奨します。</p>
-</div>
+- `elements` は*生きた* {{domxref("HTMLCollection")}} で、タグ名が一致する要素が出現順で入ります。要素が見つかアなかった場合は `HTMLCollection` は空になります。
+- `element` は検索を始める要素です。この要素の子孫のみが含まれ、この要素自身は含まれません。
+- `tagName` は検索する修飾名です。特別な文字列 `"*"` はすべての要素を表します。 XHTML との互換性のため、小文字を使用してください。
 
-<h3 id=".E4.BE.8B" name=".E4.BE.8B">例</h3>
+## 例
 
-<pre class="brush: js">// テーブル内のセルの数だけ反復処理します
-var table = document.getElementById("forecast-table");
-var cells = table.getElementsByTagName("td");
-for (var i = 0; i &lt; cells.length; i++) {
-    status = cells[i].getAttribute("status");
-    if ( status == "open") {
-        // データを取得します
-    }
-}
-</pre>
-
-<h3 id=".E6.B3.A8.E6.84.8F.E7.82.B9" name=".E6.B3.A8.E6.84.8F.E7.82.B9">注意点</h3>
+```js
+// テーブル内のセルの数だけ反復処理します
+const table = document.getElementById('forecast-table');
+const cells = table.getElementsByTagName('td');
 
-<p><code>element.getElementsByTagName</code> は、検索対象が指定された要素の子孫要素に限られるという点を除けば、<a href="/ja/DOM/document.getElementsByTagName">document.getElementsByTagName</a> と似ています。</p>
+for (let cell of cells) {
+  let status = cell.getAttribute('data-status');
+  if (status === 'open') {
+    // データを取得
+  }
+}
+```
 
-<h3 id=".E4.BB.95.E6.A7.98.E6.9B.B8" name=".E4.BB.95.E6.A7.98.E6.9B.B8">仕様書</h3>
+## 仕様書
 
-<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1938918D">DOM Level 2 Core: Element.getElementsByTagName </a></p>
+{{Specifications}}
 
-<div class="noinclude"> </div>
+## ブラウザーの互換性
 
-<p>{{ languages( { "en": "en/DOM/element.getElementsByTagName", "es": "es/DOM/element.getElementsByTagName", "fr": "fr/DOM/element.getElementsByTagName", "pl": "pl/DOM/element.getElementsByTagName" } ) }}</p>
+{{Compat}}
diff --git a/files/ja/web/api/element/getelementsbytagnamens/index.md b/files/ja/web/api/element/getelementsbytagnamens/index.md
index f0344fd357..982a51bb6b 100644
--- a/files/ja/web/api/element/getelementsbytagnamens/index.md
+++ b/files/ja/web/api/element/getelementsbytagnamens/index.md
@@ -1,50 +1,49 @@
 ---
-title: element.getElementsByTagNameNS
+title: Element.getElementsByTagNameNS()
 slug: Web/API/Element/getElementsByTagNameNS
 tags:
+  - API
   - DOM
-  - Gecko
+  - Element
+  - メソッド
+  - リファレンス
+browser-compat: api.Element.getElementsByTagNameNS
 translation_of: Web/API/Element/getElementsByTagNameNS
 ---
-<p>{{ ApiRef() }}</p>
+{{APIRef("DOM")}}
 
-<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3>
+**`Element.getElementsByTagNameNS()`** メソッドは、指定された名前空間に属する、指定されたタグ名を持つ要素の {{domxref("HTMLCollection")}} をライブで返します。これは {{Domxref("Document.getElementsByTagNameNS")}} に似ていますが、検索対象が指定された要素の子孫に限定される点が異なります。
 
-<p>与えられた名前空間に属し、与えられたタグの名前を持つ要素のリストを返します。</p>
+## 構文
 
-<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">構文</h3>
+```js
+elements = element.getElementsByTagNameNS(namespaceURI, localName)
+```
 
-<pre class="eval"><em>elements</em> =<em> element</em>.getElementsByTagNameNS(<em>namespaceURI</em>,<em>localName</em>)
-</pre>
+- `elements` は生きた {{domxref("HTMLCollection")}} で、ツリー内で見つかった要素を出現順に保持します。
+- `element` は検索を開始する要素です。なお、この要素の子孫は含まれますが、このノード自体は含まれません。
+- `namespaceURI` は検索する要素の名前空間 URI です（{{domxref("Element.namespaceURI")}} および {{domxref("Attr.namespaceURI")}} を参照してください）。例えば、 XHTML 要素を検索する場合は、 XHTML の名前空間 URI である `http://www.w3.org/1999/xhtml` を使用してください。
+- `localName` は検索する要素のローカル名、またはすべての要素に一致する特殊な値 `"*"` です（{{domxref("Element.localName")}} および {{domxref("Attr.localName")}} を参照）。
 
-<ul>
- <li><code>elements</code> は見付かった要素のツリーに出現した順に生きた <code>NodeList</code> です。</li>
- <li><code>element</code> は検索を始める要素です。この要素の子孫のみが検索対象になり、そのノード自身は対象になりません。</li>
- <li><code>namespaceURI</code> は検索される要素の名前空間 URI です(<code><a href="/ja/DOM/element.namespaceURI">element.namespaceURI</a></code> を参照)。例えば、XHTML 要素を検索する必要があるなら、XHTML の名前空間 URI <code><span class="nowiki">http://www.w3.org/1999/xhtml</span></code> を使ってください。</li>
- <li><code>localName</code> は探す要素のローカル名か全ての要素にマッチする特別な値 <code>"*"</code> のどちらかです(<code><a href="/ja/DOM/element.localName">element.localName</a></code> 参照)。</li>
-</ul>
+## 例
 
-<h3 id=".E4.BE.8B" name=".E4.BE.8B">例</h3>
-
-<pre class="brush: js">// XHTML 文書の table の多くのセルの配列をチェック。
+```js
+// XHTML 文書の table の多くのセルの配列をチェック。
 var table = document.getElementById("forecast-table");
 var cells = table.getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "td");
-for (var i = 0; i &lt; cells.length; i++) {
-    axis = cells[i].getAttribute("axis");
-    if ( axis == "year") {
+
+for (var i = 0; i < cells.length; i++) {
+    var axis = cells[i].getAttribute("axis");
+    if (axis == "year") {
         // データを取得
     }
 }
-</pre>
-
-<h3 id=".E6.B3.A8.E6.84.8F" name=".E6.B3.A8.E6.84.8F">注意</h3>
-
-<p><code>element.getElementsByTagNameNS</code> は {{ Domxref("document.getElementsByTagNameNS") }} に似ていますが、指定された要素の祖先に限定されるかが異なります。</p>
+```
 
-<h3 id=".E4.BB.95.E6.A7.98" name=".E4.BB.95.E6.A7.98">仕様</h3>
+## 仕様書
 
-<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-A6C90942">DOM Level 2 Core: Element.getElementsByTagNameNS</a></p>
+{{Specifications}}
 
-<div class="noinclude"> </div>
+## ブラウザーの互換性
 
-<p>{{ languages( { "en": "en/DOM/element.getElementsByTagNameNS", "fr": "fr/DOM/element.getElementsByTagNameNS", "pl": "pl/DOM/element.getElementsByTagNameNS" } ) }}</p>
+{{Compat}}