Search
  1. 要素の幅・高さを取得〔getWidth()/getHeight()〕
  2. positionedOffset〔positionedOffset()〕
  3. 後にある弟要素を自要素に近い順に取得し配列で返す〔nextSiblings()〕
  4. recursivelyCollect〔recursivelyCollect()〕
  5. previousSiblings()で取得できる要素群の中からindexで指定された要素を返す〔previous()〕
  6. 前にある兄弟要素を自要素に近い順に取得し配列で返す〔previousSiblings()〕
  7. 要素をラップする〔wrap()〕
  8. 要素の最初の要素としてデータを挿入
  9. クラス名削除〔removeClassName()〕
  10. toggleClassName〔toggleClassName()〕
  11. select〔select()〕
  12. writeAttribute〔writeAttribute()〕
  13. setOpacity〔setOpacity()〕
  14. 要素の表示状態を調べる〔visible()〕
  15. 要素の内容を変更する〔update()〕
  16. 特定の要素までスクロール〔scrollTo()〕
  17. 要素をHTML文字列に置換〔replace()〕
  18. 要素を削除〔remove()〕
  19. 要素の表示状態を切り替える〔toggle()〕
  20. 要素にイベントで起動する関数を割り当てる〔observe()〕
  21. 兄弟要素をすべて取得し配列で返す〔siblings()〕
  22. 要素の表示状態を変更する〔show()/hide()〕
  23. マッチする要素を見つける?〔adjacent()〕
  24. 要素にクラス追加〔addClassName()〕
  25. 要素に複数のスタイルを一括指定〔setStyle()〕
  26. cumulativeScrollOffset〔cumulativeScrollOffset()〕
  27. clonePosition〔clonePosition()〕
  28. childElements〔childElements()〕
  29. 要素の後にデータを挿入
  30. 要素の前にデータを挿入
  31. relativize〔relativize()〕
  32. 要素の子ノードのホワイトスペース除去〔cleanWhitespace()〕
  33. 要素を絶対位置にする〔absolutize()〕
  34. すべての祖先要素を自身の自要素に近い順に取得し配列で返す〔ancestors()〕
  35. readAttribute〔readAttribute()〕
  36. 要素の座標系を変更〔makePositioned()/undoPositioned()〕
  37. 要素に特定のクラス名が含まれるか調べる〔hasClassName()〕
  38. すべての子孫要素を自要素に近い順に取得し配列で返す〔descendants()〕
  39. 要素のスタイルを取得〔getStyle()〕
  40. extend〔extend()〕
  41. nextSiblings()で取得できる要素群の中からindexで指定された要素を返す〔next()〕
  42. はみ出した部分の表示方法を指定〔makeClipping()/undoClipping()〕
  43. デバッグ用の文字列を返す〔inspect()〕
  44. insert〔insert()〕
  45. 要素が空か調べる〔empty()〕
  46. descendants()で取得できる要素群の中からindexで指定された要素を返す〔down()〕
  47. descendantOf〔descendantOf()〕
  48. getOffsetParent〔getOffsetParent()〕
  49. 特定のクラス名の要素にアクセス(子要素以下から、指定された文字列のclass名を持つ要素を取得し配列で返す)〔getElementsByClassName()〕
  50. 要素の幅・高さを取得(要素が隠れている場合も取得可能)〔getEimensions()〕
  51. firstDescendant〔firstDescendant()〕
  52. 要素のクラス名を取得〔classNames()〕
  53. identify〔identify()〕
  54. ancestors()で取得できる要素群の中からindexで指定された要素を返す〔up()〕
  55. observeで割り当てたイベントをキャンセルする〔stopObserving()〕
  56. 要素の末尾の要素としてデータを挿入
  57. ビューポートに比例する要素のXY座標を返す〔viewportOffset()〕
  58. CSSセレクタ、1文節分とマッチするかを返す〔match()〕
  59. fire〔fire()〕
  60. 要素にメソッド追加〔addMethods()〕

要素の幅・高さを取得
getWidth()/getHeight()

unknown

Element.getWidth(要素);
Element.getHeight(要素);

getWidth()メソッドは、要素の幅(px)を返します。 getHeight()メソッドは、要素の高さ(px)を返します。 これらのメソッドで取得する幅・高さは、borderとpaddingは含まれますが、marginは含まれません。

サンプルを見る
<p><img id="elm_gh" src="/content/img/pic2-thumb.png" alt="Dog" /></p>
<textarea id="res_gh" style="width:90%;"></textarea>

<script type="text/javascript">
    $("res_gh").value="幅: "+Element.getWidth("elm_gh")+"px"+"\n";
    $("res_gh").value+="高さ: "+Element.getHeight("elm_gh")+"px";
</script>

positionedOffset
positionedOffset()

unknown

$(element).positionedOffset(element) -> [Number, Number] also accessible as { left: Number, top: Number }

後にある弟要素を自要素に近い順に取得し配列で返す
nextSiblings()

unknown

$(element).nextSiblings(element) -> [HTMLElement...]

後にある兄弟要素を要素自身に近い順に取得し、配列として返します。

サンプルを見る
<ul>
    <li id="golden-delicious">Golden Delicious</li>
    <li id="mutsu">Mutsu</li>
    <li id="mcintosh">McIntosh</li>
    <li id="ida-red">Ida Red</li>
