JS/ES – JQuery – DOMの追加

概要

動的に生成したDOMを指定したDOMに対して追加する。追加されるDOMの外側/内側、前/後に応じて、before()prepend()append()after()の各メソッドを使う。

書式

[追加されるDOM].before([追加するDOM])
追加されるDOMの外側直前に追加。
[追加されるDOM].prepend([追加するDOM])
追加されるDOMの内側先頭に追加。
[追加されるDOM].append([追加するDOM])
追加されるDOMの内側末尾に追加。
[追加されるDOM].after([追加するDOM])
追加されるDOMの外側直後に追加。

実行例

結果イメージ:

beforeで追加

prependで追加
既存の要素の中身
appendで追加

 

afterで追加

JS/ES – Array – splice

概要

Array.prototype.splice()は、インデックスを指定して文字列の削除、取出し、置換、挿入が行える。splice()は破壊的であり、元の配列の内容が書き換えられる。

要素の取出し・削除

以下の例では、2番目の位置から1つの要素を取り出している。取り出された要素は(要素数が1つであっても)配列として返され、元の配列からは指定した要素が削除される。すなわちslice()は破壊的に動作する。

要素の置換

次の例では、1番目の位置から2つの要素を削除し、その位置に2つの要素を新たに挿入している。

要素の挿入

位置だけ指定して削除する文字数を0にすれば、文字列の挿入ができる。

 

JS/ES – Array – filter

概要

Array.prototype.filter()は、コールバック関数を引数にとり、配列の各要素にコールバックの条件を適用した結果を新たな配列として返す。

[新たな配列] = [元の配列].filter(callback);

コールバックは引数を1つ取りtrue/falseを返す関数で、引数には元の配列の各要素が順次あてられ、条件がtrueの要素のみが残った配列が新たに生成される。

実行例

以下の例では、文字列を要素とする配列から文字列長が3文字以内の要素のみを取り出して新たな配列としている。元の配列は影響を受けない。

活用例~要素の削除

以下のように、配列の要素の内容を指定して削除することができる。同じ内容の要素が複数含まれる場合、すべて削除される。

 

JS/ES/JQuery – ストック

JQuery

プロパティーの設定

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

取得

valueの取得

$([セレクター]).val();

連鎖

anchor要素を生成し、href属性にurlの文字列を設定し、表示文字列としてlink_nameを設定する。

 

JS/ES – JQuery – CSS

概要

JQueryでDOMのCSSの追加・変更・削除をするにはcss()メソッドを使う。

スタイルの設定

単一のプロパティー

css()メソッドの1つ目の引数にプロパティー、2つ目の引数に値を文字列で与えて、スタイルを設定する。

