prototype.jsリファレンスエレメント(Element)
- 要素の幅・高さを取得〔getWidth()/getHeight()〕
- positionedOffset〔positionedOffset()〕
- 後にある弟要素を自要素に近い順に取得し配列で返す〔nextSiblings()〕
- recursivelyCollect〔recursivelyCollect()〕
- previousSiblings()で取得できる要素群の中からindexで指定された要素を返す〔previous()〕
- 前にある兄弟要素を自要素に近い順に取得し配列で返す〔previousSiblings()〕
- 要素をラップする〔wrap()〕
- 要素の最初の要素としてデータを挿入
- クラス名削除〔removeClassName()〕
- toggleClassName〔toggleClassName()〕
- select〔select()〕
- writeAttribute〔writeAttribute()〕
- setOpacity〔setOpacity()〕
- 要素の表示状態を調べる〔visible()〕
- 要素の内容を変更する〔update()〕
- 特定の要素までスクロール〔scrollTo()〕
- 要素をHTML文字列に置換〔replace()〕
- 要素を削除〔remove()〕
- 要素の表示状態を切り替える〔toggle()〕
- 要素にイベントで起動する関数を割り当てる〔observe()〕
- 兄弟要素をすべて取得し配列で返す〔siblings()〕
- 要素の表示状態を変更する〔show()/hide()〕
- マッチする要素を見つける?〔adjacent()〕
- 要素にクラス追加〔addClassName()〕
- 要素に複数のスタイルを一括指定〔setStyle()〕
- cumulativeScrollOffset〔cumulativeScrollOffset()〕
- clonePosition〔clonePosition()〕
- childElements〔childElements()〕
- 要素の後にデータを挿入
- 要素の前にデータを挿入
- relativize〔relativize()〕
- 要素の子ノードのホワイトスペース除去〔cleanWhitespace()〕
- 要素を絶対位置にする〔absolutize()〕
- すべての祖先要素を自身の自要素に近い順に取得し配列で返す〔ancestors()〕
- readAttribute〔readAttribute()〕
- 要素の座標系を変更〔makePositioned()/undoPositioned()〕
- 要素に特定のクラス名が含まれるか調べる〔hasClassName()〕
- すべての子孫要素を自要素に近い順に取得し配列で返す〔descendants()〕
- 要素のスタイルを取得〔getStyle()〕
- extend〔extend()〕
- nextSiblings()で取得できる要素群の中からindexで指定された要素を返す〔next()〕
- はみ出した部分の表示方法を指定〔makeClipping()/undoClipping()〕
- デバッグ用の文字列を返す〔inspect()〕
- insert〔insert()〕
- 要素が空か調べる〔empty()〕
- descendants()で取得できる要素群の中からindexで指定された要素を返す〔down()〕
- descendantOf〔descendantOf()〕
- getOffsetParent〔getOffsetParent()〕
- 特定のクラス名の要素にアクセス(子要素以下から、指定された文字列のclass名を持つ要素を取得し配列で返す)〔getElementsByClassName()〕
- 要素の幅・高さを取得(要素が隠れている場合も取得可能)〔getEimensions()〕
- firstDescendant〔firstDescendant()〕
- 要素のクラス名を取得〔classNames()〕
- identify〔identify()〕
- ancestors()で取得できる要素群の中からindexで指定された要素を返す〔up()〕
- observeで割り当てたイベントをキャンセルする〔stopObserving()〕
- 要素の末尾の要素としてデータを挿入
- ビューポートに比例する要素のXY座標を返す〔viewportOffset()〕
- CSSセレクタ、1文節分とマッチするかを返す〔match()〕
- fire〔fire()〕
- 要素にメソッド追加〔addMethods()〕
要素の幅・高さを取得
getWidth()/getHeight()
unknown
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
後にある弟要素を自要素に近い順に取得し配列で返す
nextSiblings()
unknown
後にある兄弟要素を要素自身に近い順に取得し、配列として返します。
サンプルを見る<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
<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
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
前にある兄弟要素を要素自身に近い順に取得し、配列として返します。
サンプルを見る<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
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
<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
要素から指定したクラス名を削除します。
サンプルを見る<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
<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
<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, attributes) -> HTMLElement
setOpacity
setOpacity()
unknown
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
要素の表示状態を調べます。 要素が表示されている場合は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
要素の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に要素を指定するとエラーになる。
サンプルを見る<p> <input type="button" onclick="fScrollTo('content')" value="#contentの位置までスクロール" /> </p> <script type="text/javascript"> function fScrollTo(elm){ Element.scrollTo(elm); } </script>
要素をHTML文字列に置換
replace()
unknown
要素を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
要素を削除します。
サンプルを見る<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
要素が非表示の場合は要素を表示し、要素が表示されている場合は要素を非表示にします。
サンプルを見る<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
要素にイベントで起動する関数を割り当てます。 第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
兄弟要素をすべて取得し、配列として返します。
サンプルを見る<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.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
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
要素に指定したクラス名を追加します。
サンプルを見る<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
オブジェクトを渡すと、そのプロぱひと値を見てスタイルを定義します。
サンプルを見る<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
clonePosition
clonePosition()
unknown
childElements
childElements()
unknown
<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
<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
<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
要素の子ノードのホワイトスペース除去
cleanWhitespace()
unknown
子ノードから空白のみのテキストノードを削除します。
サンプルを見る<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
<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
すべての先祖要素を要素自身に近い順番に取得し、配列として返します。
サンプルを見る<textarea id="res_anc" style="width:90%;"></textarea> <script type="text/javascript"> $("res_anc").value=$('container').ancestors().inspect()+"\n\n"; </script>
readAttribute
readAttribute()
unknown
<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.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
要素が指定したクラス名を持っている場合に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
全の子孫要素を要素自身に近い順番に取得し、配列として返します。
サンプルを見る<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
要素から指定したスタイルの値を取得します。 クロスブラウザ対応のため、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
<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
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.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
可読可能な文字列を返します。
サンプルを見る<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, content) -> HTMLElement
要素が空か調べる
empty()
unknown
要素の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
<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
特定のクラス名の要素にアクセス(子要素以下から、指定された文字列のclass名を持つ要素を取得し配列で返す)
getElementsByClassName()
unknown
子要素以下から、指定された文字列のクラス名を持つ要素を取得し、配列として返します。
サンプルを見る<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
要素自身の幅を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
<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
<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
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
observe()メソッドで割り当てたイベントをキャンセルします。 第2引数eventObserverには、observe()メソッドで割り当てたのと同じ関数オブジェクトを指定します。
<script type="text/javascript">
/*
$(element).stopObserving('click', coolAction);
// -> HTMLElement (and unregisters the 'coolAction' event handler).
*/
</script>
要素の末尾の要素としてデータを挿入
unknown
<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>
CSSセレクタ、1文節分とマッチするかを返す
match()
unknown
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
<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([tagName, methods]);