スポンサードリンク

Yahoo! User Interface Library - Dom Collection

Dom Collectionとは

Dom Collectionとは、document.getElementById('foo').style.top = '100px'のようなDOM スクリプトを簡単にするスクリプト集です。これらはクロスブラウザー対応(ブラウザ毎の仕様の違いを吸収)しています。

詳しくはhttp://developer.yahoo.com/yui/dom/のオリジナルを読まれるのがよいと思います。

Dom Collectionを使う前準備

必要なのは2つのファイルです。もちろんインストールは済ませておく必要があります。

<script type="text/javascript" src="your install path/yahoo-min.js"></script>
<script type="text/javascript" src="your install path/dom-min.js"></script>

このページではさらにEventを使っています。

<script type="text/javascript" src="your install path/event-min.js"></script>

Methodの紹介

使いそうなMethodのサンプルを幾つか試してみます。

get	指定したElementを取得する
getViewportHeight	現在のウィンドウの高さを返す
getViewportWidth	現在のウィンドウの幅を返す
getElementsBy	条件を指定してElementを取得する
getElementsByClassName	`getElementsBy`のclass版
getRegion	top, right, bottom, left の値を返す
getXY	指定したElementの座標を返す
setStyle	styleを設定する

get


HTMLElement/Array get (<String/HTMLElement/Array> el)

パラメータ:

el - Element or id or それらの配列

サンプル:

var el_a = YAHOO.util.Dom.get(['id1', 'id2', 'id3']);
for (var i=0; i<el_a.length; i++) {
    if (el_a[i]==null) {
        document.write("id=" + (i+1) + "は存在しません<br />");
    } else {
        document.write(el_a[i].tagName + " id=" + (i+1) + "が存在します<br />");
    }
}
...
...
<span id="id1"></span><font id="id2"></font>

デモ:

↓ 実際にdocument.write で出力した結果が表示されています。

getViewportHeight, getViewportWidth

Int getViewportHeight ()
Int getViewportWidth ()

サンプル:

function viewport(event) {
    YAHOO.util.Dom.get('output').innerHTML = 
        "height: " + YAHOO.util.Dom.getViewportHeight() +
        " width: " + YAHOO.util.Dom.getViewportWidth();
}

YAHOO.util.Event.addListener(window, "load", viewport);
YAHOO.util.Event.addListener(window, "resize", viewport);
...
...
<div id="output"><div>

デモ:

↓ ウィンドウのサイズを変えると、現在のウィンドウのheight, widthが表示されます。

＊サンプル中のaddListenerについてはEvent Utility編を見てください。

getElementsBy

Array getElementsBy (<Function> method, <String> tag, <String/HTMLElement> root)

パラメータ:

method - Elementを評価する関数。trueを返すと戻値としてElementが返ってくる。

tag - 評価するElementのタグ名を指定

root - 評価するElementの範囲。指定したElementの子要素を評価

サンプル:

/* 引数にElementを取るfunctionを用意
   目的のElementだったらtrueを返す。*/
function startsWith(element) {
    if (element == null) return false;
    return (element.id.indexOf("el") == 0);
}

document.write("'el' で始まるidをもつdivタグは" +
    YAHOO.util.Dom.getElementsBy(startsWith, "div").length +
    "個です。");
...
...
<div id="el1">div id=el1</div>
<div id="hoge">div id=hoge</div>
<span id="el3">span id=el3</span>

デモ:

div id=el1

div id=hoge

span id=el3

↓ 実際にdocument.write で出力した結果が表示されています。

getElementsByClassName

Array getElementsByClassName (<String> className, <String> tag, <String/HTMLElement> root)

パラメータ:

className - <div class="foo"> <span class="foo bar"> とあった場合、'foo' や 'bar' を指定する。getElementsByと違いclass名はユニークでなくても良いので、Function で判断するのではなくclass名だけでElementが取得できるようにしたのだと思われる。

tag - 評価するElementのタグ名を指定

root - 評価するElementの範囲。指定したElementの子要素を評価

サンプル:

document.write("'myclass' というclassのElementは" + 
    YAHOO.util.Dom.getElementsByClassName("myclass").length +
    "個です。");
...
...
<div class="myclass">div class=myclass</div>
<div class="myclass otherclass">div class=myclass otherclass</div>
<span class="myclass-2">span class=myclass-2</span>

デモ:

div class=myclass

div class=myclass otherclass

span class=myclass-2

↓ 実際にdocument.write で出力した結果が表示されています。

getRegion, getXY

Object getRegion (<String/HTMLElement/Array> el)
Array getXY (<String/HTMLElement/Array> el)

パラメータ:

el - Element or id or それらの配列

サンプル:

document.write( YAHOO.util.Dom.getRegion("hoge") );
document.write( YAHOO.util.Dom.getXY("hoge") );

デモ:

↓ 実際にdocument.write で出力した結果が表示されています。

X座標とY座標で位置が特定できるので、Regionが必要になるのはあまりないかもしれません。

setStyle

void setStyle (<String/HTMLElement/Array> el, <String> property, <String> val)

パラメータ:

el - Element or id or それらの配列

property - styleのプロパティー(position, display, topなど)

val - propertyに設定する値

サンプル:

function setStyle(event) {
    YAHOO.util.Dom.setStyle(this.id, "color", "red");
    YAHOO.util.Dom.setStyle(this.id, "border", "5px solid black");
}
YAHOO.util.Event.addListener("set", "click", setStyle);

デモ:

ここをクリックすると
color = 'red'
border = '5px solid black'
が設定されます。

メールアドレス:
コメント^*: