width/height example

From da1f6d88ee1a030c25f5b07dc5691b131f3684e3 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 21 Sep 2021 11:09:00 +0900 Subject: Web/API/Document_Object_Model/Examples を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Markdown に変換 - 2021/09/15 時点の英語版に同期 --- .../api/document_object_model/examples/index.md | 521 ++++++++++++--------- 1 file changed, 288 insertions(+), 233 deletions(-) diff --git a/files/ja/web/api/document_object_model/examples/index.md b/files/ja/web/api/document_object_model/examples/index.md index 6762b4c2d4..bd2340742a 100644 --- a/files/ja/web/api/document_object_model/examples/index.md +++ b/files/ja/web/api/document_object_model/examples/index.md @@ -1,22 +1,25 @@ --- -title: 例 +title: DOM を使用したウェブと XML の開発の例 slug: Web/API/Document_Object_Model/Examples tags: - DOM - - DOM Reference + - DOM リファレンス translation_of: Web/API/Document_Object_Model/Examples --- -

- {{ApiRef}}

この章では、DOM を利用したウェブと XML 開発のより長い例をいくつか紹介します。可能な限りこれらの例ではドキュメントオブジェクトを操作する上でよく用いられる API や技法や JavaScript のパターンを利用しています。

例 1: 高さと幅

以下では、画像の大きさを変えるにあたって、height と width プロパティを使っている例を示します。

<!DOCTYPE html>
-<html lang="en">
-
-<head>
-<title>width/height example</title>
-<script>
+{{DefaultAPISidebar("DOM")}}
+
+この章では、DOM を利用したウェブと XML 開発のより長い例をいくつか紹介します。可能な限りこれらの例ではドキュメントオブジェクトを操作する上でよく用いられる API や技法や JavaScript のパターンを利用しています。
+
+## 例 1: 高さと幅
+
+以下の例は、様々な寸法の画像について、`height` と `width` プロパティを使用しています。
+
+```html
+
+
+
+width/height example
+
+
+
+
+Image 1: no height, width, or style
+  
+
+
+Image 2: height="50", width="500", but no style
+  
+
+
+Image 3: no height, width, but style="height: 50px; width: 500px;"
+  
+
+
+ 
+
+
+```
+
+## 例 2: 画像の属性
+
+```html
+
+
+
+Modifying an image border
+
+
+
+
+
+
+  
+
+
+
+  
+  
+
+
+
+
+```
+
+## 例 3: スタイルの操作
+
+この簡単な例では、HTML の段落要素のいくつかの基本的なスタイルプロパティに、要素上のスタイルオブジェクトと、DOM から取得したり設定したりできるそのオブジェクトの CSS スタイルプロパティを使ってアクセスしています。この例では、個々のスタイルを直接操作しています。次の例 (例 4 参照) では、スタイルシートとそのルールを使って、文書全体のスタイルを変更することができます。
+
+```html
+
+
+
+Changing color and font-size example
+
+
+
+
+
+linker
 
-<body>
+
+  
+
 
-<p id="pid"
-  onclick="window.location.href = 'http://www.cnn.com/';">linker</p>
-<form>
+
+
+```
 
-<p><input value="rec" type="button" onclick="changeText();"></p>
+## 例 4: スタイルシートの使用
 
-</form>
+{{domxref("document")}} オブジェクト上の {{domxref("document.styleSheets", "styleSheets")}} プロパティは、その文書に読み込まれたスタイルシートの一覧を返します。このページの例に示されているように、stylesheet、style、{{domxref("CSSRule")}} オブジェクトを利用して、これらのスタイルシートとその規則に個別にアクセスが可能です。そしてこの例では、すべてのスタイル規則のセレクターがコンソールへ表示されます。
 
-</body>
-</html>
-

例 4: スタイルシートを利用する

document オブジェクト上の styleSheets プロパティは、その document に読み込まれたスタイルシートの一覧を返します。このページの例に示されているように、stylesheet、style、CSSRule オブジェクトを利用して、これらのスタイルシートとそのルールに個別にアクセスが可能です。そしてこの例では、すべてのスタイル・ルールのセレクタ (selector) がコンソールへ表示されます。