</ul>
<textarea id="res_nextsiblings" style="width:90%;"></textarea>

<script type="text/javascript">
    $("res_nextsiblings").value=$('mutsu').nextSiblings().inspect()+"\n";
    $("res_nextsiblings").value+=$('ida-red').nextSiblings().inspect();
</script>

recursivelyCollect
recursivelyCollect()

unknown

$(element).recursivelyCollect(element, property) -> [HTMLElement...]
サンプルを見る
<ul id="fruits">
    <li id="apples">
        <ul id="list-of-apples">
            <li id="golden-delicious"><p>Golden Delicious</p></li>
            <li id="mutsu">Mutsu</li>
            <li id="mcintosh">McIntosh</li>
            <li id="ida-red">Ida Red</li>
        </ul>
    </li>
</ul>
<textarea id="res_recursivelycollect" style="width:90%;"></textarea>

<script type="text/javascript">
    $("res_recursivelycollect").value=$('fruits').recursivelyCollect('firstChild').inspect();
</script>

previousSiblings()で取得できる要素群の中からindexで指定された要素を返す
previous()

unknown

$(element).previous(element[, cssRule][, index = 0]) -> HTMLElement | undefined

previousSiblings()メソッドで取得できる要素配列の中からindexで指定された要素を返します。 オプションの第2引数indexを省略した場合は、1番目の要素を返します。 オプションの第1引数selectorを指定した場合は、CSSセレクタによって要素を絞り、1番目の要素を返します。

サンプルを見る
<ul id="fruits">
    <li id="apples">
        <h5>Apples</h5>
        <ul id="list-of-apples">
            <li id="golden-delicious" class="yummy">Golden Delicious</li>
            <li id="mutsu" class="yummy">Mutsu</li>
            <li id="mcintosh">McIntosh</li>
            <li id="ida-red">Ida Red</li>
        </ul>
        <p id="saying">An apple a day keeps the doctor away.</p>  
    </li>
</ul>
<textarea id="res_nextsiblings" style="width:90%; height:8em;"></textarea>

<script type="text/javascript">
    $('saying').previous();
    // equivalent:
    $("res_nextsiblings").value=$('saying').previous(0).inspect()+"\n";
    $("res_nextsiblings").value+=$('saying').previous(1).inspect()+"\n";
    $("res_nextsiblings").value+=$('saying').previous('h5').inspect()+"\n";
    $("res_nextsiblings").value+=$('ida-red').previous('.yummy').inspect()+"\n";
    $("res_nextsiblings").value+=$('ida-red').previous('.yummy', 1).inspect()+"\n";
    $("res_nextsiblings").value+=$('ida-red').previous(5).inspect()+"\n";
    // -> undefined
</script>

前にある兄弟要素を自要素に近い順に取得し配列で返す
previousSiblings()

unknown

$(element).previousSiblings(element) -> [HTMLElement...]

前にある兄弟要素を要素自身に近い順に取得し、配列として返します。

サンプルを見る
<ul>
    <li id="golden-delicious">Golden Delicious</li>
    <li id="mutsu">Mutsu</li>
    <li id="mcintosh">McIntosh</li>
    <li id="ida-red">Ida Red</li>
</ul>
<textarea id="res_previoussiblings" style="width:90%;"></textarea>

<script type="text/javascript">
    $("res_previoussiblings").value=$('mcintosh').previousSiblings().inspect()+"\n";
    $("res_previoussiblings").value+=$('golden-delicious').previousSiblings().inspect();
</script>

要素をラップする
wrap()

unknown

Element.wrap(element, wrapper[, attributes]) -> HTMLElement
someElement.wrap(wrapper[, attributes]) -> HTMLElement
サンプルを見る
<style type="text/css">
.tbl {
    font-size:83%;
    margin:0 0 1em 0; padding:0;
}
.tbl th,
.tbl td,
.tbl caption {
    font-size:100%;
}
.tbl th *,
.tbl td * {
    font-size:100%;
}
.tbl table {
    width:auto;
    margin:0; padding:0;
    border-width:1px; border-style:solid; border-color:#ddd #ccc #ccc #ddd;
    border-collapse:separate;
    border-spacing:1px;
}
.tbl caption {
    margin-bottom:0;
    color:#666;
    text-align:left;
    white-space:nowrap;
}
.tbl th {
    padding:.2em .5em;
    border-width:0 1px 1px 0;
    border-style:solid;
    border-color:#ccc;
    color:#536066;
    background-color:#eee;
    font-weight:bold;
    text-align:left;
}
.tbl td {
    padding:.2em .5em;
    border-width:1px;
    border-style:solid;
    border-color:#eee #ccc #ccc #eee;
}
</style>
<div id="test">
  <table id="data">
    <tr>
      <th>Foo</th>
      <th>Bar</th>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
  </table>
</div>
<textarea id="res_wrap" style="width:90%; height:10em;"></textarea>

<script type="text/javascript">
    /* table#dataをdiv.tblでラップする */

    /* 方法1 */
    var div = new Element('div', { 'class': 'tbl' });
    $('data').wrap(div);

    /* 方法2 */
    //$('data').wrap('div', { 'class': 'table-wrapper' });

    $("res_wrap").value=$("test").innerHTML;
</script>

要素の最初の要素としてデータを挿入

unknown