また、css()の第1引数だけにプロパティー名を指定すると、スタイルの値が得られる(以下の例では#00fで与えた色の値がrgb(0, 0, 255)で返されている)。

複数プロパティーの一括設定

css()の引数に連想配列(Object型)を与えて、複数のスタイルを一括指定する。連想配列のキーがプロパティー、値がスタイルの値になる。

複数のスタイルの値を確認するには、css()の引数に配列を与え、その配列の中で必要なスタイルプロパティーを複数指定する。戻り値は連想配列で返される。

スタイルの解除

css()の1つ目の引数にプロパティーを指定し、2つ目の引数を空文字列にすると、指定したスタイルが解除される。

 

JS/ES – JQuery – スクリプトの配置

概要

JavaScriptやJQueryの配置位置については、HTML要素の読み込みとの前後関係に注意しなければならない。

HTML要素の内容・スタイルの設定やイベントリスナーの登録など、オブジェクトの実体が必要な殆どの操作は、DOMが読み込まれた後に行う必要がある。

以下、JQueryのコードを中心に、コード配置について整理する。

不適切な配置

以下の例は、対象となるDOMが読み込まれる前にスクリプトが実行される。

このため、スクリプト実行段階ではDOMの実体が存在せず、意図したp要素の文字の色の設定は行われない。これはJavaScriptのコードでも同じ。

スクリプトをbodyの末尾に置く

以下の場合は、スクリプトがbodyの末尾に置かれていて、body内のDOMが全て読み込まれた後にスクリプトが実行される。

このため、スクリプト実行時にはDOMの実体が定まっていて、意図したp要素の色の変更が行われる。これもJavaScriptで書く場合と共通。

スクリプトをhead内に置く

DOM読み込み後に実行

$(document).ready(function() {});

&(document).ready()メソッドに渡した関数は、HTMLやDOMが読み込まれると実行される。

画像ファイルなどのリソースはまだ完全に読み込まれていない状態。

$(document).ready(() => {});

ready()に渡す関数をアロー関数で書くと、表現が簡略化される。

$(function {});

関数を直接JQueryの引数に渡す、redayメソッドよりも簡略化された書き方。

$(() => {});

JQueryに渡す関数をアロー関数にした、最も簡潔な書き方。

リソースの完全読み込み後に実行

$(window).onload(function() {});

DOMに続いて画像ファイルなどのリソースが完全に読み込まれた後に実行される。画像サイズの利用や変更を伴う場合にはこの方法で。

$(window).onload(() => {});

onloadの引数にアロー関数を渡すと、簡潔になる。

 

JS/ES – 列挙型(enum)

JavaScriptにはビルトインのenum型はないが、連想配列で似たような表現ができる。

こうすると2値のフラグ以外の状態表現なども可能になり、switch文も見やすくなる。

 

JS/ES – DOM – 要素の追加・変更・削除

概要

window.documentのメソッドによって、bodyや親要素に対して動的に要素を追加・変更・削除する方法。

なお要素のタグで囲まれたテキストの操作についてはこちらにまとめた。

要素の追加

要素の追加は以下の手順。

  1. document.createElement()で要素オブジェクトを生成
    • 引数で生成する要素名を指定
  2. 要素の内容やスタイルを設定
    • 要素のスタイルはCSSプロパティーで設定
    • 要素のテキストを設定
  3. 親要素のappendChild()メソッドの引数に追加する要素を指定して追加

bodyへの追加

bodyへの追加も他の親要素への追加と同じで、親要素としてdoccument.bodyを指定する。以下の例では、htmlに書かれたp要素に続けて動的にp要素を追加している。

appendChild()はbody要素が読み込まれた後でなければならない。イベントリスナーの登録タイミングと同じように、windows.onloadの中で実行するなど留意する必要あり(以下の例では要素の生成もonloadの中に書いているが、最低限appendChild()がここにあればよい)。

HTML

結果

親要素への追加

生成した要素を特定の親要素の子要素として登録する場合、親要素のappendChild()の引数に追加する要素を指定。

以下の例では、HTMLに書かれたdiv要素の中とその次にp要素を追加している。

HTML

結果

元から設置されたdiv要素

div要素の子要素としてp要素を追加

div要素の2番目の子要素としてp要素を追加

 

div要素の次にp要素を追加

要素の入れ替え

要素の入れ替えは、入れ替える要素の親要素のreplace()メソッドを実行する。1つ目の引数に入れ替え後の新しい要素を、2つ目の引数に入れ替えられる前の要素を指定する。

HTML

結果

置き換え用p要素の1つ目

元から設置されたp要素の2つ目

置き換え用p要素の2つ目

追加された要素の2つ目

要素の削除

要素を削除するには、その要素を含む親要素のremoveChild()メソッドに削除する要素を指定する。

以下の例では、HTMLに書かれた2つのp要素と動的に追加した2つのp要素から1つずつを削除している。

HTML

結果

元から設置されたp要素の2つ目です

追加された要素の2つ目です

 

JS/ES – DOM – textContent, innerText, innerHTML

概要

ブラウザーによる対応の有無もあるようだが、DOMの要素のテキストを扱う3つのプロパティー、textContent, innerText, innerHTMLの機能を確認する。

コード内容と結果

確認に使ったコードは以下の通りで、予め空のa要素を準備し、これに対して3つのプロパティーによってテキストを設定している。

テキストの種類は、プレーンテキスト、エスケープコード含み、HTMLタグ含みの3種類。

これに対して3つのプロパティーの挙動を確認しているので、計9個のリンクの結果を確認する。

HTML

結果

プレーンテキストに対しては、3つのプロパティーとも同じ結果になる。

エスケープコードを含むテキストについては、innerTextはエスケープを機能通りに表示、textContentとinnerHTMLはエスケープの機能は再現しないが、半角空白の文字として表現。

タグに関しては、innerHTMLは反映、他の2つはそのままプレーンテキストとして表示される。つまり、innerHTMLは<や>などの文字がそのまま送られ、innerTextとtextContentでは&lt;や&gt;などの特殊記号に変換されて送られる。

まとめ

textContent innerText innerHTML
プレーンテキスト テキスト表示 テキスト表示 テキスト表示
ESC含みテキスト テキスト表示(ESCは半角SP) ESC機能を反映 テキスト表示(ESCは半角SP)
タグ含みテキスト プレーンテキスト表示 プレーンテキスト表示 タグ機能を反映

JS/ES – interval

概要

WindowOrWorkerGlobalScopesetInterval()メソッドは一定間隔で関数を実行し、clearInterval()メソッドはこれを停止する。

書式

timer_id = setInterval(function, interval);

clearInterval(timer_id);

function

一定時間間隔で実行させる関数を指定する。
interval
functionを実行させる時間間隔をミリ秒単位で与える。

setInterval()は、戻り値として実行中のタイマーのidを整数で返す。clearInterval()の引数にこのタイマーidを指定して、実行中のタイマーを停止させる。

実行例

以下の例ではページに1つのp要素と2つのボタンを配置する。

startボタンを押すとカウントが始まり、1秒ごとに増加するカウンターの値がp要素に表示される。

stopボタンを押すとカウントアップが停止される。