var ss = document.styleSheets;
+```js
+var ss = document.styleSheets;
 
-for(var i = 0; i < ss.length; i++) {
-  for(var j = 0; j < ss[i].cssRules.length; j++) {
+for(var i = 0; i < ss.length; i++) {
+  for(var j = 0; j < ss[i].cssRules.length; j++) {
     dump( ss[i].cssRules[j].selectorText + "\n" );
   }
-}

以下の 3 つのルールが定義される単一のスタイルシートが附属されているドキュメント用に対して:

body { background-color: darkblue; }
+}
+```
+
+以下の 3 つの規則が定義される単一のスタイルシートが附属されているドキュメント用に対して、
+
+```css
+body { background-color: darkblue; }
 p { font-face: Arial; font-size: 10pt; margin-left: .125in; }
 #lumpy { display: none; }
-

このスクリプトは以下の項目を表示します:

BODY
-P
-#LUMPY
-

例 5: イベント伝播 (propagation)

この例は DOM でイベントが発生したときの対処方法を、ごく単純化して紹介します。下記の HTML 文書の BODY が読み込まれる時、イベントリスナーが TABLE の第 1 行を使って登録されます。イベントリスナーは関数 stopEvent を実行することでイベントを処理します。この関数は、table の一番下のセルの値を変更します。

しかし、stopEvent はまたイベントオブジェクトのメソッド {{domxref("event.stopPropagation")}} を呼出します。このメソッドはイベントが発生してこれ以上 DOM に入り込むのを防止します。テーブル自体は、クリックされた時、メッセージを表示する必要のある {{domxref("element.onclick","onclick")}} イベントハンドラを備えています。しかし stopEvent メソッドは伝播を停止していますので、テーブル内のデータが更新された後では、イベントは効率的に終了し、これを確認するための警告ダイアログが表示されます。

<!DOCTYPE html>
-<html lang="en">
-<head>
-<title>Event Propagation</title>
-
-<style>
+```
+
+このスクリプトは以下の項目を表示します。
+
+    BODY
+    P
+    #LUMPY
+
+## 例 5: イベント伝播 (propagation)
+
+この例は DOM でイベントが発生したときの対処方法を、ごく単純化して紹介します。下記の HTML 文書の BODY が読み込まれる時、イベントリスナーが TABLE の第 1 行を使って登録されます。イベントリスナーは関数 stopEvent を実行することでイベントを処理します。この関数は、table の一番下のセルの値を変更します。
+
+しかし、stopEvent はまたイベントオブジェクトのメソッド {{domxref("event.stopPropagation")}} を呼び出します。このメソッドはイベントが発生してこれ以上 DOM に入り込むのを防止します。テーブル自体は、クリックされた時、メッセージを表示する必要のある {{domxref("GlobalEventHandlers.onclick","onclick")}} イベントハンドラーを備えています。しかし stopEvent メソッドは伝播を停止していますので、テーブル内のデータが更新された後では、イベントは効率的に終了し、これを確認するための警告ダイアログが表示されます。
+
+```html
+
+
+
+Event Propagation
+
+
 
-<script>
+
+
+
+
+
+
+  
+    
+  
+  
+    
+  
+one
two
+
+
+
+```
+
+## 例 6: getComputedStyle
+
+この例は、{{domxref("window.getComputedStyle")}} メソッドを使用して要素の `style` 属性あるいは JavaScript (例: `elt.style.backgroundColor="rgb(173, 216, 230)"`) で設定されていないスタイルを取得する方法を示します。後者の種類のスタイルは、もっと直接的な {{domxref("HTMLElement.style", "elt.style")}} プロパティを使って取得でき、そのプロパティは [DOM CSS プロパティ一覧](/ja/docs/Web/CSS/Reference)に挙げられています。
+
+`getComputedStyle()` は {{domxref("CSSStyleDeclaration")}} オブジェクトを返し、下記のサンプルにあるように、このオブジェクトの {{domxref("CSSStyleDeclaration.getPropertyValue()", "getPropertyValue()")}} メソッドによって個々のスタイルプロパティを参照できます。
+
+```html
+
+
+
+
+getComputedStyle example
+
+
+
+
 
-function showEventProperties(e) {
-  function addCell(row, text) {
-    var cell = row.insertCell(-1);
-    cell.appendChild(document.createTextNode(text));
-  }
+
 
-  var e = e || window.event;
-  document.getElementById('eventType').innerHTML = e.type;
+
 
-  var table = document.createElement('table');
-  var thead = table.createTHead();
-  var row = thead.insertRow(-1);
-  var lableList = ['#', 'Property', 'Value'];
-  var len = lableList.length;
+ 
 
-  for (var i = 0; i < len; i++) {
-    addCell(row, lableList[i]);
-  }
+
+  
+    
+    height
+    max-width
+    bg-color
+  
+
 
-  var tbody = document.createElement('tbody');
-  table.appendChild(tbody);
+
+
+```
 
