ノード - みる会図書館


検索対象: 10日でおぼえるJavaScript入門教室
112件見つかりました。

1. 10日でおぼえるJavaScript入門教室

第 3 日 / 1 時限目・ロ OM と HTML 4 document. getElementById 0 や document. getElementsByTagName 0 は、いわゆ る DOM スクリプティングでは非常によく使います。しかし、ノードを指定するたびに毎 回この長いメソッドをタイプするのは大変ですし、またコードが冗長で見にくくなるた め、同じノードがくりかえし出てくる場合には変数に参照値を代入して、その先はその 変数を使う、という方法がよく用いられます。たとえば var paral = document . getElementById ( ) ー pa て a1. c 土 1dN0des [ 0 ] . nodevalue = " 辛万しし、文章 " ー といった具合です。 POINT ワンポイント・アドバイス 「第 9 日」に取り上げる P 「 ototype という JavaScript ライブラリでは、 document. getElementById ( ) メソッドと document. getElementsByTagName ( ) メソッド の代わりに $ ( ) 、 $ $ ( ) というメソッドが提供されています。また、 Dojo という JavaScript ライブラリでは、それぞれ d0 b ⅵ d ( ) 、 d0j0. query ( ) となります。いず れも、ひんばんに使われる DOM メソッドのタイピングの手間を省くのに非常に役立 ちます。 まとめ 省略表記 CDOM の代表的なオブジェクトの種類としては、要素ノード、テキストノード、属性ノ ードがある。 0 要素ノードを指定するには、 document. getEIementsByTagName ( ) メソッド、ま たは document. getElementBYld ( ) メソッドを使う。 ・ body 要素は、 document. body でも指定できる。 0 あるノードの子ノードには、配列形式の ch ⅱ dN0des プロバティでアクセスできる。 ・テキストノードの値は、 nodeVa 旧 e プロバティで読み出し、書き込みができる。 0 属性ノードを変更するには、要素ノードから setAttribute ( ) メソッドを呼び出す。

2. 10日でおぼえるJavaScript入門教室

索引 文字列リテラル 戻り値 ユーザー定義オブジェクト 郵便番号検索 JSONP 173 , 216 , 230 25 ユ二コード 22 , 25 97 要素 29 要素ノード 予約語 9 1 ライブラリ→ JavaSc 「 ipt ライブラリ 158 175 楽天ウエプサービス 32 227 145 リテラル 22 リレーショナルデータベース 204 ] 44 22 22 例外 74 例外処理 レコード ⅱ 8 連想配列 1 99 7 ローカル変数 95 論理演算子 37 論理式 9 1 80 6 実行文 じゃまにならない JavaSc 「 ipt 条件式 数値型 数値リテラル スーパークラス スコープ スコープチェーン スタイルシート ステートメント ひ 引数 ピクセル 正規表現 70, 143 , 1 55 正規表現リテラル 非同期処理 1 43 9 1 ビルトインオブジェクト セレクタ 言 (CSS) 宣言 ( 変数 ) フィールド フィルタ 50 ブール型 フォーム 複合型 ダイナミック HTML 46 浮動小数点 ブラウザ検知 ダイナミック sc 「 ipt タグ ] 6 1, 2 1 1 23 プラグイン (jQue 「 y) 代入 プリミティフ型 多態性 1 29 プロキシ プロック プロック要素 1 63 プロトタイプ継承 プロバティ (CSS) プロバティ ( オブジェクト ) ] 3 , 47 文 データ型 変数 データベース ] 36 , 144 テーブル 145 テキストノード 80 ポイント テキストボックス ボックスモデル ポリモーフィズム 同一ドメイン制限 同一文書内リンク 無名関数 同期処理 158 ドキュメントオブジェクト 32 トップレベル メソッド メタ文字 名前空間 名前の競合 文字コード モジュール ネストされた関数 文字列型 1 31 22 , 68 40 6 ノード 58 22 バース 22 配列 37 配列型 41 配列リテラル 42 ハック 86 ハッシュ の は ゆ す 32 2 1 6 XII よ 5 6 4 2 4 2 ら せ り そノた れ 5 5 5 2 6 6 4 3 2 9 2 ろ ちッっ一て 2 2 4 8 2 9 3 ほ 1 4 9 1 95 ] 29 と む め 38 80 72 な 43 も ね 1 88 22

3. 10日でおぼえるJavaScript入門教室