new Insertion.Top(要素, 挿入するデータ);
<a id="feedLink2" href="http://phpjavascriptroom.com/index.xml">RSS Feed</a>

<script type="text/javascript">
    new Insertion.Top("feedLink2","<img src='/content/img/icon/color/rss.gif' alt='RSS' /> ");
</script>

クラス名削除
removeClassName()

unknown

$(element).removeClassName(element, className) -> HTMLElement

要素から指定したクラス名を削除します。

サンプルを見る
<div id="mutsu" class="apple fruit food"></div>
<textarea id="res_removeclassname" style="width:90%;"></textarea>

<script type="text/javascript">
    $('mutsu').removeClassName('food');
    $("res_removeclassname").value=$('mutsu').classNames().inspect();
</script>

toggleClassName
toggleClassName()

unknown

$(element).toggleClassName(element, className) -> HTMLElement
サンプルを見る
<div id="mutsu" class="apple"></div>
<textarea id="res_toggleclassname" style="width:90%;"></textarea>

<script type="text/javascript">
    $("res_toggleclassname").value=$('mutsu').hasClassName('fruit')+"\n";
    $("res_toggleclassname").value+=$('mutsu').toggleClassName('fruit').inspect()+"\n";
    $("res_toggleclassname").value+=$('mutsu').hasClassName('fruit');
</script>

select
select()

unknown

$(element).select(element, selector...) -> [HTMLElement...]
サンプルを見る
<ul id="fruits">
  <li id="apples">
    <h5 title="yummy!">Apples</h5>
    <ul id="list-of-apples">
      <li id="golden-delicious" title="yummy!" >Golden Delicious</li>
      <li id="mutsu" title="yummy!">Mutsu</li>
      <li id="mcintosh">McIntosh</li>
      <li id="ida-red">Ida Red</li>
    </ul>
    <p id="saying">An apple a day keeps the doctor away.</p>  
  </li>
</ul>
<textarea id="res_select" style="width:90%;"></textarea>

<script type="text/javascript">
    $("res_select").value=$('apples').select('[title="yummy!"]').inspect()+"\n";
    $("res_select").value+=$('apples').select( 'p#saying', 'li[title="yummy!"]')+"\n";
    $("res_select").value+=$('apples').select('[title="disgusting!"]');
</script>

writeAttribute
writeAttribute()

unknown

writeAttribute(element, attribute[, value = true]) -> HTMLElement
writeAttribute(element, attributes) -> HTMLElement

setOpacity
setOpacity()

unknown

Element.setOpacity(element, opacity) -> [HTMLElement...]
someElement.setOpacity(opacity) -> [HTMLElement...]
<script type="text/javascript">
/*
var element = $('myelement');
// set to 50% transparency
element.setOpacity(0.5);

// these are equivalent, but allow for setting more than
// one CSS property at once:
element.setStyle({ opacity: 0.5 });
element.setStyle("opacity: 0.5");
*/
</script>

要素の表示状態を調べる
visible()

unknown

$(element).visible(element) -> Boolean

要素の表示状態を調べます。 要素が表示されている場合はTRUE、非表示になっている場合はFALSEを返します。

サンプルを見る
<input type="button" onclick="fVisible()" value="要素の表示状態を調べて表示切替" /><br>
<div id="elm_visible1">
    <p>
        <img src="/content/img/banner/banner6.gif" alt="logo" class="middle" />
        PHP & JavaScript Roomへようこそ!
    </p>
</div>
<div id="elm_visible2" style="display:none;">
    <p>
        <img src="/content/img/banner/banner7.gif" alt="logo" align="left" style="margin-right:5px;" />
        PHP、JavaScript、CSS、ウェブ埋め込みによる音声・動画配信方法など、実用的なプログラミング・テクニックを解説しています。
    </p>
</div>

<script type="text/javascript">
    function fVisible(){
        var elm1="elm_visible1";
        var elm2="elm_visible2";
        if(Element.visible(elm1)){
            $(elm1).hide();
            $(elm2).show();
        }else{
            $(elm1).show();
            $(elm2).hide();
        }
    }
</script>

要素の内容を変更する
update()

unknown

$(element).update(element[, newContent]) -> HTMLElement

要素のinnerHTMLを書き換えます。

サンプルを見る
<input type="button" onclick="fUpdate('elm_update')" value="要素の内容を変更" /><br>
<div id="elm_update">
    <img src="/content/img/banner/banner6.gif" alt="logo" class="middle" />
    PHP & JavaScript Roomへようこそ!
</div>

<script type="text/javascript">
    function fUpdate(elm){
        var htmlString='<p><img src="/content/img/banner/banner7.gif" alt="logo" align="left" style="margin-right:5px;" />PHP、JavaScript、CSS、ウェブ埋め込みによる音声・動画配信方法など、実用的なプログラミング・テクニックを解説しています。</p>';
        Element.update(elm, htmlString);
    }
</script>

特定の要素までスクロール
scrollTo()

unknown

$(element).scrollTo(element) -> HTMLElement

その要素の位置までウィンドウをスクロールさせます。 elementに要素を指定するとエラーになる。

サンプルを見る
<p>
    <input type="button" onclick="fScrollTo('content')" value="#contentの位置までスクロール" />
</p>


<script type="text/javascript">
    function fScrollTo(elm){
        Element.scrollTo(elm);
    }
</script>

