Mootools 1.2_Mootools を使用して HTML DOM 要素を操作する-jsチュートリアル-php.cn

DOM 要素の選択方法、配列の作成方法、関数の作成方法、要素にイベントを追加する方法をすでに学習しました。今日は、HTML 要素の操作方法を詳しく学習します。 MooTools 1.2 を使用すると、HTML ページへの新しい要素の追加、要素の削除、スタイルや要素パラメータの変更をすべて非常に簡単に行うことができます。
基本メソッド
.get();
このツールを使用すると、要素のプロパティを取得できます。要素属性は、src、value、name など、HTML 要素を構成するさまざまな部分です。 .get(); メソッドの使用は非常に簡単です:
リファレンスコード:

コードをコピーしますコードは次のとおりです。

// 次の行は、ID が「id_name」の要素の HTML タグ名 (div、a、span...) を返します。 
$('id_name').get ('タグ'); 
 

参照コード:

コードをコピーコードは次のようになります。

Element "span" -->

HTML タグ名だけでなく、さらに多くの属性を取得できます。
name
value
href
src
class (CSS クラス名が複数ある場合は、すべての CSS クラス名が返されます)
text (要素のテキスト内容)
待ってください...
.set();
.set(); メソッドは、値を取得する代わりに、値を設定します。これは、ページの読み込み後に一部のプロパティ値を変更できるイベントと組み合わせて使用すると便利です。
参照コード:
// これにより、id_name を持つ要素のリンクアドレスが "http://www.google.com" に設定されます
$('id_name').set('href', ' http://www.google.com');

参照コード:

コードをコピーコード

検索エンジン

.erase();

.erase(); メソッドを使用して、要素の属性値をクリアできます。これは前の 2 つの方法と似ています。要素を選択し、クリアする属性を選択します。
参考コード:
// id id_name
$('id_name').erase('href'); の要素の href 属性を削除する方法です。

参考コード:

コードをコピーコードは次のとおりです:

検索エンジン 🎜>

要素の移動

.inject();
ページ上の既存の要素を移動するには、.inject();方法。これまでに説明した他の方法と同様、使い方は非常に簡単で、ユーザーインターフェイスをより詳細に制御できます。 .inject(); メソッドを使用するには、まず要素変数をいくつか設定します。
リファレンスコード:

コードをコピーコード以下のように: var elementA = $('elemA');

var elementB = $('elemC'); >

上記のコードは、次の HTML をさまざまな変数に割り当てます。これにより、MooTools での操作が容易になります。 
参照コード: 

コードをコピー

コードは次のとおりです:

="elemC ">C

これらの要素の順序を変更するには、.inject() メソッドを 4 つの方法で使用できます。
下 (デフォルト)
上 (上)
要素の前 (前)
要素の後 (後)
底と上は、この要素を内部に挿入します。選択した要素。要素の下部または上部にあります。対照的に、before と after は、ある要素を別の要素の上部または下部に挿入しますが、要素の内部には挿入しません。
それでは、要素の順序を A-C-B に変更しましょう。ある要素を別の要素に挿入する必要がないため、before または after を使用できます。
参照コード:

コードをコピーコードは次のとおりです:

//次の文の意味: 要素 C を要素 B の前に置く 
elementC.inject(elementB, 'before'); 
// 次の文の意味: 要素 B を要素 C の後に置く 
elementB, 'after'); 

新しい要素を作成します
新しい要素
「新しい要素」コンストラクターを使用して HTML 要素の行を作成できます。これは通常の HTML 要素の作成と非常に似ていますが、MooTools で通常どおり実行できるように構文を調整する必要がある点が異なります。
参照コード:
// まず変数に名前を付け、「新しい要素」を宣言します
// 次に、要素のタイプ (div、a、span...) を定義します。
var newElementVar = new Element('div', {
// ここで要素のすべての属性を設定します
'id ' : 'id_name',
'text': '私は新しい div',
'styles': {
// ここで要素のすべてのスタイルパラメーターを設定します
'width': ' 200px ',
'height': '200px',
'background-color': '#eee',
'float': 'left'
}
});要素を作成したので、先ほど学習した inject() メソッドを使用して、この要素をページ上のどこかに配置できます。次の単純な HTML から始めます。
リファレンスコード:

