高橋文樹.com » Element

Element.Dimensions

高橋文樹 — Sun, 02 Nov 2008 06:41:08 +0000

Native: Element

$関数を使って、DOM要素がすべてのメソッドを利用できるようにするカスタムネイティブです。

注意点:

これらのメソッドはbody要素のマージンとボーダーを考慮しません。
bodyにマージンとボーダーが必要ならば、ラッパーdivを使用し、bodyのマージンとボーダーを0にするよう心がけてください。

クレジット:

要素の位置指定はLGPLライセンスであるqooxdooコードとsmart browser fixesに因っています。
ビューポート(見えている範囲)の領域管理については、BSDライセンスのYUIに因っています。

Elementメソッド: scrollTo

要素を指定した座標までスクロールします(要素がoverflowを持っている場合に限ります)。
このメソッドはwindowオブジェクトに対しても使えます。

構文:

myElement.scrollTo(x, y);

Arguments:

x – (数) x座標。
y – (数) y座標。

例:

$('myElement').scrollTo(0, 100);

参考情報:

MDC Element:scrollLeft, MDC Element:scrollTop

Elementメソッド: getSize

ボーダーとパディングを考慮して、要素の高さと幅を返します。
このメソッドはwindowオブジェクトにも適用できます。

構文:

myElement.getSize();

戻り値:

(オブジェクト) ターゲット要素の幅(キー名:x)と高さ(キー名:y)を持つオブジェクト。

例:

var size = myElement.getSize();
alert("The element is "+size.x+" pixels wide and "+size.y+"pixels high.");

Elementメソッド: getScrollSize

ターゲット要素のサイズを表すオブジェクトを返します。スクロールされる領域も含まれます。
このメソッドはwindowオブジェクトにも使えます。

構文:

myElement.getScrollSize();

戻り値:

(オブジェクト) ターゲット要素のx-y空間を表すオブジェクト。

例:

var scroll = $('myElement').getScrollSize();

alert('My element can scroll to ' + scroll.y + 'px'); //アラート 'My element can scroll down to 820px'

参考情報:

MDC Element:scrollLeft, MDC Element:scrollTop, MDC Element:offsetWidth, MDC Element:offsetHeight, MDC Element:scrollWidth, MDC Element:scrollHeight

Elementメソッド: getScroll

ターゲット要素までどれだけ離れているかを示す値からなるオブジェクトを返します。
このメソッドはwindowオブジェクトにも使えます。

構文:

myElement.getScroll();

戻り値:

(オブジェクト) ターゲット要素までどれだけスクロールすればよいかをx-y座標値で表したオブジェクト。

例:

var scroll = $('myElement').getScroll();

alert('My element is scrolled down ' + scroll.y + 'px'); //アラート'My element is scrolled down to 620px'

Elementメソッド: getPosition

要素のオフセットを返します。

構文:

myElement.getPosition(relative);

引数:

relative – (要素, 初期値＝document) 設定されていたら、この要素からの相対的な位置になります。

戻り値:

(オブジェクト) 要素の位置をx-y座標で表したオブジェクト。

例:

$('element').getPosition(); //戻り値{x: 100, y: 500};

参考情報:

QuirksMode: Find position

Elementメソッド: getCoordinates

要素のwidth, height, left, top, bottomの座標値を返します。

構文:

myElement.getCoordinates(relative);

引数:

relative – (要素, オプション:初期値=document) 設定されていたら、この要素からの相対的な位置になります。

戻り値:

(オブジェクト) 次の値からなるオブジェクト:top, left, width, height, right, bottom

例:

var myValues = $('myElement').getCoordinates();

戻り値:

{
    top: 50,
    left: 100,
    width: 200,
    height: 300,
    right: 300,
    bottom: 350

}

参考情報:

Element:getPosition

関連度
29%

Javascriptのカスタムイベント（MooToolsでGoogle Mapのラッパークラス）

昨今、限られた環境（iPhone限定とか）でない限り、JavaScriptのライブラリを使用して作成することが多いと思い[...]

Element.Style

高橋文樹 — Sun, 02 Nov 2008 06:12:36 +0000

Native: Element

$関数を用いて、DOM要素がすべてのメソッドを使えるようにするカスタムネイティブです。

Elementメソッド: setStyle

要素にCSSプロパティを設定します。

構文:

myElement.setStyle(property, value);

引数:

property – (文字列) 設定したいプロパティ。
value – (いろいろ) 設定したい値。単位を必要とする数値は、自動的に’px’を付与されます。

戻り値:

(要素) この要素。

例:

//両方とも同じ効果です。
$('myElement').setStyle('width', '300px'); //widthは300pxになりました。
$('myElement').setStyle('width', 300); //widthは300pxになりました。

注意点:

数値は自動的に近似整数値に丸められます。

Elementメソッド: getStyle

渡されたスタイルの値を返します。

構文:

var style = myElement.getStyle(property);

引数:

property – (文字列) 取得したいCSSプロパティ。

戻り値:

(文字列) スタイルの値。

例:

$('myElement').getStyle('width'); //戻り値 "300px".

$('myElement').getStyle('width').toInt(); //戻り値 300.

Elementメソッド: setStyles

要素に対して複数のスタイルを設定します。

構文:

myElement.setStyles(styles);

引数:

styles – (オブジェクト) 設定したいスタイルのプロパティ＝値のペアを持つオブジェクト。

戻り値:

(要素) この要素。

例:

$('myElement').setStyles({
    border: '1px solid #000',
    width: 300,
    height: 400

});

参考情報:

Element:getStyle

Elementメソッド: getStyles

渡された引数に対応するスタイルを返します。

構文:

var styles = myElement.getStyles(property[, property2[, property3[, ...]]]);

引数:

properties – (文字列) スタイルプロパティを幾つでも。

戻り値:

(オブジェクト) ブラウザによって計測されたCSSスタイルをキー＝値のペアに持つオブジェクト。

例:

$('myElement').getStyles('width', 'height', 'padding');

//戻り値 {width: "10px", height: "10px", padding: "10px 0px 10px 0px"}

参考情報:

Element:getStyle

関連度
36%

