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.getWidth(要素);
Element.getHeight(要素);
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
サンプルを見る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
writeAttribute(element, attributes) -> HTMLElement
setOpacity
setOpacity()
unknown
Element.setOpacity(element, opacity) -> [HTMLElement...]
someElement.setOpacity(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(要素);
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...]
サンプルを見る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(要素);
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(要素);
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
$("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>
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]);
addMethods([tagName, methods]);