Changes between Version 15 and Version 16 of HowTo/JavaScriptTutorial


Ignore:
Timestamp:
Jul 9, 2010, 5:18:16 PM (14 years ago)
Author:
村山 俊之
Comment:

--

Legend:

Unmodified
Added
Removed
Modified

  • HowTo/JavaScriptTutorial

    v15 v16  
    531531
    532532また、 HTML 要素の種類に応じて用意されている特別な属性やメソッドも存在します。すでに例示している <textarea> 要素の value 属性などは、フォーム部品の類にのみ用意されている特別な属性です。
     533
     534試しに、 DOM を用いて、既存のパラグラフ (<p> タグ) に以下の HTML に相当する内容を追加するプログラムを書いてみましょう。
     535
     536{{{
     537これは、<strong>DOM</strong> を用いたサンプルです。
     538}}}
     539
     540まず、既存のパラグラフに ID 「main_paragraph」が設定されているものとして、パラグラフ要素を取得します。
     541
     542{{{
     543    var p = document.getElementById("main_paragraph");
     544}}}
     545
     546次に、このパラグラフ要素に、テキスト要素「これは、」を追加します。テキスト要素ですから、 document.createTextNode() メソッドを用いて生成し、それをパラグラフ要素の appendChild() メソッドに渡して追加します。
     547
     548{{{
     549    var text = document.createTextNode("これは、");
     550    p.appendChild(text);
     551}}}
     552
     553生成したテキスト要素をわざわざ変数に持たせず、以下のように直接 appendChild() メソッドに渡してしまっても良いでしょう。
     554
     555{{{
     556    p.appendChild(document.createTextNode("これは、"));
     557}}}
     558
     559次に、新たに生成した <string> 要素にテキスト要素「DOM」を生成して追加し、それをパラグラフ要素に追加します。言葉で書くとややこしいですが、プログラムにして書くとかえって分かりやすいかも知れません。
     560
     561{{{
     562    var strong = document.createElement("strong");      // <strong> 要素を生成
     563    strong.appendChild(document.createTextNode("DOM")); // テキスト要素「DOM」を生成して <strong> 要素に追加
     564    p.appendChild(strong);                              // <strong> 要素をパラグラフ要素に追加
     565}}}
     566
     567最後に、残りのテキスト要素「 を用いたサンプルです。」を生成し、パラグラフ要素に追加すれば完了です。
     568
     569{{{
     570    p.appendChild(document.createTextNode(" を用いたサンプルです。"));
     571}}}
     572
     573完成したプログラムを見てみましょう。ボタンをクリックするとこのプログラムが動作するように作られています。
     574
     575{{{
     576<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
     577<html>
     578
     579<head>
     580    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     581    <meta http-equiv="content-script-type" content="text/javascript">
     582    <title>small DOM sample</title>
     583    <script type="text/javascript" language="JavaScript"><!--
     584function domTest() {
     585    var p = document.getElementById("main_paragraph");
     586    p.appendChild(document.createTextNode("これは、"));
     587    var strong = document.createElement("strong");      // <strong> 要素を生成
     588    strong.appendChild(document.createTextNode("DOM")); // テキスト要素「DOM」を生成して <strong> 要素に追加
     589    p.appendChild(strong);                              // <strong> 要素をパラグラフ要素に追加
     590    p.appendChild(document.createTextNode(" を用いたサンプルです。"));
     591}
     592    //--></script>
     593</head>
     594
     595<body>
     596
     597<form>
     598  <input type="button" value="click!" onclick="domTest();">
     599</form>
     600
     601<p id="main_paragraph"></p>
     602
     603</body>
     604
     605</html>
     606}}}