第 3 日 / 3 時限目・ノードを削除する プログラムを作成する テンプレートファイルを開く 3-3. htm をダウンロードし、エデイタで開きます。 町Ⅵ工デイタ町市 di い , ) , 新ファイ日編集 ( E ) 町 ( H ) 録 3 ートル (T) 表示アンドス 、ト国”にに匪国マ◎回図国囲曲曲 C XH ML 「 an S ーー 0 n a xhtml トい・師 si い on 引 . dtd"» 鴪ア ( り 第竺は言住 く htnl x 引 ns : " h い p : / ” . 響 3.0 / 1999 / xht 物に xmt : 陌 n ja ” ng : 勹 3 ” > ↓ い 12 記 > ー 朝 a name:' ℃ ontent-Type" content:"text/html; charset=utf-8" / > ↓ く script い pe : " t 日 x し勹 33 ロ・ ipt " > ↓ くいいのノードの削除く / ti いの↓ く / ht 引 > ← く /body>v く / p > ↓ く b ) 第三く / b > 段落を朝ⅳ ef : " " 〉削除く / a > ↓ く / p > ↓ く b > 第ニく / b > 段落を朝 hr : " " > 削除く / a 〉↓ く p > ↓ く /p>' く b > 第一く / b 〉段落を朝 h 「 ef : ” 0 削除く / a > ↓ く p > ↓ く hl > ノードの削除く / hl <body> ↓ </head> ↓ </script>' コードを記述する 「ソースコードの記述」を参考にして、スクリプトとイベントハンドラを 新似 F. ) 編集 ( E ) HTML(H) 登録ア間ナル ( T) 表示 ( v ) アンドワ ) HTMLX デイタ H}FEdit - を tml. : 書き込みます。 0 は コ′ド習 / 震 ? 、ト”にに国マ◎回図回曲囲囲 H ML リ L *html トい・ an 引い on 引 . 引 d " ) ー ransitiona h ~ p : 響書響 <html 引 ns : ・・ http : / / 響・響 3 ・ 0 / 39 / xh いに xml :iang:"ja" lang:"ja"> ↓ thead> ↓ く neta ' ℃ 0 猷” t-Type " CO e 社 : " / ht 引 ; ch 町 se を : u { f ” / > ↓ くいいのノードの削除くれ i いい↓ く script type : " { / j 引′しⅱ " > ↓ function deleteThisP(node) い t Ⅳい node ・ parentN0de ・ removeChild(node) ; ↓ alert(e . message);l catch(e) い </script> ↓ く /head>l く bOdY 〉↓ く hl ) ノードの削除く / h い↓ く p > ↓ ( b > 第一く / b > 段落を朝計 : く p > ↓ く b ) 第ニく / b 〉段落を過 : く / p > ↓ ( b 〉第三く / b : ) 段落を朝行 e た く /body>' く / ht 引 > ・ - on 引 ick:"deieteThisP(this.parentN0de) 打い n f 引 : ・ ) 削除く / a ) ↓ : 削除 ( / ↓ 第削除く / a > ↓ on 己 ick="de\eteThisP(this. parentNode);return false onc\ick="deÉeteThisP(this. P師円1tN0d色)紅社リrn fa\se; ブラウザで動作を確認する 3-3. htm を、ブラウザで開きます。 をノードの崩除 - Mozillafirefox Edit y に物 H は 0 い 00. eookm 砒亶 00k Help 第三段落を 第二段落を自リ 第一段落を瓠 ノードの削除 0

4. 10日でおぼえるJavaScript入門教室