-  for (var p in e) {
-    row = tbody.insertRow(-1);
-    row.className = (row.rowIndex % 2)? 'odd':'even';
-    addCell(row, row.rowIndex);
-    addCell(row, p);
-    addCell(row, e[p]);
-  }
+## 例 7: イベントオブジェクトのプロパティの表示
+
+この例では、DOM メソッドを使って、 {{domxref("GlobalEventHandlers.onload")}} [イベント](/ja/docs/Web/API/Event)オブジェクトのプロパティとそれらの値をすべて表として表示しています。また、オブジェクトのプロパティを反復し、それらの値を取得するために、for...in ループを使った役に立つテクニックをお見せします。
+
+イベントオブジェクトのプロパティはブラウザーによって大きく異なります。 [WHATWG DOM Standard](https://dom.spec.whatwg.org) に標準のプロパティが載っていますが、多くのブラウザーはこれらを大幅に拡張しています。
+
+以下のコードをテキストファイルとして保存し、様々なブラウザーで読み込ませてみてください。プロパティの数や名称が異なることに驚かれることでしょう。ページにいくつか要素を追加して、異なるイベントハンドラーからこの関数を呼び出してみるのも良いでしょう。
 
-  document.body.appendChild(table);
+```html
+
+
+
+
+Show Event properties
+
+
+
+
+
+
+
+Properties of the DOM  Event Object
+
+
+
+```
+
+## 例 8: DOM のテーブルインタフェースの使用
+
+DOM の {{domxref("HTMLTableElement")}} インタフェースで、テーブルを生成、操作するための便利なメソッドがいくつか提供されています。よく利用される 2 つのメソッドは {{domxref("HTMLTableElement.insertRow")}} と {{domxref("HTMLTableRowElement.insertCell")}} です。
+
+以下の例では、既存のテーブルに行といくつかのセルを追加しています。
+
+```html
+
+ 
+  
+  
+ 
+Row 0 Cell 0 Row 0 Cell 1
+
+
+```
+
+### メモ
+
+- テーブルの {{domxref("element.innerHTML","innerHTML")}} プロパティは、テーブル全体あるいはセルの内容を記述するために使うことはできますが、テーブルを操作するために使うべきではありません。
+- DOM Core メソッドの {{domxref("document.createElement")}} と {{domxref("Node.appendChild")}} を使って行とセルを生成する場合、他のブラウザーでは table 要素に直接追加できる (行は最後の {{HTMLElement("tbody")}} 要素に追加される) のに対して、IE ではそれらを `` 要素に対して追加する必要があります。
+- [`HTMLTableElement` インターフェイス](/ja/docs/Web/API/HTMLTableElement#methods)には、この他にも、テーブルを生成したり操作するのに利用できる多くの便利なメソッドがあります。
-- 
cgit v1.2.3-54-g00ecf