要素をHTML文字列に置換
replace()

unknown

$(element).replace(element[, html]) -> HTMLElement

要素をHTML文字列に置換します。

サンプルを見る
<div id="food">
  <div id="fruits">
    <p id="first">Kiwi, banana <em>and</em> apple.</p>
  </div>
</div>
<textarea id="res_replace" style="width:90%;"></textarea>

<script type="text/javascript">
    $('first').replace('<ul id="favorite"><li>kiwi</li><li>banana</li><li>apple</li></ul>');
    $("res_replace").value=$('fruits').innerHTML;
</script>

要素を削除
remove()

unknown

$(element).remove(element) -> HTMLElement

要素を削除します。

サンプルを見る
<p>
    <input type="button" onclick="fRemove()" value="リストのアイテムを削除" />
</p>

<ul id="elm_remove">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
</ul>

<script type="text/javascript">
    function fRemove(){
        Element.remove("elm_remove");
    }
</script>

要素の表示状態を切り替える
toggle()

unknown

($element).toggle(element) -> HTMLElement

要素が非表示の場合は要素を表示し、要素が表示されている場合は要素を非表示にします。

サンプルを見る
<input type="button" onclick="fToggle('elm_toggle')" value="表示切替" /><br>
<div id="elm_toggle">
    <img src="/content/img/banner/banner6.gif" alt="logo" class="middle" />
    PHP & JavaScript Roomへようこそ!
</div>

<script type="text/javascript">
    function fToggle(elm){
        Element.toggle(elm);
    }
</script>

要素にイベントで起動する関数を割り当てる
observe()

unknown

$(element).observe(element, eventName, handler[, useCapture = false]) -> HTMLElement

要素にイベントで起動する関数を割り当てます。 第1引数eventNameはonを含まない文字列であり、'click'や'mouseover'のようになります。 第2引数eventObserverには、関数オブジェクトを指定します。

サンプルを見る
<textarea id="res_observe" style="width:90%;">ここをクリックするとテキストエリアの内容をアラート表示</textarea>

<script type="text/javascript">
    $("res_observe").observe('click', function(event){
        alert(Event.element(event).innerHTML);
     });
    // -> HTMLElement (and will display an alert dialog containing 
    // element's innerHTML when element is clicked).
</script>

兄弟要素をすべて取得し配列で返す
siblings()

unknown

$(element).siblings(element) -> [HTMLElement...]

兄弟要素をすべて取得し、配列として返します。

サンプルを見る
<ul>
    <li id="golden-delicious">Golden Delicious</li>
    <li id="mutsu">Mutsu</li>
    <li id="mcintosh">McIntosh</li>
    <li id="ida-red">Ida Red</li>
</ul>
<textarea id="res_siblings" style="width:90%;"></textarea>

<script type="text/javascript">
    $("res_siblings").value=$('mutsu').siblings().inspect();
</script>

要素の表示状態を変更する
show()/hide()

unknown

Element.show(要素);
Element.hide(要素);

show()メソッドは、要素を表示します(display:block;)。
hide()メソッドは、要素を非表示にします(display:none;)。

サンプルを見る
<p id="elm_show" style="display:show;">id: elm_show</p>
<p id="elm_hide" style="display:hide;">id: elm_hide</p>

<script type="text/javascript">
    Element.show("elm_hide")+"\n";
    Element.hide("elm_show");
</script>

マッチする要素を見つける?
adjacent()

unknown

Element.adjacent(element[, selectors...]) -> [HTMLElement...];
someElement.adjacent([selectors...]) -> [HTMLElement...]
サンプルを見る
<ul id="cities">
    <li class="us" id="nyc">New York</li>
    <li class="uk" id="lon">London</li>
    <li class="us" id="chi">Chicago</li>
    <li class="jp" id="tok">Tokyo</li>
    <li class="us" id="la">Los Angeles</li>
    <li class="us" id="aus">Austin</li>
</ul>
<textarea id="res_adj" style="width:90%;"></textarea>

<script type="text/javascript">
    $("res_adj").value=$('nyc').adjacent('li.us').inspect();
</script>

要素にクラス追加
addClassName()

unknown

Element.addClassName(要素, クラス名);

要素に指定したクラス名を追加します。

サンプルを見る
<style type="text/css">
    .fw { font-weight:bold; }
    .cblue { color:blue; }
</style>

<div id="box">青色で太字。</div>

<script type="text/javascript">
    Element.addClassName("box", "fw");
    Element.addClassName("box", "cblue");
</script>

<div id="elm_add" class="cyan">div#elm_add</div>
<textarea id="res_add" style="width:90%;"></textarea>

<style type="text/css">
    .cyan { color:cyan; }
    .bold { font-weight:bold; }
    .italic { font-style:italic; }
</style>

<script type="text/javascript">
    $('elm_add').addClassName('bold');
    $('elm_add').addClassName('italic');
    $("res_add").value=$('elm_add').className+"\n";
    $("res_add").value+=$('elm_add').classNames().inspect();
</script>

要素に複数のスタイルを一括指定
setStyle()

unknown

Element.setStyle(element, cssList);

オブジェクトを渡すと、そのプロぱひと値を見てスタイルを定義します。

サンプルを見る
<p>
    <input type="button" onclick="fSetStyle()" value="set" />
