DOM 操作
これまで、 JavaScript フレームワークによりセレクターとDOMトラバーサルを使用して特定の要素を簡単に取得できることを見てきました。ただし、Web ページ上の特定の要素のコンテンツと外観を変更するには、DOM を操作して変更を適用する必要があります。純粋なJavaScript を使用するのは大変な作業ですが、幸いなことに、ほとんどの JavaScript フレームワークには、これを簡単に行うための便利な機能が用意されています。
ID が the-box のボックスがあるとします。
<div id="the-box">ここにメッセージが入ります</div>
jQuery を使用してテキストを「ここにメッセージが表示されます」に変更します。これは次のように簡単に使用できます。
$('#the-box').html('これは新しいメッセージです!');
実際、関数で HTML コードを使用すると、ブラウザによって解析されます。次に例を示します。
$('#the-box').html('これは<strong>新しい</strong>メッセージです!');
この例では、DIV 要素内のコンテンツは次のようになります。
<div id="the-box">これは<strong>新しい</strong>メッセージです!'</div>
もちろん、この例では、特別な HTML エンティティ コードを指定するのではなく、大なりまたは小なりなどの特殊文字を使用する必要があります。代わりに jQuery の text 関数を使用できます。
$('#the-box').text('300 >200');
div 要素を更新した後のコードは次のとおりです。
<div id="the-box">300 > 200</div>
上の例では、既存のコンテンツが新しいコンテンツに置き換えられます。テキストに情報を追加したいだけの場合はどうすればよいでしょうか?幸いなことに、jQuery にはこの目的のための追加関数が用意されています。
$('#the-box').append('、ここにメッセージが入ります');
元の div に対して上記の操作を実行すると、div 要素の内容は次のようになります。
<div id="the-box">ここにメッセージが入ります、ここにメッセージが入ります</div>
コンテンツを追加する代わりに、コンテンツを先頭に追加して、既存のコンテンツの後ではなく前に挿入することができます。さらに、jQuery は、指定された要素内の前後にコンテンツを挿入する関数を提供します。コンテンツの置換、コンテンツのクリア、要素の削除、要素の複製などの機能もあります。
DOM 操作関数に加えて、JavaScript フレームワークには通常、要素のスタイルとクラスを操作するための関数がいくつか含まれています。たとえば、マウスがその上を通過すると行が強調表示される表があるとします。行に動的に追加できる hover という名前の特別なクラスを作成できます。 YUI を使用すると、行にホバー クラス名があるかどうかを判断できます。存在する場合は無視され、追加されます。
if(row.hasClass('hover')) row.removeClass('hover'); else row.addClass('hover');
同様に、ほとんどの JavaScript フレームワークには、CSS を操作するための関数が組み込まれています。