Yahoo UI Library「DOM操作」

Yahoo UI Libraryにはブラウザ上に表示されたドキュメントを操作するための命令が用意されています。まず、ページ上のHTMLエレメント（タグ）を取得して、内容を書き換えてみましょう。
Yahoo UI Libraryでページ上のHTMLエレメントを取得するにはYAHOO.util.Dom.get()を使います。()の中に取得したいHTMLエレメントのID名を指定します。例えばdivタグに<div id="abc">のようにID名が指定されていればYAHOO.util.Dom.get("abc")とするとアクセスできるようになります。これはdocument.getElementById("abc")と同じなのでinnerHTMLプロパティに表示したい文字列を入れれば画面に文字が表示されます。
実際のサンプルは以下のようになります（サンプル01を実行する）。

【サンプル01】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript"></script>
</head>
<body>
<h1>文字を表示します</h1>
<form>
<input type="button" value="文字を表示" onClick="displayMessage()">
</form>
<div id="contents"></div>
</body>
</html>

YAHOO.util.Dom.get()の()内にはID名だけでなくHTMLエレメントオブジェクトを指定することもできます。例えば以下のように指定しても期待通り動作します。（サンプル02を実行する）

【サンプル02】
var cont = document.getElementById("contents");
YAHOO.util.Dom.get(cont).innerHTML = "ヤフ～!!";

2カ所にYAHOO.util.Dom.get()を使って文字を表示するには以下のように2つ続けて書きます。（サンプル03を実行する）

【サンプル03】
YAHOO.util.Dom.get("contents1").innerHTML = "ヤフ～!!";
YAHOO.util.Dom.get("contents2").innerHTML = "UIライブラリ";

もし、別々の文字ではなくて同じ文字でも良いのであればYAHOO.util.Dom.get()の()内に配列形式でID名またはHTMLエレメントオブジェクトを指定して書き換えることができます。（サンプル04を実行する）

【サンプル04】
var cont = YAHOO.util.Dom.get(["contents1","contents2"]);
for (var i=0; i<cont.length; i++) {
cont[i].innerHTML = "ヤフ～!!"
}

毎回YAHOO.util.Dom.get()を書くのが面倒な場合には一旦変数にYAHOO.util.Domを入れてしまえば以下のように短く書くことができます。（サンプル05を実行する）

【サンプル05】
var YH = YAHOO.util.Dom;
function displayMessage(){
YH.get("contents1").innerHTML = "ヤフ～!!";
YH.get("contents2").innerHTML = "UIライブラリ";
}

余談ですが、PrototypeライブラリとjQueryでは$()、Adobe SpryではSpry.$()でYAHOO.util.Dom.get()と同じ機能になります。実際には$()の方が高機能で、同様のことをYahoo UI Libraryで行なうには他の命令を使い分けなければいけません。ここらへんは、ちょっと面倒かもしれません。

[目次へ]

ページ上の内容を書き換える