</p>
<div id="elm_setstyle">サンプル。</div>
<script type="text/javascript">
    function fSetStyle(){
        $("elm_setstyle").setStyle({
            backgroundColor: 'yellow',
            fontSize: '2em'
        });
    }
</script>

cumulativeScrollOffset
cumulativeScrollOffset()

unknown

cumulativeScrollOffset(element) -> [Number, Number] also accessible as { left: Number, top: Number }

clonePosition
clonePosition()

unknown

clonePosition(element, source[, options]) -> HTMLElement

childElements
childElements()

unknown

childElements(element) -> [HTMLElement...]
サンプルを見る
<div id="australopithecus">
    <div id="homo-erectus">
        <div id="homo-neanderthalensis"></div>
        <div id="homo-sapiens"></div>
    </div>
</div>
<textarea id="res_childelms" style="width:90%;"></textarea>

<script type="text/javascript">
    $("res_childelms").value=$('australopithecus').childElements().inspect()+"\n";
    $("res_childelms").value+=$('homo-erectus').childElements().inspect()+"\n";
    $("res_childelms").value+=$('homo-sapiens').childElements().inspect();
</script>

要素の後にデータを挿入

unknown

new Insertion.Bottom(要素, 挿入するデータ);
サンプルを見る
<a id="externalLink2" href="http://www.google.co.jp/">Google</a>

<script type="text/javascript">
    new Insertion.After("externalLink2","<img src='/content/img/icon/external.gif' alt='外部リンク' /> ");
</script>

要素の前にデータを挿入

unknown

new Insertion.Before(要素, 挿入するデータ);
サンプルを見る
<a id="feedLink" href="http://phpjavascriptroom.com/index.xml">RSS Feed</a>

<script type="text/javascript">
    new Insertion.Before("feedLink","<img src='/content/img/icon/color/rss.gif' alt='RSS' /> ");
</script>

relativize
relativize()

unknown

$(element).relativize(element) -> HTMLElement

要素の子ノードのホワイトスペース除去
cleanWhitespace()

unknown

Element.cleanWhitespace(要素);

子ノードから空白のみのテキストノードを削除します。

サンプルを見る
<ul id="elm_cleanWhitespace">
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
</ul>

▼子ノードのホワイトスペース除去前<br>
<textarea id="def_cleanWhitespace" style="width:90%; height:6em;"></textarea><br>
▼子ノードのホワイトスペース除去後<br>
<textarea id="res_cleanWhitespace" style="width:90%;"></textarea>

<script type="text/javascript">
    $("def_cleanWhitespace").value=$("elm_cleanWhitespace").innerHTML;
    Element.cleanWhitespace("elm_cleanWhitespace");
    $("res_cleanWhitespace").value=$("elm_cleanWhitespace").innerHTML;
</script>

要素を絶対位置にする
absolutize()

unknown

absolutize(element) → HTMLElement
サンプルを見る
<p><input type="button" onclick="fAbsolutize()" value="要素のpotisionをabsoluteにする" /></p>

<style type="text/css">
    div#elm_abs  { width:100px; height:100px; background-color:yellow; }
</style>

<div id="elm_abs">div#elm_abs</div>

<script type="text/javascript">
    function fAbsolutize(){
        Position.absolutize("elm_abs");
    }
</script>

すべての祖先要素を自身の自要素に近い順に取得し配列で返す
ancestors()

unknown

ancestors(element) -> [HTMLElement...]

すべての先祖要素を要素自身に近い順番に取得し、配列として返します。

サンプルを見る
<textarea id="res_anc" style="width:90%;"></textarea>

<script type="text/javascript">
    $("res_anc").value=$('container').ancestors().inspect()+"\n\n";
</script>

readAttribute
readAttribute()

unknown

$(element).readAttribute(element, attribute) -> String | null
サンプルを見る
<a id="tag" href="/tags/prototype" rel="tag" title="view related bookmarks." my_widget="some info.">Prototype</a>

<textarea id="res_readattribute" style="width:90%;"></textarea>

<script type="text/javascript">
    $("res_readattribute").value=$('tag').readAttribute('href')+"\n";
    $("res_readattribute").value+=$('tag').readAttribute('title')+"\n";
    $("res_readattribute").value+=$('tag').readAttribute('my_widget');
</script>

要素の座標系を変更
makePositioned()/undoPositioned()

unknown

Element.makePositioned(要素);
Element.undoPositioned(要素);

makePositioned()メソッドは、要素のpositionプロパティの値をrelativeにしてポジショニング可能にします。 undoPositioned()メソッドは、makePositioned()メソッドされた要素を元の状態に戻します。

サンプルを見る
<p>
    <input type="button" onclick="fMakePositioned()" value="座標系をrelativeにする" />
    <input type="button" onclick="fUndoPositioned()" value="座標系を無指定にする" />
</p>

<div style="position:relative; width:200px; height:200px; background:transparent url(/content/img/grid.gif) repeat top left;">
    <img id="elm_makepositioned" src="/content/img/dog_mini.gif" alt="Dog" style="top:100px; left:100px;" />
</div>

<script type="text/javascript">
    function fMakePositioned(){
        Element.makePositioned("elm_makepositioned");
    }
    function fUndoPositioned(){
        Element.undoPositioned("elm_makepositioned");
    }
</script>

要素に特定のクラス名が含まれるか調べる
hasClassName()

unknown

