DOMを操作してHTMLを制御してみよう【 jQuery基礎】
2017/12/04
前回の「CSSの操作」に引き続き、今回は「DOMの操作」について解説していきます。「CSSの操作」を理解された前提で話を進めていきますので、まだな方は先にCSSの操作をご覧ください。
CSSの操作で制御できるのは「見た目」に限定されていましたが、DOMの操作ではコンテンツそのものを制御できるので、より多彩なコンテンツ制作が可能になります。
テンプレートは前回と同じもの使用していきます。
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>はじめてのjQuery</title> </head> <body> <ul> <li><a href="http://www.yahoo.co.jp/">Yahoo</a></li> <li><a href="http://www.google.co.jp/">Google</a></li> <li><a href="http://twitter.com/">Twitter</a></li> </ul> <p>お買い物は<a href="http://www.amazon.co.jp/">Amazon.co.jp</a>で！</p> <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script> <script> //ここにプログラムを書きます。 </script> </body> </html>
DOMの操作はバリエーションが豊富なため全てを紹介することはできないので代表的なものを紹介します。
属性値の操作
ここで紹介する「属性」とはHTMLで使われる「href」、「target」、「alt」、「src」、「title」などを指します。jQueryではこれらを操作することができます。書式は前回記事で紹介したCSSの操作と基本は同じです。簡単な例を見てみましょう。
$("a").attr("target","_blank");
この例では全てのリンクを新規ウインドウで開くように動的に設定しています。前回記事のcssメソッドがattrメソッドに置き換わっただけなので説明は不要かと思います。
DOMの操作を行う際の書式は以下のようになります。
$(“セレクタ”).attr(“HTMLの属性名” , “値”)
属性を複数設定する場合もCSS操作の時と同じでオブジェクトリテラルを用います。前回記事の「CSSの操作」を理解していれば説明は不要でしょう。
$("a").attr({
"target":"_blank",
"title":"サンプル"
});
クラスの操作
classも属性の１つですが、classは他の属性と異なり複数設定することが可能です。そのため専用のメソッドを持ちます。
クラスの追加にはaddClassメソッドを使用します。書式は以下になります。
$(“セレクタ”).addClass(“クラス名”)
こうすることで指定した要素にクラスを追加できます。また、クラス名を半角スペースで区切ることで複数指定することが可能です。以下のように指定します（セレクタではないのでクラス名の先頭にピリオドは付けません）。
$("ul").addClass("list clearfix");
逆にクラスを削除する場合はremoveClassメソッドを使用します。
$(“セレクタ”).removeClass(“クラス名”)
addClass同様にスペース区切りで複数同時に削除することも可能です。
個人的な感覚ですが、前回記事の「CSSの操作」によって見た目を制御するよりも、これらのメソッドを使って動的にクラスを変更して見た目を制御したほうが管理がしやすくオススメです。
要素の書き換え
jQueryでは要素の内容を丸ごと書き換えることも可能です。
$("p").html('お買い物は<a href="http://www.rakuten.co.jp/">楽天</a>で！');
この例では元ソースの
<p>お買い物は<a href="http://www.amazon.co.jp/">Amazon.co.jp</a>で！</p>
の部分を
<p>お買い物は<a href="http://www.rakuten.co.jp/">楽天</a>で！</p>
に置き換えています。
書式は以下のようになります。
$(“セレクタ”).html(“置き換える内容”)
また、以下のようにhtmlではなくtextメソッドを使用することでプレーンテキストとして表示可能です。
$(“セレクタ”).text(“置き換える内容”)
要素の置き換えはパラメータがシンプルなので属性の設定よりもわかりやすいかと思います。
要素の追加
続いて要素の追加です。早速例を紹介します。
$("p").append('<a href="http://www.rakuten.co.jp/">楽天</a>もオススメ！');
この例では元ソースの
<p>お買い物は<a href="http://www.amazon.co.jp/">Amazon.co.jp</a>で！</p>
の部分に要素を追加し、以下の結果を得ています。
<p>お買い物は<a href="http://www.amazon.co.jp/">Amazon.co.jp</a>で！<a href="http://www.rakuten.co.jp/">楽天</a>もオススメ！</p>
書式は以下のようになります。
$(“セレクタ”).append(“追加する内容”)
appendメソッドではセレクタで指定された要素内部末尾に要素を追加します。これに関連するメソッドに、prepend、、after、beforeなどがあります（リンクは別サイト）。これらは要素を追加位置が異なるだけです。
要素の削除
要素の削除にはempty、removeといったメソッドが存在します。
emptyメソッドは指定した要素の中身を空にします。書式は以下の通りです。
$(“セレクタ”).empty()
removeメソッドは指定した要素自身とその中身を削除します。書式は以下の通りです。
$(“セレクタ”).remove()
おわりに
DOMの操作ができるようになると、出来ることのバリエーションが大幅に増えるため、アプリケーションやサイトの運用が楽になるような仕組みなんかも作れるようになります。もちろんJavaScriptの基礎知識は必要になってきますが。頑張りましょう。
↓「Web制作に必要なことだけを効率よくしっかり学べる」ということで好評を得ているこの書籍オススメです。「jQueryは勉強したいけどJavaScriptを一から覚えるのはシンドイ」という人は是非！