jQueryでDOM操作する際の基本記述を勉強し直してみたよ。

By@mtoksuyOn 2013年09月26日

Tag To
JavaScript
jQuery
DOM
入門

久し振りにJavaScriptを触ったら物凄く忘れていたので、まずはjQueryの基本記述をもう一度勉強し直してみました！DOMを操作する事って多々あると思いますので、ある意味チートシートのように見て頂くと嬉しいです。DOM以外にも偶数処理やクローン等も載せておきます。

親要素を取得する方法

まずは親要素の取得系からいきましょー。

一つ上の親要素取得

jQuery

// 一つ上の親要素取得
$(".hoge").parent();
 
// 要素がdivなら取得する。divでなければ空(Objectは返ってくる)
$(".hoge").parent("div");

親全取得

jQuery

// 親全取得
$(".hoge").parents();
 
// 親を指定して取得
$(".hoge").parents(".class_name");

開始要素から最も近い親要素を選択

jQuery

// 開始要素から最も近い親要素を選択
$(".hoge").closest("div");

子要素を取得する方法

次は子要素の取得系。

全ての子要素取得

jQuery

// 全ての子要素取得
$(".hoge").children();
 
// 指定したタグの要素を全取得。なければ空(Objectは返ってくる)
$(".hoge").children("p");

要素のテキストノードも含めた全子要素を取得

jQuery

// 要素のテキストノードも含めた全子要素を取得
$(".hoge").contents();

全子孫要素から指定したタグの要素を全取得

jQuery

// 全子孫要素から指定したタグの要素を全取得。なければ空(Objectは返ってくる)
$(".hoge").find("div");

兄弟要素を取得する方法

兄弟内の要素を取得するにはこんな感じで。

次にある要素取得(兄弟要素ならば)

jQuery

// 次にある要素取得(兄弟要素ならば)
$(".hoge").next();
 
// 絞り込みも可能
$(".hoge").next("div");
 
// 現在の要素の次以降にある兄弟要素を全取得
$(".hoge").nextAll();

前にある要素取得(兄弟要素ならば)

jQuery

// 前にある要素取得(兄弟要素ならば)
$(".hoge").prev();
 
// 絞り込みも可能
$(".hoge").prev("div");
 
// 現在の要素の前以降にある兄弟要素を全取得
$(".hoge").prevAll();

要素を書き換えする方法

取得系を覚えましたら、次は書き換えを。

テキスト書き換え

jQuery

// テキスト書き換え
$(".hoge").text("書き換える");

HTML書き換え

jQuery

// HTML書き換え
$(".hoge").html("書き換える");

HTMLを追加する方法

追加系はかなり重要なので覚えときましょう。

指定した要素内部の先頭に追加

jQuery

// 先頭にHTML追加
$(".hoge").prepend("追加");

指定した要素内部の最後に追加

jQuery

// 要素の内部の最後にHTML追加
$(".hoge").append("追加");

指定した要素の前に追加

jQuery

// 指定した要素の前に追加
$(".hoge").before("追加");

指定した要素の後に追加

jQuery

// 指定した要素の後に追加
$(".hoge").after("追加");

要素を移動する方法

prependTo()、appendTo()、insertBefore()、insertAfter()を使用して移動する方法は

こちらの記事で簡潔に説明されています。

オブジェクトの操作その４（HTML 要素の移動） - awacio.log

一番上に移動

jQuery

// 一番上に移動
$(".hoge").click(function() {
  var target = $(this);
  $(".fuga").prepend(target);
});

一番下に移動

jQuery

// 一番下に移動
$(".hoge").click(function() {
  var target = $(this);
  $(".fuga").append(target);
});

一つ上に移動

jQuery

// 一つ上に移動
$(".hoge").click(function() {
  var target = $(this);
  var prev = target.prev();
  prev.before(target);
});

一つ下に移動

jQuery

// 一つ下に移動
$(".hoge").click(function() {
  var target = $(this);
  var next = target.next();
  next.after(target);
});

要素を削除する方法

削除するにも細かい挙動がありますので気をつけたい所です。細かい挙動の説明はこの記事を見て頂くと良いかと思います。

DOM制御･更新処理：削除｜jQuery APIリファレンス｜Ajax｜PHP & JavaScript Room

要素を削除

jQuery

// DOMから削除
$(".hoge").click(function() {
  $(this).remove();
});

数字、奇数、偶数指定で処理したい時

短いコードで実装出来ますので便利です。

jQuery

// 3番目のliだけ処理
$("ul li:nth-child(3)").each(function() {
  $(this).css( {
    background: "#ccc"
  });
})
 
// 偶数のliだけ処理
$("ul li:nth-child(2n)").each(function() {
  $(this).css( {
    background: "#ccc"
  });
})

要素のクローンを生成したい時

使う機会はそこまでありませんがカンタンに出来ますので覚えといて損はないでしょう。

jQuery

// クローン生成
$(".hoge").click(function() {
  var this_clone = $(this).clone();
  $(this).after(this_clone);
});

勉強する際に参考にした記事

make a record of…: jQuery親要素、子要素、兄弟要素取得のまとめ

Javascript/jQuery/子要素の操作 - 俺の基地

jqueryでhtmlの書き換えを行う方法

jQueryで（n）番目（ｎ倍数）の特定要素に処理を加える「:nth-child()」のちょっと便利な使い方 | BlackFlag

オブジェクトの操作その４（HTML 要素の移動） - awacio.log

jQueryで連続したDOM要素のいずれかをクリックした際に、その要素を一番上、一番下、一つ上、一つ下に移動する方法 - knt45の日記

jqueryを使ってみよう | jqueryのＤＯＭ操作

DOM制御･更新処理：削除｜jQuery APIリファレンス｜Ajax｜PHP & JavaScript Room

まとめ

Jqueryの基本記述の記事なんて恥ずかしくて書けないと躊躇していたのですが、カンタンなコードの中にも細かい違いがありますし、DOM操作はかなり重要ですので、チートシート的な記事にしてみました。

前の投稿へ

次の投稿へ