Element.hasClassName(要素, CSSクラス名);

要素が指定したクラス名を持っている場合にTRUE、持っていない場合にFALSEを返します。

サンプルを見る
<p class="caution" id="elm_hasclassname">サンプルテキスト。</p>

<textarea id="res_hasclassname" style="width:90%;"></textarea>

<script type="text/javascript">
    $("res_hasclassname").value=Element.hasClassName("elm_hasclassname", "note")+"\n";
    $("res_hasclassname").value+=Element.hasClassName("elm_hasclassname", "caution");
</script>

すべての子孫要素を自要素に近い順に取得し配列で返す
descendants()

unknown

descendants(element) -> [HTMLElement...]

全の子孫要素を要素自身に近い順番に取得し、配列として返します。

サンプルを見る
<div id="australopithecus">
  <div id="homo-herectus">
    <div id="homo-neanderthalensis"></div>
    <div id="homo-sapiens"></div>
  </div>
</div>
<textarea id="res_descendants" style="width:90%;"></textarea>

<script type="text/javascript">
    $("res_descendants").value=$('australopithecus').descendants().inspect()+"\n";
    $("res_descendants").value+=$('homo-sapiens').descendants().inspect();
</script>

要素のスタイルを取得
getStyle()

unknown

Element.getSyle(要素, CSSプロパティ名);

要素から指定したスタイルの値を取得します。 クロスブラウザ対応のため、IEでもopacityプロパティの値を取得可能です。

サンプルを見る
<p class="caution" id="elm_getstyle">サンプルテキスト。</p>

<textarea id="res_getstyle" style="width:90%; height:8em;"></textarea>

<script type="text/javascript">
    $("res_getstyle").value="font-size: "+Element.getStyle("elm_getstyle", "font-size")+"\n";
    $("res_getstyle").value+="color: "+Element.getStyle("elm_getstyle", "color")+"\n";
    $("res_getstyle").value+="background-color: "+Element.getStyle("elm_getstyle", "background-color")+"\n";
    $("res_getstyle").value+="background-image: "+Element.getStyle("elm_getstyle", "background-image")+"\n";
    $("res_getstyle").value+="background-repeat: "+Element.getStyle("elm_getstyle", "background-repeat")+"\n";
</script>

extend
extend()

unknown

$(element).extend(element);
サンプルを見る
<style type="text/css">
    .greeting { background-color:yellow; }
</style>

<div id="elm_extend">サンプルテキスト。</div>

<script type="text/javascript">
    $("elm_extend").update('Hello Internet').addClassName('greeting');
</script>

nextSiblings()で取得できる要素群の中からindexで指定された要素を返す
next()

unknown

$(element).next(element[, cssRule][, index = 0]) -> HTMLElement | undefined

nextSiblings()メソッドで取得できる要素配列の中からindexで指定された要素を返します。 オプションの第2引数indexを省略した場合は、1番目の要素を返します。 オプションの第1引数selectorを指定した場合は、CSSセレクタによって要素を絞り、1番目の要素を返します。

サンプルを見る
<ul id="fruits">
    <li id="apples">
        <h5 id="title">Apples</h5>
        <ul id="list-of-apples">
            <li id="golden-delicious">Golden Delicious</li>
            <li id="mutsu">Mutsu</li>
            <li id="mcintosh" class="yummy">McIntosh</li>
            <li id="ida-red" class="yummy">Ida Red</li>
        </ul>
        <p id="saying">An apple a day keeps the doctor away.</p>  
    </li>
</ul>
<textarea id="res_next" style="width:90%; height:8em;"></textarea>

<script type="text/javascript">
$('list-of-apples').next();
$("res_next").value=$('list-of-apples').next(0).inspect()+"\n";
$("res_next").value+=$('title').next(1).inspect()+"\n";

$("res_next").value+=$('title').next('p').inspect()+"\n";
$("res_next").value+=$('golden-delicious').next('.yummy').inspect()+"\n";
$("res_next").value+=$('golden-delicious').next('.yummy', 1).inspect()+"\n";
$('ida-red').next();
// -> undefined
</script>

はみ出した部分の表示方法を指定
makeClipping()/undoClipping()

unknown

Element.makeClipping(要素);
Element.undoClipping(要素);

makeClipping()メソッドは、要素のoverflowプロパティの値をhiddenにしてクリップ化します。 undoClipping()メソッドは、makeClipping()メソッドされた要素を元の状態に戻します。

サンプルを見る
<p>はみ出した部分を<input type="button" onclick="fMakeClipping()" value="隠す" /> or <input type="button" onclick="fUndoClipping()" value="表示する" /></p>
<div id="elm_makeclipping">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

<script type="text/javascript">
    function fMakeClipping(){
        Element.makeClipping("elm_makeclipping");
    }
    function fUndoClipping(){
        Element.undoClipping("elm_makeclipping");
    }
</script>

デバッグ用の文字列を返す
inspect()

unknown

$(element).inspect(element) -> String

可読可能な文字列を返します。

サンプルを見る
<ul>
    <li id="golden-delicious">Golden Delicious</li>
    <li id="mutsu" class="yummy apple">Mutsu</li>
    <li id="mcintosh" class="yummy">McIntosh</li>
    <li</li>
</ul>
<textarea id="res_inspect" style="width:90%;"></textarea>