2010.03.07
MooShellでJavascriptのコードをブログに貼って自慢する方法

Flashにはカヤックさんが作ったwonderflというWebサービスがあって、自分の書いたコードを公開したり、他人の書[...]
関連度
26%

2008.12.23
WordPressテーマplaintxtBlogの日本語リソース作った

僕はWordPressを構築するたび、ヘッダーやら背景やらに大きな画像を使うのをメンドクセーと感じます。だって、何を選ん[...]
関連度
21%

2008.10.02
Opera9.50はなぜnoscriptを出力してしまうのだ

OperaとはWebブラウザの一個で、出版社でいうところの早川書房のようなイメージ（？）であります。基本的にはWeb標[...]

Element.Event

高橋文樹 — Sat, 01 Nov 2008 23:39:14 +0000

Native: Element

ドル関数によって、どんなDOM要素にもメソッドを適用できるカスタムNativeです。
これらのメソッドはwindowとdocumentオブジェクトにも使えます。

注意点:

Internet ExplorerはElement:fireEventを使わない限り、ランダムにイベントを発生させます。

Elementメソッド: addEvent

DOM要素にイベントリスナーを添附します。

構文:

myElement.addEvent(type, fn);

引数:

type – (文字列) 監視したいイベント名(‘click’, ‘load’, など)。接頭辞’on’はつけません。
fn – (関数) 実行したい関数。

戻り値:

(要素) この要素。

例:

HTML:

"myElement">Click me.

JavaScript

$('myElement').addEvent('click', function(){

    alert('clicked!');
});

注意点:

リスナー関数の中でfalseを返すか、Event:stopを使うことでイベントを停止できます。
このメソッドはdocumentとwindowにも添附できます。

参考情報:

w3schools Event Attributes

Elementメソッド: removeEvent

Element.addEventと同じですが、代わりに指定したイベントリスナーを取り除きます。

構文:

myElement.removeEvent(type, fn);

引数:

type – (文字列) イベント名。
fn – (関数) 削除したい関数。

戻り値:

(要素) この要素。

例:

通常の使い方:

var destroy = function(){ alert('Boom: ' + this.id); } //'this'はこの要素を参照します。

$('myElement').addEvent('click', destroy);

// 後で
$('myElement').removeEvent('click', destroy);

bindを使った例:

var destroy = function(){ alert('Boom: ' + this.id); }

var boundDestroy = destroy.bind($('anotherElement'));
$('myElement').addEvent('click', boundDestroy);

