JavaScript・AjaxにおけるDOM
Download
Report
Transcript JavaScript・AjaxにおけるDOM
JavaScriptにおけるDOM操作
XML読み込み
Ajax(動的HTML編集)
情報システム工学科
ラシキアゼミ ３年
H１０７０７２ 田中直樹
目次
XMLデータの読み込み
DOM操作による動的HTML編集方法
要素を生成し、階段構造の要素を作成する
階段構造の要素から、データを取り出す、
HTML部にデータを組み込む
今回の目標
DOM操作の関数を用いて、XML・HTML要
素の取り出しを行えるようになる
階層構造の要素を作成できるようになる
XMLファイルの読み込み・データの取り出し
が出来るようになる
動的Webページの実現(ページの自由な書き
換え)が出来るようになる
前回内容の軽い復習
ＸＭＬ・・・まずはタグ構造によるファイルを作成
JavaScript・・・
• 基本的な概念(変数、データ型、基本処理構造)、
• DOM操作のために、オブジェクトに属性を付与
• オブジェクトの属性を辿って、オブジェクトのデータ
を取得(DOM操作入門)
登場した操作
var dom =
document.myForm.text1.value ;
①
var dom =
document.myForm.sel1.selectedIndex ;
②
var str1 = document.myForm.sel1.
options[選択されている配列アドレス].value
XMLファイルを読み込む
ＸＭＬファイルを読み込む操作
・・・この操作は扱うブラウザ(エンジン)によって
操作(呼び出すオブジェクト)が違うことが多い。
ライブラリを用いれば、それも解消できるが、
いきなりライブラリを使っても仕組みが理解で
きないので、今回はFireFoxに対応した方法を
用いる。
XMLファイル読み込み手順
読み込み用オブジェクトの生成
var xhttp = new XMLHttpRequest()
XMLHttpRequest()
・・・Mozilla 系ブラウザで用いるオブジェクト。このオブ
ジェクトの機能を使って、XMLファイルを読み込む。
XMLファイル読み込み手順
通信方法の設定
xhttp.open(“GET”,“1st_kadai1.xml”, false);
openメソッド
引数は、http通信でどの命令を行うか(POST or
GET)、通信を行うファイル名、同期通信か非同期通信
かの指定
XMLファイル読み込み手順
http送信のリクエストを出し、ファイルを読み込む
xhttp.send(null) ;
sendメソッド
サーバに HTTP リクエストを送信する。送信先の URL、
送信方式（GET や POST など）は、open メソッドで指
定したものになる。
データを送信しない時でも必要で、その場合、引数
がnullになる。(今回はこれ)
XMLファイル読み込み手順
ＸＭＬデータを取り出す
var xmldoc = xhttp.responseXML ;
通信が成功すれば、 通信を行ったオブジェク
トのresponseXMLプロパティから、取得した
XMLデータを受け取ることができる。
XMLファイル読み込み手順
ＸＭＬノード(要素)を取り出す
var node =
xmldoc.getElementsByTagName(“タグ名
") ;
getElementsByTagNameメソッドで、取得
したいデータが格納されたタグを指定し、デー
タを取得する。
DOM操作 要素の取り出し方
var dom =
objects.getElementsByTagName(node)
引数(node)：要素を取得したいオブジェクトのタグ名
機能：対象のオブジェクト群の中から、引数で指定したタグ
名で定義されたデータをすべて取得する。戻り値を格納
した変数は自動的に配列になる。
基本的に、XMLのデータを格納する際に用いられる。つ
まり、親要素objectsはXMLのタグを格納した変数とな
る。
XMLファイル読み込み手順
ＸＭＬノード(要素)を取り出す
var memberNum =
nodes[i].childNodes[0].nodeValue
nodes[i]・・・getElementsByTagNameで取り
出したデータ(配列)
nodes[i]以下は、構造上このようにアクセスする。
nodeValueは格納されたデータを指す。
DOM
Document Object Model
文書オブジェクトモデルともいう。
Webページの内容(文章、画像、音声など)及びそれら
の配置、スタイルをオブジェクトとして扱い、それらをス
クリプト言語を使って制御するための取り決め。
また、その制御をおこなうためのAPI(Application
programming Interface)。
タグ構造であるXMLにもこの概念は適用可能
DOM
ボタンにアクセス
テキストフォーム
にアクセス
参照：http://www.scollabo.com/banban/java/jvp_01.html
ＤＯＭ操作
DOM操作には次のものがある
• 階層構造の要素を作成し、その要素にアクセスする
• もともとあるHTML要素を階段状の構造と捉え、
その要素にアクセスする
ＤＯＭ操作 関数(要素作成)
階層構造の要素を作成し、その要素にアクセ
スを行う
･･･実現するためには、階段状の要素を生成す
る関数を知る必要がある
ＤＯＭ操作 関数(要素作成)
document.createElement(tagName)
引数：作成するタグ名
(タグ名なので、tdタグなど、タグ名で作成
した要素の役割が決まる)
機能：要素を新しく作成する。作成する要素の
種類は、引数のタグ名で設定する
ＤＯＭ操作 関数(要素作成)
document.createTextNode(tagName)
引数：作成するテキスト名
(タグの中身のデータ)
機能：文字列要素を生成する。生成した要素を
既存のタグ要素に追加すると、タグの中身の
文字列になる
<td>ラシキアゼミ<td>
ＤＯＭ操作 関数(要素作成)
element.appendChild(element)
引数：追加する要素(要素を格納した変数でもＯＫ)
親要素：子要素を追加する要素
機能：要素からアクセスして関数を呼び出す。対象
の要素を呼び出し元の要素の子要素として追
加する。
JavaScriptで生成した要素をHTMLに書き
込む手段として用いる事が出来る
ＤＯＭ操作 関数(要素作成)
element.setAttribute("src", "xxx.gif");
引数：１つ目・・・設定する属性名
２つ目・・・設定する属性値
機能：対象の要素に属性と属性値を設定する。
ＤＯＭ操作 要素の作り方
画像要素を作成(+変数に格納)
var node = document.createElement(“img”)
↓ 生成されたタグ
img(画像)要素
<img>
変数の格納したほうが扱いやすいので、癖をつけて
下さい。
ＤＯＭ操作 要素の作り方
画像要素を作成
node.setAttribute(“src”,”owata.jpg”) ;
↓ 生成されたタグ
<img src=“owata.jpg”>
img(画像）要素
owata.jpg
DOM操作 要素の取り出し方
var dom = objects.getElementById(node)
引数(node)：要素を取得したいオブジェクトのid属性値
機能：対象のオブジェクト群の中から、引数で指定したid
を持つノード(要素)を取得する。親要素objects
はファイルの種類によって変わる
HTML：document
XML：xmlのタグを格納した変数
これにより、階層構造の要素をたどらずに、オブ
ジェクトの取得が可能になる
DOM操作 要素の取り出し方
var dom =
objects.getElementsByTagName(node)
引数(node)：要素を取得したいオブジェクトのタグ名
機能：対象のオブジェクト群の中から、引数で指定したタグ
名で定義されたデータをすべて取得する。戻り値を格納
した変数は自動的に配列になる。
基本的に、XMLのデータを格納する際に用いられる。つ
まり、親要素objectsはXMLのタグを格納した変数とな
る。
HTML動的書き換えの関数
node.innerHTML(data)
引数：挿入する要素(ノード)
node：内容を書き換える要素
機能：DOM操作で取得した要素nodeの中身を、引数の
要素に書き換える。簡単にいえば、１つのタグの中
身のデータをそのまま入れ替える関数である。
DOMを用いたHTMLの編集
例えば以下のように…
<form id=“myForm” name=“myForm”>
<input type=“text” id=“txt1” name=“txt1”>
</input>
</form>
テキストフォームを生成
DOMを用いたHTMLの編集
データを取り出す
var dom1 = document.myForm.txt1.value
・・・DOM構造のHTML部を辿ってデータを取得
var dom1 =
document.getElementById(“txt1”).value
・・・documentオブジェクト以下は、id名を指定すれば
一括でデータを取得したい要素を指定できる
DOMを用いたHTMLの編集
ボタンにアクセス
テキストフォーム
にアクセス
このように、たどってアクセスしていたものを・・・
DOMを用いたHTMLの編集
子オブジェクトに直接アクセスできるようになった。手間が省ける
動的書き換えに便利なタグ
<div>タグ
・・・divタグはタグ自体は効果を持たず、タグで囲んだ
範囲のデータをひとまとまりの要素として扱うことが
出来るタグ。例えば、データがない範囲をdivタグで
囲み、属性をつけて・・・
<div id=“node1” name=“node1”></div>
これをinnerHTML関数の親要素に指定するだけで
JavaScriptで操作した要素の挿入先を作ることが
出来る
ＤＯＭ操作 HTMLへの組み込み
これまでの技術を組み合わせる…
変数 node (画像タグが格納されている)
↓ 格納内容
img(画像）要素
owata.jpg
<img src=“owata.jpg”>
ＤＯＭ操作 HTMLへの組み込み
これまでの技術を組み合わせる…
↓ 生成されたタグ
divタグを作成し…
<div id=“div1”
name=“div1”></div>
var node2 = document.getElementById(“div1”);
・・・作成したdivタグをDOM操作で変数に格納
ＤＯＭ操作 HTMLへの組み込み
node2.appendChild(node) ;
// 画像タグをdivタグの子要素として追加
↓ 生成されたタグ
img(画像）要素
owata.jpg
<div id=“div1”
name=“div1”>
<img src=“owata.jpg”>
</div>
JavaScript内で生成した要素を、HTML内に組
み込むことが出来る。
課題１
前回のレクチャーの課題１で作成したXML
ファイルを読み込み、要素を出力する
※出力するのは格納したデータのみでＯＫ。
ただし、出力時に、どのゼミのデータか分
かるようにすること。
(例えば、格納されたデータの間に
JavaScriptで文字列を追加するなど…)
課題２
<tr>タグ、<td>タグ、を生成して、動的に表を追
加するプログラムを作る
サンプル
課題２ 補足
作成手順
１、あらかじめHTML部分に<table>タグのみ
を定義(idかname属性は設定するように)
２、<tr>タグを作成し、変数に格納
３、列数分の<td>タグを作成し、それぞれ変
数に格納
課題２ 補足
４、列にデータを記載したい(文字列、オブジェ
クト)場合、その要素を作成する
５、４の要素を作成した場合、それを３(<td>
タグ)の子要素として追加する
課題２ 補足
６、５の要素も含め、すべてのtdタグを２(<tr>
タグ)の子要素として追加する
７、<tr>タグをあらかじめ定義したtableタグ
の子要素に追加する
課題３(仮)
動的なHTML要素の編集
文章キーワード変換プログラム
文章の色々なキーワードを動的に変化させる
プログラム。
サンプル
課題４
これまでの技術(HTMLオブジェクトの取り出
し＆編集、XML読み込み、DOM操作、)を用
いて、動的なHTMLプログラムを作成しよう
評価ポイント
HTMLオブジェクトの取り出し、DOM操作
は最低限入れる
XMLファイルを反映させたらさらに加点
機能性のあるプログラム、コメント