一部の div コンテンツ

次に、ID content_id を持つ要素を変数に変換します。
リファレンスコード:
var bodyWrapVar = $('body_wrap'); 、作成した要素を現在の HTML に挿入できます:
リファレンスコード:
// この文の意味は次のとおりです: 「newElementVar を bodyWrapVar に挿入し、先頭に配置します」
newElementVar.inject(bodyWrapVar, ' top');
このコードは次のようになります:
参照コード:

私は新しい div

一部の div コンテンツ

;/div>

例
この例では、HTML ページに行要素を追加できるフォームを作成してみましょう。まず、いくつかのテキストボックスとボタンを作成します。
参照コード:

コードをコピー

コードは次のとおりです:

ID: text: 🎜>

次に、MooTools を使用して JavaScript を作成して、この HTML フォームを作成しましょう新しい要素をページに挿入します。まず、このボタンにイベントを追加し、コードを含める関数を作成しましょう: 
リファレンス コード: 

コードをコピー

コードは次のとおりです。

var newDiv = function() { // ここに「新しい要素の追加」コードを置きます }; ('domready', function() { $('new_div').addEvent('click', newDiv); });

次に行うこと すべてしなければならないのは、操作したい変数を指定することです。入力フォームのデータを使用するには、.get(); メソッドを使用する必要があります: 
参照コード: 

コードをコピー

コードは次のとおりです:

var idValue = $('id_input').get('value'); var textValue = $('text_input').get( '値');
Now, the variables idValue and textValue in the above code contain the values of the input forms they specify. Since we need to get the value of the input box when the user clicks the "Create a new div" button, we need to put the above code in the newDiv(); function. If we need to get this value outside this function, we need to get it when the page loads, not when it is clicked.
Reference code:

Copy code The code is as follows:

var newDiv = function() { 
var idValue = $('id_input').get('value'); 
var textValue = $('text_input').get('value'); 
}; 
window .addEvent('domready', function() { 
$('new_div').addEvent('click', newDiv); 
}); 

Next, we We need to get the element to which our new element is to be inserted:
Reference code:

Copy code The code is as follows:

var newDiv = function() { 
var idValue = $('id_input').get('value'); 
var textValue = $('text_input').get('value' ); 
var bodyWrapVar = $('newElementContainer'); 
}; 
window.addEvent('domready', function() { 
$('new_div').addEvent('click' , newDiv); 
}); 

We already have the values for our input form, now we can create a new element:
Reference code:

Copy code The code is as follows:

var newDiv = function() { 
var idValue = $(' id_input').get('value'); 
var textValue = $('text_input').get('value'); 
var bodyWrapVar = $('newElementContainer'); 
var newElementVar = new Element('div', { 
// This will set the id of this element to the value of idValue
'id': idValue, 
// This will set the text of this element to the value of textValue
'html': textValue 
}); 
}; 
window.addEvent('domready', function() { 
$('new_div').addEvent('click', newDiv ); 
}); 

All we have to do is insert this new element into our page:
Reference code:

Copy code The code is as follows:

var newDiv = function() { 
var bodyWrapVar = $('newElementContainer'); 
var idValue = $('id_input').get('value'); 
var textValue = $('text_input').get('value'); 
var newElementVar = new Element(' div', { 
'id': idValue, 
'text': textValue 
}); 
// The following sentence says: "Insert newElementVar into the inner top of bodyWrapVar" 
newElementVar.inject(bodyWrapVar, 'top'); 
}; 
var removeDiv = function() { 
// This will remove the inner html value (that is, everything in the div tag class) 
$('newElementContainer').erase('html'); 
} 
window.addEvent('domready', function() { 
$('new_div').addEvent('click', newDiv); 
$('remove_div').addEvent('click', removeDiv); 
}); 

Learn more...

Be sure to spend some time looking at the Elements section of the MooTools documentation:

ElementThis section contains most of what we’ve covered here, and a lot more
Element.style can give you more control over element style attributes (some things we will explain in depth in future tutorials)
Element.dimentionsContains tools for processing positions, coordinates, dimensions, etc.