<script type="text/javascript">
    $("res_inspect").value=$('golden-delicious').inspect()+"\n";
    $("res_inspect").value+=$('mutsu').inspect()+"\n";
    $("res_inspect").value+=$('mutsu').next().inspect()+"\n";
</script>

insert
insert()

unknown

$(element).insert(element, { position: content }) -> HTMLElement
$("element").insert(element, content) -> HTMLElement

要素が空か調べる
empty()

unknown

Element.empty(要素);

要素のinnerHTMLが空または空白の場合にTRUEを返します。

サンプルを見る
<ul>
    <li id="emp_item1">item1</li>
    <li id="emp_item2">      
    </li><!-- 半角スペース、全角スペース、タブ、改行 -->
    <li id="emp_item3"></li>
</ul>

<textarea id="res_emp_item" style="width:90%;"></textarea>

<script type="text/javascript">
    $("res_emp_item").value="emp_item1: "+Element.empty("emp_item1")+"\n";
    $("res_emp_item").value+="emp_item2: "+Element.empty("emp_item2")+"\n";
    $("res_emp_item").value+="emp_item3: "+Element.empty("emp_item3");
</script>

descendants()で取得できる要素群の中からindexで指定された要素を返す
down()

unknown

descendants()メソッドで取得できる要素配列の中から、indexで指定された要素を返します。 オプションの第2引数indexを省略した場合は、1番目の要素を返します。 オプションの第1引数selectorを指定した場合は、CSSセレクタによって要素を絞り、1番目の要素を返します。

サンプルを見る
<ul id="fruits">
  <li id="apples">
    <ul>
      <li id="golden-delicious">Golden Delicious</li>
      <li id="mutsu" class="yummy">Mutsu</li>
      <li id="mcintosh" class="yummy">McIntosh</li>
      <li id="ida-red">Ida Red</li>
    </ul>
  </li>
</ul>

<textarea id="res_down" style="width:90%;"></textarea>

<script type="text/javascript">
    $('fruits').down();
    // equivalent:

    $("res_down").value=$('fruits').down(0).inspect()+"\n";
    $("res_down").value+=$('fruits').down(3).inspect()+"\n";
    $("res_down").value+=$('apples').down('li').inspect()+"\n";
    $("res_down").value+=$('apples').down('li.yummy').inspect()+"\n";
    $("res_down").value+=$('fruits').down('.yummy', 1).inspect()+"\n";
    $("res_down").value+=$('fruits').down(99).inspect()+"\n";

</script>

descendantOf
descendantOf()

unknown

descendantOf(element, ancestor) -> Boolean
サンプルを見る
<div id="australopithecus">
  <div id="homo-herectus">
    <div id="homo-sapiens"></div>
  </div>
</div>
<textarea id="res_descendantof" style="width:90%;"></textarea>

<script type="text/javascript">
    $("res_descendantof").value=$('homo-sapiens').descendantOf('australopithecus')+"\n";
    $("res_descendantof").value+=$('homo-herectus').descendantOf('homo-sapiens');
</script>

getOffsetParent
getOffsetParent()

unknown

getOffsetParent(element) -> HTMLElement

特定のクラス名の要素にアクセス(子要素以下から、指定された文字列のclass名を持つ要素を取得し配列で返す)
getElementsByClassName()

unknown

Element.getElementsByClassName(クラス名, 親要素);

子要素以下から、指定された文字列のクラス名を持つ要素を取得し、配列として返します。

サンプルを見る
<div id="entries">
    <dl>
        <dt class="title">記事1</dt>
            <dd class="text">記事1の内容です。</dd>
        <dt class="title">記事2</dt>
            <dd class="text">記事2の内容です。</dd>
        <dt class="title">記事3</dt>
            <dd class="text">記事3の内容です。</dd>
    </dl>
</div>

<script type="text/javascript">
    var entryObj=document.getElementsByClassName("title","entries");
    entryObj.each(function(obj){
        obj.innerHTML="titleクラスです";
    });
</script>

要素の幅・高さを取得(要素が隠れている場合も取得可能)
getEimensions()

unknown

Element.getDimensions(要素);

要素自身の幅をwidthプロパティに、高さをheightプロパティに持ったオブジェクトを返します。 その要素が非表示の場合も取得可能です。

サンプルを見る
<p><img id="elm_gds" src="/content/img/dog_black.png" alt="Dog" readonly="readonly" /></p>

<textarea id="res_elm_gds" style="width:90%;"></textarea>

<script type="text/javascript">
    var obj=Element.getDimensions("elm_gds");
    $("res_elm_gds").value="幅: "+obj.width+"px\n高さ: "+obj.height+"px";
</script>

firstDescendant
firstDescendant()

unknown

サンプルを見る
<div id="australopithecus">
    <div id="homo-erectus"><!-- Latin is super -->
        <div id="homo-neanderthalensis"></div>
        <div id="homo-sapiens"></div>
    </div>
</div>

<script type="text/javascript">
$('australopithecus').firstDescendant();
// -> div#homo-herectus

// the DOM property returns any first node
$('homo-herectus').firstChild;
// -> comment node "Latin is super"

// this is what we want!
$('homo-herectus').firstDescendant();
// -> div#homo-neanderthalensis
</script>

要素のクラス名を取得
classNames()

unknown