ー CSS ファイルの読み ー込みには、このように : ⅱ nk 要素を使う方法だ : けでなく、「第 5 日」に 学んだように、 style 要素の中で@impo を 使う方法もあります。 ーく style type="text ー ー @import ” 6-1 . css : : く /style> ー 0 n loa d イベントハン一 ードラを HTML 内に書く : 場合は、 body タグの ー中に書きます。 ー <body onload= 116 解説 サンプルの概要 ます、 HTML ファイルが短くなったのに気が付くと思います。 JavaScript だけ でなく、 CSS も必要がない限りは別ファイルにするのが効率的です。 head 内の く link rel="stylesheet" ムてef=“6-1. css"/> く sc て土 p セ type="text/javascript" s て c = “ 6 -1. js “ > く / sc て土 t > の 2 つだけで、かろうじてこの HTML 文書には CSS と JavaScript が使われていることが わかります。また、この 2 行を削除するだけで、 CSS と JavaScript を取り去ることもでき ます。 スクリプトからのイベントハンドラの設定 JavaScript の外部ファイル化と合わせて、タグ内にあったイベントハンドラを スクリプト内で設定するようにしました。基本的には 要素ノード .0 れ click = function ( ) { 実行するコー という形式を取ります。これは要素ノードの onc ⅱ ck プロバティに無名関数の形でイベン トハンドラ関数を代入し、その要素のメソッドにすることを意味します。 JavaScript のトップレベルにあるコード ( 関数の中ではなく、グローバルコンテクスト にあるもの ) は通常、読み込まれるとすぐに実行されます。ところがこのイベントハン ドラ設定のコードのように、 HTML 文書内の要素に対して操作をする場合、 HTML が読 み込まれる前に実行されてしまうと、まだメモリ上に存在しないオプジェクトに対して 操作を行うことになり、エラーとなります。これを避けるため、 HTML 文書の読み込み が完了した後でイベントハンドラを設定するようにしなければなりません。これを行う には、サンプルのように onload イベントハンドラを使います。 onload イベントハンドラ は、 HTML 文書の読み込みを完了した時点で実行されます。 イベントハンドラに for 文を使って引数を渡す 元のイベントハンドラ内の関数は、それぞれ 0 、 1 という数字を引数として受け 取っています。 onc1ick="showP(O) ーて e セて n false; これはスクリプト内で for 文を使って行うとき、

5. 10日でおぼえるJavaScript入門教室

removeChiId 0 メソッドで子ノードを削除 DOM では removeChiId() メソッドという、子ノードを削除するメソッドが用意 されています。このメソッドは親ノードから呼び出します。引数として、削除する子ノ ードの参照を与えます。 サンプルプログラム中、関数実行時には p 要素の参照が引数として渡されているため、 仮引数 node は削除すべき p 要素ノードを表します。また、 removeChild() メソッドは親ノ 子ノード POINT ワンポイント・アドバイス ています。 のように、 parentNode を使って親ノード ( このサンプルでは body 要素ノード ) を参照し node . parentN0de. removeChi ld ( node ) ー ードから呼び出すため、 ロバティとしては以下のようなものがあります。 これまで学んだプロバティの他に、あるノードから他のノードを参照するためのプ firstChild lastChild nextSibling 最初の子ノード (chiIdNodes [O] と同じ ) 最後の子ノード (chiIdNodes [chiIdNodes 」 ength-l ] すぐ次の兄弟ノード と同じ ) 【親ノードから見た子ノード】 親ノード chiIdNodes 回 【子ノードから見た親ノード、兄弟ノード】 最初の子ノード 2 番目の子ノード firstChild または chiIdNodes [ 1 ] parentNode 最初の子ノード parentNode. chiIdN0des [O] または parentN0de. firstChiId chiIdN0des [n-l] または lastChild n 番目の子ノード すぐ次の子ノード nextSibIing

6. 10日でおぼえるJavaScript入門教室

2 ドキュメントノードとノードのツリー構造 まず、 DOM ではドキュメントノードと呼ばれるオプジェクトが頂点にあり、 れを document で表します。 document は、今プラウザに読み込まれている文書全体を指 します。 HTML 文書中の要素ノードと要素ノード、あるいは要素ノードとテキストノードの間 には家系図のように親子関係・兄弟関係が存在します。ある要素によって囲まれている 要素やテキストはその要素の子ノードと呼ばれます。逆に囲まれている要素ノードやテ キストノードから見て、それを囲っている要素ノードは親ノードと呼ばれます。 あるノードに対する親ノードは、そのノードのすぐ外側にある要素ノード 1 つだけで す。親ノードのさらに外側を囲んでいる要素ノードは、親ノードの親ノードです。ある ノードに対して親ノードが 2 つある、ということはあり得ません。また、同じ親を持っ子 ノード同士は兄弟ノードと呼びます。文章だけではイメージがつかみにくいと思います ので、次に簡単な例で説明します。 POINT ワンポイント・アドバイス たとえば く p > テキスト 1 く b > テキスト 2 く / b > テキスト 3 く / p > には 1 つの p 要素ノード、 1 つの b 要素ノードおよび 3 つのテキストノードがあります。 p 要素ノードにとっての子ノードはテキスト 1 ( テキストノード ) 、 b 要素ノード、テ キスト 3 ( テキストノード ) です。テキスト 2 も p 要素の内側にありますが、直接には b 要素に囲まれているため、 b 要素ノードの子ノードであり、 p 要素から見れば孫ノー く 1 〉サンフランシスコく / 1 〉 く b0dY> く /head> く title> く /title> く head> く html> ドにあたります。 </html> く /b0dY> <P 土 d = " pa て a2 " 〉第ニ殳落く / p > く p 土 d = " pa て a1 " > 第一「殳落く / > ケーブ丿レカー " width="320" e 土 g t = " 240 “ / > く img src="3_cabIe_car ・ jpg" alt = 。サンフランシスコの 第 3 日 / 1 時限目・ロ OM と HTM し 以下のような簡単な HTML 文書を例に、文書のツリー構造を見てみましよう。 他のプログラムから使 : ーうことのできる命令の セットを A 曰といい、 ー D 0 M の A P ーは特に ー DOM A 曰と呼ばれまー

7. 10日でおぼえるJavaScript入門教室

ー D O M メソッドを使っー ーて新しくノードを作っ : ーても、元の HTML 文書ー : が書き換えられるわけ : ーではなく、ブラウザを一 ー閉じたりあるいは他の一 : HTML 文書を開いた時一 : 点で新しく作ったノー ドは消えてしまいまー : す。 3 時限目の「ノー : ドの削除」も、同じよ : ーうに元の HTML 文書は 一変更されません。 fa 1 se ー フェリーヒルティンクく /a> く /P> く /b0dY> く / tml 〉 解説 サンプルの概要 このファイルを読み込んだ時点では img 要素は存在しませんが、「ケープルカー」 または「フェリービルディング」のリンクをクリックすると、イベントハンドラによっ て showPicture0 という関数が実行され、引数として渡された画像ファイル名と画像の説 明を使って、 img 要素および p 要素が作られます。再びこの関数を実行した場合は、すで に最初実行した時点で作られた img 要素が存在するため、新しく img 要素は生成せすに img 要素の src 属性および説明文の書かれている p 要素の子ノードであるテキストノード の値を変更することによって、表示する写真とその説明を入れ替えます。 要素ノードとテキストノードの生成 新しく要素ノードを作るには、 document オプジェクトから createElement() メ ソッドを呼び出します。 createElement() メソッドは、要素名 (p 、 a 、 img など ) を文字列 の形で引数に取ります。 一方、テキストノードの場合は、 createElement 0 メソッドの代わりに createTextNode 0 メソッドを使います。 createTextNode() メソッドの引数には、テキストノードの値で あるテキストを文字列の形で与えます。 子ノードの追加 createElement 0 メソッド、 createTextN0de 0 メソッドのいすれも、ノードをメ モリ上に作り出すだけで、文書中の位置が決まっていないため、そのままでは表示され ません。新しく作ったノードは、そのノードの親となるノードから appendChiId 0 メソッ ドなどを使って子ノードとして追加することによって、はじめてプラウザ上に表示され ます。 appendChild() メソッドは、引数として子ノードとなるべきノードの参照を受け取 ります。 appendChild() メソッドを実行すると、新しい子ノードは親ノードの最後の子ノ ードとして追加されます。

8. 10日でおぼえるJavaScript入門教室

31 Ja aSc 「 ipt の初期の頃は、 HTM し文書が読み込まれた後、 Ja aSc 「 ipt によって変えることができるのは、フォームのテキスト ポックスや img 要素、ステータスパーといった一部のものに限られてい ました。 W3C DOM の採用によって、今では JavaScript によって HTM し文書内のすべての要素が参照でき、またその内容を変更したり、 新しく付け加えたりすることができます。スクリプトによって動的に HTM しの内容を変えることはダイナミック HTML (DHTML) と呼ば れてきましたが、最近では特に DOM の仕組みを使って HTML を操作す ることを DOM スクリプティングと呼ぶのが一般的になってきました。 ・このレッスンのキーワード 要素ノード テキストノード 属性ノード 親ノード 子ノード 兄弟ノード document. getELementsByTagName ( ) document. getElementByld 0 setAttri bute ( ) getAtt 「 i bute ( ) nodeValue childNodes parentNode ロ OM とは ノードと DOM API DOM に準拠したプラウザでは、 HTML 文書をツリー状のオプジェクト構 造で把握します。 HTML 中の要素 ( タグ ) はそれぞれ要素ノード、タグに囲まれた テキストはテキストノードと呼ばれ、それぞれオプジェクトとしてメソッドやプロ パティを持ちます。このメソッドやプロバティは、 JavaScript をはじめとする他の プログラムから呼び出して利用することができます。 「ノード」というのは耳慣れない言葉かもしれませんが、 DOM 特有の用語で、単に ドキュメントの構成要素を DOM では「ノード」と呼ぶ、と覚えていただくだけでい いと思います。 第 日 【を使う①】

9. 10日でおぼえるJavaScript入門教室

これをツリー構造で書き直すと、次のようになります。 【ノードのツリー構造】 html head title b0dy 上下につながってい るものは親ノードと 子ノード ( テキストノード ) " 第一段落 共通の親を持ち、 横に並んでいるも のは兄弟ノード ( テキストノード ) “第ニ段落“ “サンフランシスコ“ ( テキストノード ) 要素の指定の仕方 配列形式とは言って : も、 JavaSc 「 ipt の配ー 一列ではないため、 : JavaScript 配列のメ ーソッドは使えません。 getEIementsByTagName 0 と getEIementBYId 0 HTML 文書中の特定の要素ノードを指定するには、 document オプジェクトの getElementsByTagName 0 メソッドあるいは getElementBYId 0 メソッドを使います。大 文字と小文字を間違えないように注意してください。 前者は、タグ名 ("p" や "img" など ) を引数として受け取ります。同じ要素名を持っノー ドは複数存在する場合もあるため、該当する個々の要素ノードへの参照を、オプジェク ト型データとして配列形式で返します。配列の要素の 1 つひとつに個別の要素ノードへ の参照値が入る形になります。後者は、 ID ( タグ内に id 属性で指定したもの ) を引数とし て受け取り、該当する要素ノード ( 同じ ID の要素は 1 つの文書中に 1 っしかない ) への参 照をオプジェクト型データで返します。たとえば、前項の HTML 文書中の img 要素は、 document . getE 1 ement sBYTagName ( “ ) [ 0 ] と表されます。この文書中、 img 要素は 1 つしかありませんが、 getElementsByTag Name() メソッドは必す戻り値を配列形式で返すため、Ⅱでインデックス番号を指定する 必要があります。配列のインデックス番号は 0 からはじまるため、最初の要素ということ で 0 になります。 この文書中、 p 要素にはそれぞれ paral 、 para2 という id 属性が設定されています。この ため、これらの要素ノードへは、 document. getElementById0 メソッドを使ってもアクセ スできます。 getElementsByTagName 0 メソッドは Elements と複数形になっている一方 で、 getElementById のほうは Element と単数形になっているのに注意してください。最 初の p 要素は document . getE1ementBy 工 d ( “ pa て a1 “ )

10. 10日でおぼえるJavaScript入門教室

第 3 日 / 1 時限目・ロ OM と HTML で指定できます。 getEIementsByTagName0 メソッドとは違い、戻り値は配列形式では ないため、Ⅱでインデックス番号を付ける必要はありません。同じ要素ノードを getElementsByTagName 0 メソッドを使って、 docune れセ . getE 1 ementsByTagName ( "p “ ) [ 0 ] と指定することもできます。 要素ノードの子ノードへアクセスするには、 childNodes プロバティを使います。 getElementsByTagName 0 メソッドや getElementById 0 メソッドは名前の通り、要素ノ ードだけしか返しませんが、 childNodes プロバティは要素ノードだけでなくテキストノ ードも含めた子ノードすべての参照を配列形式で返します。先の例では、 document . getE1ementBy 工 d ( "paral" ) . chi 1dNodes [ 0 ] で、最初の p 要素の子ノード ( ここの例では「第一段落」という値を持ったテキストノー ド ) が指定できます。 POINT ワンポイント・アドバイス get 曰 ementsByTagName ( ) を使って、 b0dy 要素を指定するときは、 docume れセ . getE IementsByTagName ( "body" ) [ 0 ] となります。 body 要素は 1 つの HTML 文書には必ず 1 つしかありませんが、その場合 でも get 曰 ementsByTagName の戻り値は必ず配列形式になるため、インデックス 番号を省略することはできません。 ただし、 body 要素の場合、特別に document . body という形式で指定することもできます。 getElementsByTagName ( ) を使うより短 く、またタイプミスの可能性も少なくなるため、こちらを使うことをお勧めします。 テキストノードの値の変更 2 テキストノードの値 ( テキスト ) は、テキストノードの nodeValue プロバティで 参照できます。これは値を参照するだけでなく、書き込む ( 変更する ) のにも使えます。 たとえば、 document . getEIementsByTagName ("p" ) [ 0 ] . c 土 ldN0des [ 0 ] . nodevalue = “変更された文章“ という文を Firebug などを使って実行すると、「第一段落」というテキストが「変更され た文章」に置き換えられます。