// 後で
$('myElement').removeEvent('click', destroy); //これではイベントを削除できません。
$('myElement').removeEvent('click', destroy.bind($('anotherElement')); // これもイベントを削除できません。

$('myElement').removeEvent('click', boundDestroy); // これがイベントを削除する正しいやり方です。

注意点:

Function:bindやFunction:passを使って関数が付け加えられた場合、新しい参照が作られます。removeEvent を動かすためには、削除したい関数への正確な参照を渡す必要があります。
このメソッドはdocumentとwindowにも添附されます。

Elementメソッド: addEvents

Element:addEventと同じですが、オブジェクトを用いて一度に複数のイベントを添附できます。

構文:

myElement.addEvents(events);

引数:

events – (オブジェクト) キー＝値を持つオブジェクト。キーはイベント名、値はイベントが発生したときに実行される関数。

戻り値:

(要素) この要素。

例:

$('myElement').addEvents({

    'mouseover': function(){
        alert('mouseover');
    },
    'click': function(){

        alert('click');
    }
});

注意点:

このメソッドはdocumentとwindowにも添附されます。

参考情報:

Element:addEvent

Elementメソッド: removeEvents

要素から指定したタイプのイベントをすべて削除します。もし引数が渡されなければ、全てのタイプの全イベントが削除されます。

構文:

myElements.removeEvents([events]);

引数:

events – (オプション) 渡されなければ、すべてのタイプの全イベントが削除されます。
- (文字列) イベント名(e.g. ‘click’)。このタイプのイベントがすべて削除されます。
- (オブジェクト) タイプ＝関数のペアを持つオブジェクト。Element:addEventに渡されるのと同じものです。

戻り値:

(要素) この要素。

例:

var myElement = $('myElement');
myElement.addEvents({

    'mouseover': function(){
        alert('mouseover');
    },
    'click': function(){

        alert('click');
    }
});

myElement.addEvent('click', function(){ alert('clicked again'); });
myElement.addEvent('click', function(){ alert('clicked and again :('); });

//addEventはそれぞれの関数を添附しました。
//残念なことに、訪問者はmyElementから受けたアラートを3回もクリックしなくてはなりません。
myElement.removeEvents('click'); // これで訪問者の指はクリックイベントから守られました。

注意点:

このメソッドはdocumentとwindowにも添附されます。

参考情報:

Element:removeEvent

Elementメソッド: fireEvent

要素に添附されているイベントから、指定したタイプをすべて実行します。

構文:

myElement.fireEvent(type[, args[, delay]]);

引数:

type – (文字列) イベント名(e.g. ‘click’)
args – (いろいろ, オプション) 関数に渡したい引数からなる配列か一つのオブジェクト。複数の引数を渡す場合は、配列にしなければなりません。
delay – (数, オプション) イベントを実行するまでの待機時間(ミリ秒)。

戻り値:

(要素) この要素。

例:

// 'anElement'を渡して、一秒たってからすべての'click'イベントを実行します。
$('myElement').fireEvent('click', $('anElement'), 1000);

注意点:

これはDOMイベントを実行しません(インラインイベントは考慮します。 ie. onmousedown=”..”)。
このメソッドはdocumentとwindowにも添附されます。

Elementメソッド: cloneEvents

要素から要素へとイベントを複製します。

構文:

myElement.cloneEvents(from[, type]);

引数:

from – (要素) この要素からすべてのイベントをコピーします。
type – (文字列, オプション) このタイプのイベントだけをコピーします。nullならば、すべてのイベントをコピーします。

戻り値:

(要素) この要素。

例:

var myElement = $('myElement');
var myClone = myElement.clone().cloneEvents(myElement); //要素とイベントをコピーします。

注意点:

このメソッドはdocumentとwindowにも添附されます。

ハッシュ: Element.Events

Element.Eventsハッシュに対してプロパティ(オブジェクト)を加えることで、カスタムイベントを添附することができます。

引数:

Element.Events.プロパティ (オブジェクト)は以下の通り:

base – (文字列, オプション) カスタムイベントが監視する元となるイベント。conditionがセットされた場合は必須となります。
condition – (関数, オプション) カスタムイベントの発生を定義する条件。イベントを添附した要素にバインドされます。イベントが引数として渡されます。
onAdd – (関数, オプション) カスタムイベントが加えられたときに実行する関数。イベントを添附した要素にバインドされます。
onRemove – (関数, オプション) イベントが削除されたときに実行される関数。イベントを添附した要素にバインドされます。

例:

Element.Events.shiftclick = {
    base: 'click', //ベースとなるイベントタイプを設定しました。

    condition: function(event){ //さらに、追加条件として関数を加えます。
        return (event.shift == true); //これは関数が実行できるということです。

    }
};

$('myInput').addEvent('shiftclick', function(event){

    log('the user clicked the left mouse button while holding the shift key');
});

注意点:

作成できるカスタムイベントには様々なものがあります:
1. baseだけのカスタムイベント: ベースイベントにリダイレクトするだけです。
2. baseとconditionを持つカスタムイベント: 条件を満たしたときだけベースイベントにリダイレクトされます。
3. onAddまたはonRemoveと上記のいずれかを持つカスタムイベント: イベントが添附・削除されたときの追加関数として振舞います。

警告:

ネイティブ・イベントを上書きしたくないならば、conditionオプションを使うとき、baseを指定する必要があります。
(非推奨: なにをしようとしているのか理解しているときにだけ使いましょう)

Custom Events

イベント: mouseenter

このイベントはマウスがDOM要素の領域内に入ったときにだけ発生し、その子要素の上を行き来しても再度発生することはありません(mouseoverとは違います)。

例:

$('myElement').addEvent('mouseenter', myFunction);

参考情報:

Element:addEvent

イベント: mouseleave

このイベントマウスはDOM要素の領域から出たときにだけ発生し、その子要素の上を行き来しても再度発生することはありません(mouseoutとは違います)。

例:

$('myElement').addEvent('mouseleave', myFunction);

参考情報:

Element:addEvent

イベント: mousewheel

このイベントはマウスホイールが回転したときに発生します。

例:

$('myElement').addEvent('mousewheel', myFunction);

注意点:

このカスタムイベントは単にDOMMouseScroll (Mozilla)をmousewheel (Opera, Internet Explorer)へとリダイレクトして、クロス・ブラウザ対応にしたものです。

参考情報:

Element:addEvent

関連度
88%

2011.02.28
Javascriptのカスタムイベント（MooToolsでGoogle Mapのラッパークラス）

昨今、限られた環境（iPhone限定とか）でない限り、JavaScriptのライブラリを使用して作成することが多いと思い[...]
関連度
32%

2008.09.14
Mootoolsの$関数がformで変な挙動をする件

ぼくは文芸の世界に生きる人間なので、やっぱりテキストが大好きです。なので、RIA（リッチ・インターネット・アプリケーショ[...]
関連度
23%

2009.05.23
jQuery vs MooTools（和訳）

MooToolsの開発者がわざわざドメインを取ってまで書いていたので、全訳してみました。コードハイライターは自作なので、[...]

Element

高橋文樹 — Sat, 01 Nov 2008 22:47:20 +0000

Native: Window

次の関数はWindowメソッドとして扱われます。

関数: $

ドル関数には二つの目的があります : IDで要素を取得すること、そしてInternet ExplorerにすべてのElementメソッドを”掴ませる”ことです。

構文:

var myElement = $(el);

引数:

el – 拡張したい要素。次のいずれかになります:
- (要素) 拡張された要素。
- (文字列) 任意のDOM要素のIDを含む文字列。
- (オブジェクト) そのオブジェクトがtoElementメソッドを持っていた場合、要素の取得時にtoElementが呼び出されます。

戻り値:

(要素) DOM要素。
(null) IDがマッチしなかったり、toElementメソッドが要素を返さなかった場合はNullを返します。

例:

IDによるDOM要素の取得:

var myElement = $('myElement');

参照を用いたDOM要素を取得:

var div = document.getElementById('myElement');
div = $(div); //要素に対してすべてのElementメソッドが適用されます。

注意点:

このメソッドはその要素やIDが存在するかどうかわからないときに有用です。また、document.getElementById()のショートハンドとしても役立ちます。
Internet Explorerにおいては、$が最初に呼び出された時にElementが拡張され、すべてのElementメソッドが利用できるようになります。
SafariやFirefox、OperaのようにHTMLElementをネイティブにサポートしているブラウザでは、すべてのElementメソッドがDOM要素に対して自動的に適用されます。
MooToolsは要素を拡張する必要があるか否かを推測するので、悪影響を及ぼすことなくこの関数を何度も呼び出すことができるます。

関数: $$

DOM要素を選び出し、拡張します。$$の戻り値である配列内の要素は、すべてのElementメソッドを持っています。

構文:

var myElements = $$(aTag[, anElement[, Elements[, ...]);

引数:

次の引数をいくらでも取ることができます:
- HTMLCollections,
- 要素の配列,
- 要素,
- セレクタ文字列

戻り値:

(配列) – マッチした要素を$によって拡張し、配列にしたもの。

例:

タグ名で要素を取得:

$$('a'); //ページ内のすべてのアンカータグからなる配列を返します。
$$('a', 'b'); //ページ内のすべてのアンカータグとボールドタグからなる配列を返します。

SelectorsをインクルードしてCSSセレクターを使用する:

$$('#myElement'); //'myElement'というIDを持つ要素だけからなる配列を返します。
$$('#myElement a.myClass'); //'myElement'というIDを持つDOM要素に含まれており、なおかつ'myClass'というクラス名を持つすべてのアンカータグからなる配列を返します。

さらに複雑な$$の利用:

//引数として渡されたすべての要素とセレクターにマッチした要素を返す配列を生成します。
$$(myelement1, myelement2, 'a', '#myid, #myid2, #myid3', document.getElementsByTagName('div'));

注意点:

Selectorsが読み込まれると、$$はCSSセレクターを受け入れるようになります。そうでなければ、タグ名だけしか使用することはできません。
一つの要素もマッチしなければ、空の配列が返されます。
結果のいかんにかかわらず、$$の戻り値のデータ型は配列になります。

参考情報:

フレームワーク内のどこででも使うことができるように、Selectors のドキュメンテーションに目を通すとよいでしょう。

Native: Element

拡張されたDOM要素ならば、すべてのメソッドが使えるようにカスタマイズされたNativeです。

Elementメソッド: constructor

渡されたタイプの新しい要素を作ります。

構文:

var myEl = new Element(element[, properties]);

引数:

element – (いろいろ) 生成したい要素のタグ名か、すでに存在しているDOM要素。
properties – (オブジェクト, オプション) 渡されたプロパティオブジェクトをElement:setの引数として呼び出します。

戻り値:

(要素) MooToolsによって拡張された新しいHTML要素。

例:

var myAnchor = new Element('a', {

    'href': 'http://mootools.net',
    'class': 'myClass',
    'html': 'Click me!',
    'styles': {

        'display': 'block',
        'border': '1px solid black'
    },
    'events': {
        'click': function(){

            alert('clicked');
        },
        'mouseover': function(){
            alert('mouseovered');
        }

    }
});

参考情報:

$, Element:set

Elementメソッド: getElement

渡されたタグ名にマッチする最初の子要素を取得します。Selectorsがインクルードされていれば、CSSセレクターを渡すことができます。

構文:

var myElement = myElement.getElement(tag);

引数:

tag – (文字列) 探しているタグ名。

戻り値:

(いろいろ) マッチすればその要素を返し、しない場合はnullを返します。

例:

var firstDiv = $(document.body).getElement('div');

注意点:

このメソッドはDocument インスタンスにも利用できます。
このメソッドはSelectorsがインクルードされていると置換されます。
SelectorsはElement:getElementを拡張し、CSSセレクターに基づいたマッチングを可能にします。

参考情報:

フレームワーク内のどこででも使うことができるように、Selectors のドキュメンテーションに目を通すとよいでしょう。

Elementメソッド: getElements

渡されたタグ名にマッチする子要素をすべて取得します。Selectorsがインクルードされていれば、CSSセレクターを渡すことができます。

構文:

var myElements = myElement.getElements(tag);

引数:

tag – (文字列) マッチするタグの文字列。

戻り値:

(配列) マッチした要素からなるElements配列。

例:

var allAnchors = $(document.body).getElements('a');

注意点:

このメソッドはDocument インスタンスにも利用できます。
このメソッドはSelectorsがインクルードされていると置換されます。
SelectorsはElement:getElementを拡張し、CSSセレクターに基づいたマッチングを可能にします。

参考情報:

フレームワーク内のどこででも使うことができるように、Selectors のドキュメンテーションに目を通すとよいでしょう。

Elementメソッド: getElementById

特定のIDを持つ子要素を取得します。

構文:

var myElement = anElement.getElementById(id);

引数:

id – (文字列) 見つけたい要素のID。

戻り値:

(いろいろ) マッチすれば要素を、そうでなければnullをかえします。

例:

var myChild = $('myParent').getElementById('myChild');

注意点:

このメソッドはDocumentインスタンスには使えません。document.getElementByIdがネイティヴに提供されているからです。

Elementメソッド: set

“動的引数”メソッドです。渡されたプロパティがElement.Propertiesハッシュの’セットしたい’プロパティのいずれかになります。

構文:

myElement.set(arguments);

引数:

2つの引数のとき(property, value)
1. property – (文字列) セットしたいプロパティを意味するElement.Propertiesハッシュのキー名。
2. value – (いろいろ) 指定したプロパティの値。
1つの引数のとき(properties)
1. properties – (オブジェクト) 要素にセットしたいプロパティーと値をキー＝値のセットにしたオブジェクト。(以下を参照のこと)

戻り値:

(要素) この要素。

例:

引数2つ(property,value)の場合:

$('myElement').set('text', 'text goes here');
$('myElement').set('class', 'active');

//'styles'プロパティにElement:setStylesのオブジェクトを渡す
var body = $(document.body).set('styles', {
    'font': '12px Arial',
    'color': 'blue'

});

引数1つ（object）の場合:

var myElement = $('myElement').set({

    //'styles'プロパティにElement:setStylesのオブジェクトを渡す。
    'styles': {
        'font': '12px Arial',
        'color': 'blue',
        'border': '1px solid #f00'

    },
    //'events'プロパティにElement:addEventsのオブジェクトを渡す。
    'events': {
        'click': function(){ alert('click'); },
        'mouseover': function(){ this.addClass('over') }

    },
    //その他のプロパティにはElement:setPropertyを利用する。
    'id': 'documentBody'
});

注意点:

すべてのproperty引数には、対応するElement.Propertiesハッシュのメソッドに渡されます。
Element.Propertiesに適当なプロパティがない場合、Element:setPropertyに戻されます。
属性をセットするときにElement:setPropertyを使うならば、小文字で短いプロパティ形式にしてください。具体例は以下になります:
- ○’for’　×’htmlFor’,
- ○’class’　×’className’
- ○’frameborder’　×’frameBorder’
- などなど。

参考情報:

Element, Element.Properties, Element:setProperty, Element:addEvents, Element:setStyles

Elementメソッド: get

“動的引数”メソッドです。渡されたプロパティがElement.Propertiesハッシュの’取得したい’プロパティのいずれかになります。

構文:

myElement.get(property);

引数:

property – (文字列) 取得したいプロパティを意味するElement.Propertiesハッシュのキー名。

戻り値:

(いろいろ) Element.Propertiesハッシュの’get’関数の実行結果。

例:

カスタムgetの使用:

var tag = $('myDiv').get('tag'); //戻り値 "div".

Element属性へのフォールバック:

var id = $('myDiv').get('id'); //戻り値 "myDiv".

var value = $('myInput').get('value'); //myInput要素の値を返します。

注意点:

Element.Propertiesハッシュに対応するキーがなかった場合、渡されたプロパティでElement:getPropertyを行った戻り値が返されます。

参考情報:

Element, Element.Properties, Element:getProperty

Elementメソッド: erase

“動的引数”メソッドです。渡されたプロパティがElement.Propertiesハッシュの’消去したい’プロパティのいずれかになります。

構文:

myElement.erase(property);

引数:

property – (文字列) 消去したいプロパティを意味するElement.Propertiesハッシュのキー名。

戻り値:

(いろいろ) Element.Propertiesハッシュの’erase’関数の実行結果。

例:

$('myDiv').erase('id'); //myDivからIDを取り除きます。

$('myDiv').erase('class'); //myDiv要素は設定されていたクラス名を持っていません。

注意点:

Element.Propertiesハッシュに対応するキーがなかった場合、渡されたプロパティでElement:removePropertyを行った戻り値が返されます。

参考情報:

Element, Element.Properties, Element:removeProperty

Elementメソッド: match

渡された引数がその要素にマッチするかどうか、テストします。

構文:

myElement.match(match);

引数:

match – 文字列か要素。
- (文字列) 要素に対してテストしたいタグ名。Selectorsがインクルードされていれば、単一のCSSセレクターが使用できます。
- (要素) テストしたい要素。

戻り値:

(真偽値) 要素がマッチしたらtrue。そうでなければflase。

例:

タグ名の使用:

//#myDivがdivならば、trueを返します。
$('myDiv').match('div');

CSSセレクターの使用:

//#myDiv内にname属性が"bar"でクラスがfooという要素があればtrue。
$('myDiv').match('.foo[name=bar]');

要素の使用:

var el = $('myDiv');
$('myDiv').match(el); //戻り値 true

$('otherElement').match(el); //戻り値 false

Elementメソッド: inject

その要素の子要素として、特定の位置(第2引数でしていします)に要素を挿入します。

構文:

myElement.inject(el[, where]);

引数:

el – (いろいろ) 要素のIDか、要素そのもの。
where – (文字列, オプション: 初期値＝’bottom’) 要素を挿入する位置。’top’、 ‘bottom’、 ‘after’、’before’を指定できます。

戻り値:

(要素)この要素。

例:

JavaScript

var myFirstElement  = new Element('div', {id: 'myFirstElement'});

var mySecondElement = new Element('div', {id: 'mySecondElement'});
var myThirdElement  = new Element('div', {id: 'myThirdElement'});

HTMLの結果

"myFirstElement">
"mySecondElement">
"myThirdElement">

末尾に挿入:

JavaScript

myFirstElement.inject(mySecondElement);

HTMLの結果

"mySecondElement">
    "myFirstElement">

上に挿入:

JavaScript

myThirdElement.inject(mySecondElement, 'top');

HTMLの結果

"mySecondElement">
    "myThirdElement">

    "myFirstElement">

前に挿入

JavaScript

myFirstElement.inject(mySecondElement, 'before');

Resulting HTML

"myFirstElement">
"mySecondElement">

次に挿入:

JavaScript

myFirstElement.inject(mySecondElement, 'after');

HTMLの結果

"mySecondElement">

"myFirstElement">

参考情報:

Element:adopt, Element:grab, Element:wraps

Elementメソッド: grab

Element:injectと似ていますが、正反対の働きをします。

子要素を起点にした特定の位置(whereパラメータで指定します)に、要素を加えます。

構文:

myElement.grab(el[, where]);

引数:

el – (いろいろ) 要素のidか、要素そのもの。
where – (文字列, オプション: 初期値＝’bottom’) 要素を加える場所。’top’か’bottom’。

戻り値:

(要素) この要素。

例:

JavaScript

var myFirstElement = new Element('div', {id: 'myFirstElement'});

var mySecondElement = new Element('div', {id: 'mySecondElement'});

myFirstElement.grab(mySecondElement);

HTMLの結果

"myFirstElement">
    "mySecondElement">

参考情報:

Element:adopt, Element:inject, Element:wraps

Elementメソッド: adopt

Element:grabと同じ働きをしますが、複数の要素を適用することができます。

メソッドを実行した要素に、渡された要素を挿入します(結果的に親要素となります)。

構文:

myParent.adopt(el[, others]);

引数:

el – (いろいろ) 要素のid、要素そのもの、要素の配列。
others – (いろいろ, オプション) 付け加えたい要素を一つ以上、カンマで区切るか、配列にして指定します。

戻り値:

(要素) この要素。

例:

JavaScript

var myFirstElement  = new Element('div', {id: 'myFirstElement'});

var mySecondElement = new Element('a', {id: 'mySecondElement'});
var myThirdElement  = new Element('ul', {id: 'myThirdElement'});

myParent.adopt(myFirstElement);
myParent2.adopt(myFirstElement, 'mySecondElement');
myParent3.adopt([myFirstElement, mySecondElement, myThirdElement]);

HTMLの結果

"myParent">
    "myFirstElement" />

"myParent2">

    "myFirstElement" />
    

"myParent3">
    "myFirstElement" />

参考情報:

Element:grab, Element:inject, Element:wraps

Elementメソッド: wraps

Element:grabと同じ働きをしますが、グラブした要素を移動する代わりに、この要素でターゲットを包みます。

メソッドを実行した要素は渡された要素の場所まで移動し、その親要素となります。

構文:

myParent.wraps(el[, where]);

引数:

el – (いろいろ) 要素のIDか、要素そのもの。
where – (文字列, オプション: 初期値＝’bottom’) 要素を挿入する場所。’top’か’bottom’。

戻り値:

(要素) この要素。

例:

HTML

"myFirstElement">

JavaScript

var mySecondElement = new Element('div', {id: 'mySecondElement'});
mySecondElement.wraps($('myFirstElement'));

HTMLの結果

"mySecondElement">
    "myFirstElement">

Elementメソッド: appendText

Element:grabと同じ働きをしますが、IDや要素そのものではなく、テキストだけを受け取ります。
テキストノードが要素内に生成され、最上部か最下部に挿入されます。

構文:

myElement.appendText(text);

引数:

text – (文字列) 付け加えたいテキスト。
where – (文字列, オプション: 初期値＝’bottom’) テキストを挿入する場所。

戻り値:

(要素) 現在の要素インスタンス。

例:

HTML

"myElement">Hey.

JavaScript

$('myElement').appendText(' Howdy.');

HTMLの結果

"myElement">Hey. Howdy.

Elementメソッド: dispose

DOMから要素を削除します。

構文:

var removedElement = myElement.dispose();

戻り値:

(要素) この要素。この関数の戻り値を受け取っておくと、もう一度injectできます。

例:

HTML

"myElement">

"mySecondElement">

JavaScript

$('myElement').dispose();

HTMLの結果

"mySecondElement">

参考情報:

MDC Element:removeChild

Elementメソッド: clone

要素を複製して返します。

構文:

var copy = myElement.clone([contents, keepid]);

引数:

contents – (真偽値, オプション: 初期値＝true) falseにセットされると、要素の中身は複製されません。
keepid – (真偽値, オプション: 初期値＝false) trueにセットされた場合、要素のID属性が保たれます。子ノードについても同様です。

戻り値:

(要素) 複製された要素。

例:

HTML

"myElement">

JavaScript

//要素を複製して、要素の次にコピーを挿入します。
var clone = $('myElement').clone().injectAfter('myElement');

HTMLの結果

"myElement">ciao
ciao

注意点:

複製された要素は元の要素に添附されたイベントを持ちません。イベントを複製するにはElement:cloneEventsを使ってください。
Element.Storageで保存された値は複製されません。
複製された要素とその子要素は、keepidパラメータで指定しなければ、IDを失います。

参考情報:

Element:cloneEvents.

Elementメソッド: replaces

この要素を渡された要素で置換します。

構文:

var element = myElement.replaces(el);

引数:

el – (いろいろ) 置換したい要素のIDか、要素そのもの。

戻り値:

(要素) この要素。

例:

$('myNewElement').replaces($('myOldElement'));

//$('myOldElement')はなくなって、$('myNewElement')がその場所に入りました。

参考情報:

MDC Element:replaceChild

Elementメソッド: hasClass

この要素が渡されたクラス名を持っているか、確かめます。

構文:

var result = myElement.hasClass(className);

引数:

className – (文字列) 確認したいクラス名。

戻り値:

(真偽値) 要素がクラス名を持っていたらtrue。なければflase。

例:

HTML

"myElement" class="testClass">

JavaScript

$('myElement').hasClass('testClass'); //戻り値true

Elementメソッド: addClass

要素が指定したクラス名を持っていない場合、そのクラス名を加えます。

構文:

myElement.addClass(className);

引数:

className – (文字列) 付け加えたいクラス名。

戻り値:

(要素) この要素。

例:

HTML

"myElement" class="testClass">

JavaScript

$('myElement').addClass('newClass');

HTMLの結果

"myElement" class="testClass newClass">

Elementメソッド: removeClass

Element:addClassと似た働きをしますが、要素からクラス名を取り除きます。

構文:

myElement.removeClass(className);

引数:

className – (文字列) 削除したいクラス名。

戻り値:

(要素) この要素。

例:

HTML

"myElement" class="testClass newClass">

JavaScript

$('myElement').removeClass('newClass');

HTMLの結果

"myElement" class="testClass">

Elementメソッド: toggleClass

その要素が指定したクラス名を持っているか否かに応じて、クラス名を付け加えたり削除したりします。

構文:

myElement.toggleClass(className);

引数:

className – (文字列) 追加、あるいは削除したいクラス名。

戻り値:

(要素) この要素。

例:

HTML

"myElement" class="myClass">

JavaScript

$('myElement').toggleClass('myClass');

HTMLの結果

"myElement" class="">

JavaScript

$('myElement').toggleClass('myClass');

HTMLの結果

"myElement" class="myClass">

Elementメソッド: getPrevious

この要素のpreviousSiblingを返します(テキストノードは除きます)。

構文:

var previousSibling = myElement.getPrevious([match]);

引数:

match – (文字列, オプション): 見つけたい要素のタグ名。もしSelectorsをインクルードしていれば、CSSセレクターを指定できます。

戻り値:

(いろいろ) 同階層にある一つ前の要素。なければnullを返します。

Elementメソッド: getAllPrevious

Element:getPreviousと同じですが、マッチしたすべてpreviousSibling(同階層にある一つ前の要素)のを返します。

Elementメソッド: getNext

Element:getPreviousと同じですが、nextSibling(同階層にある一つ後の要素)を探します (テキストノードは除きます)。

構文:

var nextSibling = myElement.getNext([match]);

引数:

match – (文字列, オプション): 探しているタグ名をカンマで区切った文字列。もしSelectorsをインクルードしていれば、CSSセレクターを指定できます。

戻り値:

(いろいろ) 同階層にある次の要素。なければnullを返します。

Elementメソッド: getAllNext

Element.getNextと同じですが、マッチしたすべてのnextSiblingを返します。

Elementメソッド: getFirst

Element:getPreviousと同じですが、firstChild (最初の子要素)を探します(テキストノードは除きます)。

構文:

var firstElement = myElement.getFirst([match]);

引数:

match – (文字列, オプション): 探しているタグ名。もしSelectorsをインクルードしていれば、CSSセレクターを指定できます。

戻り値:

(いろいろ) 同階層内にある最初の要素。なければnullを返します。

Elementメソッド: getLast

Element:getPreviousと同じですが、lastChild(最後の子要素)を探します。

構文:

var lastElement = myElement.getLast([match]);

引数:

match – (文字列, オプション): 探しているタグ名。もしSelectorsをインクルードしていれば、CSSセレクターを指定できます。

戻り値:

(いろいろ) 最後の子要素。なければnullを返します。

Elementメソッド: getParent

Element:getPreviousと同じですが、親要素を探します。

構文:

var parent = myElement.getParent([match]);

引数:

match – (文字列, オプション): 探しているタグ名。もしSelectorsをインクルードしていれば、CSSセレクターを指定できます。

戻り値:

(いろいろ) ターゲットの親要素か、なければnullを返します。

Elementメソッド: getParents

Element:getParentと同じですが、DOMツリーを遡ってすべての親要素を返します。

Elementメソッド: getChildren

すべての子要素(テキストノードは除く)を返します。戻り値はElementsです。

構文:

var children = myElement.getChildren([match]);

引数:

match – (文字列, オプション): 探しているタグ名。もしSelectorsをインクルードしていれば、CSSセレクターを指定できます。

戻り値:

(配列) ターゲット要素のすべての子要素からなるElements配列。テキストノードは除きます。

Elementメソッド: hasChild

子要素が指定した条件にマッチするかどうか、試します。

構文:

var result = myElement.hasChild(el);

引数:

el – (いろいろ) 要素そのものか、ID。

戻り値:

(真偽値) 渡された要素が子要素にあればtrue。なければfalse。

例:

HTML

"Darth_Vader">

    "Luke">

JavaScript

if ($('Darth_Vader').hasChild('Luke')) alert('Luke, I am your father.'); // タン タン タン...

Elementメソッド: empty

子要素をすべて削除します。

構文:

myElement.empty();

戻り値:

(要素) この要素。

例:

HTML

"myElement">

JavaScript

$('myElement').empty();

HTMLの結果

"myElement">

Elementメソッド: destroy

子要素をすべて削除し、その要素も捨ててしまいます。
ページ更新の前にメモリを空にするのに役立ちます。

構文:

myElement.destroy();

戻り値:

(null)

Elementメソッド: toQueryString

子input要素を読み取り、その値からクエリ文字列を生成します。

構文:

var query = myElement.toQueryString();

戻り値:

(文字列) input要素のnameとvalueからなるクエリ文字列。

例:

HTML

"myForm" action="submit.php">
    name="email" value="bob@bob.com" />

    name="zipCode" value="90210" />

JavaScript

$('myForm').toQueryString(); //戻り値"email=bob@bob.com&zipCode=90210".

Elementメソッド: getSelected

select要素の選択されているoptionを返します。

構文:

var selected = mySelect.getSelected();

戻り値:

(配列) 選択されている要素の配列。

例:

HTML

JavaScript

$('country-select').getSelected(); //ユーザが選択しているものを返します。

注意点:

このメソッドは選択されたselect要素の数に関わらず、配列を返します。
もしselect要素が一つならば、一つのアイテムだけを持つ配列が返ります。

Elementメソッド: getProperty

要素の属性を一つ返します。

構文:

var myProp = myElement.getProperty(property);

引数:

property – (文字列) 取得したい属性。

戻り値:

(文字列) リクエストした属性値。

例:

HTML

"myImage" src="mootools.png" title="MooTools, the compact JavaScript framework" alt="" />

JavaScript

var imgProps = $('myImage').getProperty('src'); //戻り値: 'mootools.png'.

Elementメソッド: getProperties

要素の属性を複数返します。

構文:

var myProps = myElement.getProperties(properties);

引数:

properties – (文字列) 取得したいプロパティを複数。

戻り値:

(オブジェクト) リクエストされたプロパティからなるオブジェクト。

例:

HTML

"myImage" src="mootools.png" title="MooTools, the compact JavaScript framework" alt="" />

JavaScript

var imgProps = $('myImage').getProperties('id', 'src', 'title', 'alt');

//戻り値: { id: 'myImage', src: 'mootools.png', title: 'MooTools, the compact JavaScript framework', alt: '' }

Elementメソッド: setProperty

この要素に対し、属性や指定したプロパティをセットします。

引数:

property – (文字列) 渡された値を設定したいプロパティ。
value – (いろいろ) プロパティに設定する値。

戻り値:

(要素) – この要素。

例:

HTML

"myImage" />

JavaScript

$('myImage').setProperty('src', 'mootools.png');

HTMLの結果

"myImage" src="mootools.png" />

注意

属性をセットするためにElement:setPropertyを使うときは、小文字で単純な形式のプロパティ名を使いましょう。例：
- ○’for’　×’htmlFor’,
- ○’class’　×’className’
- ○’frameborder’　×’frameBorder’
- などなど。

Elementメソッド: setProperties

要素に複数の属性を設定します。

引数:

properties – (オブジェクト) キー＝値のペアを持つオブジェクト。

戻り値:

(要素) この要素。

例:

HTML

"myImage" />

JavaScript

$('myImage').setProperties({
    src: 'whatever.gif',
    alt: 'whatever dude'

});

HTMLの結果

"myImage" src="whatever.gif" alt="whatever dude" />

Elementメソッド: removeProperty

要素から属性を削除します。

構文:

myElement.removeProperty(property);

引数:

property – (文字列) 削除したい属性

戻り値:

(要素) この要素。

例:

HTML

"myAnchor" href="#" onmousedown="alert('click');">

JavaScript

//うーん... インラインJavaScriptはよくない! 削除してしまいましょう。
$('myAnchor').removeProperty('onmousedown');

HTMLの結果

"myAnchor" href="#">

Elementメソッド: removeProperties

要素から複数の属性を削除します。

構文:

myElement.removeProperties(properties);

引数:

properties – (文字列) 削除したい属性をカンマで区切った文字列。

戻り値:

(要素) この要素。

例:

HTML

"myAnchor" href="#" title="hello world">

JavaScript

$('myAnchor').removeProperties('id', 'href', 'title');

HTMLの結果

Elementメソッド: store

要素にリンクしているストレージにアイテムを保存します。

構文:

myElement.store(key, value);

引数:

key – (文字列) 保存した値につけたいキー名。
value – (いろいろ) 保存したい値。

戻り値:

(要素) この要素。

例:

$('element').store('someProperty', someValue);

Elementメソッド: retrieve

要素のストレージから値を取得します。

構文:

myElement.retrieve(key[, default]);

引数:

key – (文字列) ストレージから取り出したい値のキー名。
default – (いろいろ, オプション) 初期値。値が保存されていなければ、これが返されます。

戻り値:

(いろいろ) キーに結びつけられた値。

例:

$('element').retrieve('someProperty'); // 戻り値someValue (上の例を参照のこと)

Hash: Element.Properties

このハッシュにはElement:get、Element:set、Element:eraseで渡される第1引数に対応した関数が入っています。

要素にカスタムプロパティを付け加える

Element.Properties.disabled = {

    get: function(){

        return this.disabled;
    }

    set: function(value){

        this.disabled = !!value;
        this.setAttribute('disabled', !!value);
    }

};

要素のカスタムプロパティを利用する

//"disabled"プロパティを取得。
$(element).get('disabled');

//"disabled"プロパティにtrueをセットし、属性にする。
$(element).set('disabled', true);

注意点:

さらにプロパティをセットできるよう、自動的に要素を返します。

オブジェクトの利用:

さらに、オブジェクトをsetメソッドのパラメータとしてを使うことで、これらのカスタム関数を利用できます。

例:

//setの利用:

$(divElement).set({html: 'Hello People!
', style: 'background:red'});

//new Elementsでの利用(setと同じ働きをします):
new Element('input', {type: 'checkbox', checked: true, disabled: true});

Elementプロパティ: html

Set:

要素のinnerHTMLをセットします。

構文:

myElement.set('html', [htmlString[, htmlString2[, htmlString3[, ..]]]);

引数:

HTMLを持ったパラメータ文字列を幾つでも。

戻り値:

(要素) この要素。

例:

HTML

"myElement">

JavaScript

$('myElement').set('html', '
', '
');

HTMLの結果

"myElement">

Get:

要素のinnerHTMLを返します。

構文:

myElement.get('html');

戻り値:

(text) この要素のinnerHTML。

Elementプロパティ: text

Set:

要素の中にテキストをセットします。

構文:

myElement.set('text', text);

引数:

text – (文字列) 要素内の新しいテキストコンテンツ。

戻り値:

(要素) この要素。

例:

HTML

"myElement">

JavaScript

$('myElement').set('text', 'some text');

//myElementのテキストは'some text'になりました。

HTMLの結果

"myElement">some text

Get:

要素の中のテキストを取得します。

構文:

var myText = myElement.get('text');

戻り値:

(文字列) 要素内のテキスト。

例:

HTML

"myElement">my text

JavaScript

var myText = $('myElement').get('text'); //myText = 'my text'.

Elementプロパティ: tag

Get:

要素のタグ名を小文字で返します。

構文:

var myTag = myElement.get('tag');

戻り値:

(文字列) 小文字のタグ名。

例:

HTML

"myImage" />

JavaScript

var myTag = $('myImage').get('tag'); // myTag = 'img'.

Native: IFrame

簡単にインラインフレームを生成し、操作するためのカスタムNativeです。

IFrameメソッド: constructor

インラインフレームHTML要素を生成し、そのwindowとdocumentをMooToolsで拡張します。

構文:

var myIFrame = new IFrame([el][, props]);

引数:

el – (いろいろ, オプション) 変換したいiframeのIDか、iframe要素そのもの。渡されなければ、新しいiframeが作られます（デフォルト）。
props – (オブジェクト, オプション) 新しいiframeに適用されるプロパティ。Element:constructorの属性と同じ。

戻り値:

(要素) 新しいiframeHTML要素。

例:

var myIFrame = new IFrame({

    src: 'http://mootools.net/',

    styles: {
        width: 800,
        height: 600,
        border: '1px solid #ccc'

    },

    events: {

        mouseenter: function(){
            alert('Welcome aboard.');
        },

        mouseleave: function(){
            alert('Goodbye!');
        },

        load: function(){
            alert('The iframe has finished loading.');
        }

    }

});

注意点:

iframeが”ホスト”と同じドメインにあれば、そのwindowとdocumentはMooToolsによって拡張され、その中でMooToolsを最大限に使うことができます。
もしiframeがすでに存在していて、idと異なるnameを持っている場合、nameはidと同じものに変更されます。
もしiframeが異なるドメインのものならば、MooToolsメソッドによって拡張されません。

Native: Elements

ElementsクラスはElementとArrayのメソッドすべてをElements配列に使えるようにします。

Elementsメソッド: constructor

構文:

var myElements = new Elements(elements[, options]);

引数:

elements – (いろいろ) 要素の配列か、HTMLCollection オブジェクト。

戻り値:

(配列) Element、Elements、Arrayのメソッドによって拡張された配列。

例:

すべての段落の色を赤に変更:

$$('p').each(function(el){

    el.setStyle('color', 'red');
});

//$$('myselector')はのElementメソッドを継承しているので、
//以下の例は上と同じ効果があります。

$$('p').setStyle('color', 'red');

配列から要素を生成:

var myElements = new Elements(['myElementID', $('myElement'), 'myElementID2', document.getElementById('myElementID3')]);

注意点:

MooToolsでは、ノードコレクションを返す全てのDOM関数(例えば$$)の戻り値は、Elementsのインスタンスになっています。
Elementsは配列であるため、ElementとElementsの元となるArrayの全メソッドを継承しています。
Elementsインスタンスのすべてのノードは、Elementのメソッドをすべて継承しています。

参考情報:

$$, $, Element, Elements, Array

Elementsメソッド: filter

与えられたタグ名によって、要素コレクションをフィルタリングします。Selectorsがインクルードされていれば、CSSセレクターでフィルタリングをできます。
関数でフィルタリングを行うという点で、Array:filterと同じです。

構文:

var filteredElements = elements.filter(selector);

引数:

selector – (いろいろ) CSSセレクター。

戻り値:

(配列) このElementsインスタンスのサブセット。

関連度
33%

2010.09.15
【目指せePub出版】Webkitでtext-align:justifyに挑戦する

ずっと黙っていようと思っていたんですが、誰も聞いてくれないので告白します。近いうちに破滅派からePub長編小説を出版す[...]
関連度
27%

2011.02.28
Javascriptのカスタムイベント（MooToolsでGoogle Mapのラッパークラス）

昨今、限られた環境（iPhone限定とか）でない限り、JavaScriptのライブラリを使用して作成することが多いと思い[...]
関連度
22%

2008.09.14
Mootoolsの$関数がformで変な挙動をする件

ぼくは文芸の世界に生きる人間なので、やっぱりテキストが大好きです。なので、RIA（リッチ・インターネット・アプリケーショ[...]