jQuery_DOM操作

DOM（Document Object Model）とは

DOMとは、xmlやhtmlの各要素にアクセスする仕組みのことです。

DOMを操作することによって、表示されたWebサイトを動的に書き換えるなど、要素の値をダイレクトに変更することができます。

Windowオブジェクト

Windowオブジェクトは、WEBブラウザの情報を保持するオブジェクトです。

このWindowオブジェクトにあるdocumentプロパティがdocumentオブジェクトを保持しています。

DOMはdocumentオブジェクトを通して、個々の要素を取得・操作することができます。


// windowオブジェクトを表示する。
<body>
  <script>console.log(window);</script>
</body>

DOM操作

HTML要素（タグやID）に対して、書き換えを行います。

書き換え対象となるHTMLは以下のように用意します。


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
  <script src="plugins/jquery-3.2.1.js"></script>
  <script src="main.js"></script>
  <div id="element">
    <p id=text1>jQuery</p>
    <button id="button">ボタン</button>
  </div>
</body>
</html>

テキストの取得と変更

テキストの取得は「$("セレクター").text();」を用います。

セレクターで指定した要素内のテキストを変更するには「$("セレクター").text("text");」を用います。


$(function(){
  $('#button').on('click', function() {
    // テキストを取得する。
    var buf = $("#text1").text();

    // 文字列を反転する。
    buf = buf.split("").reverse().join("");

    // テキストを変更する。
    $("#text1").text(buf);
  });
})

HTMLの取得と変更

セレクターで指定した要素内のHTMLを変更します。


$(function(){
  $('#button').on('click', function() {
    // HTMLを取得する。
    var buf = $("#text1").html();。

    // HTMLを変更する。
    $("#text1").html("<strong>"+ buf + "</strong>");
  });
})

要素を追加する。

prepend()はセレクターで指定した要素内の先頭にHTMLを追加します。

下記例では、<div element>の直後にHTMLが挿入されます。


$("#element").prepend("<p>prepend!!</p>");

append()はセレクターで指定した要素内の最後にHTMLを追加します。

下記例では、</div>の直前にHTMLが挿入されます。


$("#element").append("<p>append!!</p>");

before()はセレクターで指定した要素の前にHTMLを追加します。


$("#text1").before("<p>before!!</p>");

after()はセレクターで指定した要素の後ろにHTMLを追加します。


$("#text1").after("<p>after!!</p>");

その他DOM操作

セレクターで指定した要素を別の要素で包みます。


$("セレクター").wrap("<h1></h1>");

セレクターで指定した要素を別の要素と置き換えます。


$("セレクター").replaceWith("<h1></h1>");

セレクターで指定した要素を削除します。


$("セレクター").remove();

セレクターで指定した要素の属性を変更します。


$("セレクター").attr("属性名","属性値");

セレクターで指定した要素の属性を削除します。


$("セレクター").removeAttr("属性名");

セレクターで指定した要素にclass属性を追加します。


$("セレクター").addClass("class属性値");

セレクターで指定した要素からclass属性を取除きます。


$("セレクター").removeClass("class属性値");

セレクターで指定した要素のCSSを変更します。


$("セレクター").css("プロパティ","値");