Element.classNames(要素);
サンプルを見る
<style type="text/css">
    .fw { font-weight:bold; }
    .cpink { color:#ff6699; }
</style>

<div id="res_classnames" class="fw cpink">青色で太字。</div>
<script type="text/javascript">
    $("res_classnames").innerHTML="クラス名: "+Element.classNames("res_classnames");
</script>

identify
identify()

unknown

$(element).identify(element) -> id
サンプルを見る
<ul>
    <li id="apple">apple</li>
    <li>orange</li>
</ul>
<textarea id="res_identify" style="width:90%;"></textarea>

<script type="text/javascript">
  $('apple').identify();
  $("res_identify").value=$('apple').next().identify();
</script>

ancestors()で取得できる要素群の中からindexで指定された要素を返す
up()

unknown

$(element).up(element, [cssRule][, index = 0]) -> HTMLElement | undefined

ancestors()メソッドで取得できる要素配列の中から、indexで指定された要素を返します。 オプションの第2引数indexを省略した場合は、1番目の要素を返します。 オプションの第1引数selectorを指定した場合は、CSSセレクタによって要素を絞り、1番目の要素を返します。

サンプルを見る
<div>
    <ul id="fruits">
        <li id="apples" class="keeps-the-doctor-away">Apples
            <ul>
                <li id="golden-delicious">Golden Delicious</li>
                <li id="mutsu" class="yummy">Mutsu</li>
                <li id="mcintosh" class="yummy">McIntosh</li>
                <li id="ida-red">Ida Red</li>
            </ul>
        </li>
    </ul>
</div>
<textarea id="res_up" style="width:90%; height:8em;"></textarea>

<script type="text/javascript">
    $('fruits').up();
    // equivalent:
    $("res_up").value=$('fruits').up(0).inspect()+"\n";
    $("res_up").value+=$('mutsu').up(2).inspect()+"\n";
    $("res_up").value+=$('mutsu').up('li').inspect()+"\n";
    $("res_up").value+=$('mutsu').up('.keeps-the-doctor-away').inspect()+"\n";
    $("res_up").value+=$('mutsu').up('ul', 1).inspect()+"\n";
    $("res_up").value+=$('mutsu').up('div').inspect()+"\n";
    // -> undefined
</script>

observeで割り当てたイベントをキャンセルする
stopObserving()

unknown

$(element).stopObserving(element, eventName, handler) -> HTMLElement

observe()メソッドで割り当てたイベントをキャンセルします。 第2引数eventObserverには、observe()メソッドで割り当てたのと同じ関数オブジェクトを指定します。

<script type="text/javascript">
/*
    $(element).stopObserving('click', coolAction);
    // -> HTMLElement (and unregisters the 'coolAction' event handler).
*/
</script>

要素の末尾の要素としてデータを挿入

unknown

new Insertion.Bottom(要素, 挿入するデータ);
サンプルを見る
<a id="externalLink" href="http://www.google.co.jp/">Google</a>

<script type="text/javascript">
    new Insertion.Bottom("externalLink","<img src='/content/img/icon/external.gif' alt='外部リンク' /> ");
</script>

ビューポートに比例する要素のXY座標を返す
viewportOffset()

unknown

($element).viewportOffset(element) -> [Number, Number] also accessible as { left: Number, top: Number }
サンプルを見る
<style type="text/css">
    div#parent_viewport {
        position:relative;
        width:200px; height:200px;
        background-color:orange;
    }
    div#child_viewport {
        position:absolute;
        top:50px; left:50px;
        width:100px; height:100px;
        background-color:yellow;
    }
</style>
<div id="parent_viewport">div#parent_viewport
    <div id="child_viewport">div#child_viewport</div>
</div>
<p><textarea id="res_viewport" style=""></textarea></p>

<script type="text/javascript">
    $("res_viewport").value=$('child_viewport').viewportOffset("parent_viewport").inspect();
</script>

CSSセレクタ、1文節分とマッチするかを返す
match()

unknown

$(element).match(element, selector) -> Boolean

CSSセレクタ、1文字節分と一致するかを返します。

サンプルを見る
<ul id="fruits">
    <li id="apples">
        <ul>
            <li id="golden-delicious">Golden Delicious</li>
            <li id="mutsu" class="yummy">Mutsu</li>
            <li id="mcintosh" class="yummy">McIntosh</li>
            <li id="ida-red">Ida Red</li>
        </ul>
    </li>
</ul>
<textarea id="res_match" style="width:90%;"></textarea>

<script type="text/javascript">
    $("res_match").value=$('fruits').match('ul')+"\n";
    $("res_match").value+=$('mcintosh').match('li#mcintosh.yummy')+"\n";
    $("res_match").value+=$('fruits').match('p')+"\n";
</script>

fire
fire()

unknown

$(element).fire(eventName[, memo]) -> Event
<script type="text/javascript">
/*
document.observe("widget:frobbed", function(event) {
  console.log("Element with ID (" + event.target.id +
   ") frobbed widget #" + event.memo.widgetNumber + ".");
});

var someNode = $('foo');
someNode.fire("widget:frobbed", { widgetNumber: 19 });

//-> "Element with ID (foo) frobbed widget #19."
*/
</script>

要素にメソッド追加
addMethods()

unknown

addMethods([methods]);
addMethods([tagName, methods]);

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか?

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手(1行メッセージも送れます♪)

pagetop