Changes between Version 13 and Version 14 of HowTo/JavaScriptTutorial

Timestamp:

Jun 19, 2010, 10:55:39 AM (14 years ago)

Author:

村山 俊之

Comment:

--

HowTo/JavaScriptTutorial

@@ -517 +517 @@
 
 これに対して、 HTML 文書をオブジェクトのツリー構造に見立てて扱い、操作する方法があります。そのようなモデルのことを、 '''DOM (Document Object Model)''' と呼びます。
+
+DOM を用いた画面操作の基本的な手順は、概ね以下の通りです。
+
+ 1. document.getElementById() メソッド等を用いて、操作したい HTML 要素のオブジェクトを取得する。
+ 1. 1 で取得した要素の配下に HTML 要素を追加したい場合は、 document.createElement() メソッドを用いて HTML 要素オブジェクトを生成し、 1 で取得した要素の appendChild() メソッド等を用いて追加する。
+ 1. 1 で取得した要素の配下にテキスト文を追加したい場合は、 document.createTextNode() メソッドを用いてテキスト要素オブジェクトを生成し、 1 で取得した要素の appendChild() メソッド等を用いて追加する。
+ 1. 1 で取得した要素の配下にある要素は childNodes 属性から参照する。 childNodes は配列のようになっており、 elem.childNodes[n] のようにアクセスできる。
+
+他にも、 removeChild() メソッドで子要素を削除したり、 className 属性にクラス名を代入したり、 style 属性をいじってスタイルシートを変更したりと、さまざまな機能が存在します。
+
+また、 HTML 要素の種類に応じて用意されている特別な属性やメソッドも存在します。すでに例示している <textarea> 要素の value 属性などは、フォーム部品の類にのみ用意されている特別な属性です。