生JavaScriptとjQueryの記述比較 ※随時更新

生JSとjQueryの記述比較。DOM操作、HTML/CSSの書き換え、イベント等、基本的なもの&よく使うものだけ。 しばらく記述していないとすぐ忘れるので自分用オボエガキ。ちょっとずつ更新&推敲。

スポンサーリンク

スクリプト全体の囲み方

JavaScript

即時関数で囲み、スコープの汚染を防ぐ。 ‘use strict’(Strictモード)で安全でなかったり非効率なコード、将来的に使用できなくなるであろう記述をした場合エラー検出されるようにしておく。

jQuery

要素ノードを取得

id値をキーに要素を取得

これが一番パフォーマンスが良いので、できる限りこれを使用するのが良い。

HTML

JavaScript

jQuery

タグ名をキーに要素を取得

HTML

JavaScript

戻り値はHTMLCollectionオブジェクト(要素の集合)。配列と似た構造のデータ。ほぼNodeListオブジェクトと同じもの。利用できるメンバーもほぼ同じ。 HTMLCollectionオブジェクト主なメンバー:length/item(i)/namedItem(name)

jQuery

class属性をキーに要素を取得

HTML

JavaScript

戻り値はHTMLCollectionオブジェクト(要素の集合)。配列と似た構造のデータ。ほぼNodeListオブジェクトと同じもの。利用できるメンバーもほぼ同じ。 具体的なソースと説明は「タグ名をキーに要素を取得」を参照。

jQuery

name属性をキーに要素を取得

<input><select>等フォーム要素へ使用。あまり使わないかもしれないので割愛。後で追記するかもしれません。 JavaScript「document.getElementsByName」の戻り値は、NodeListオブジェクト。HTMLCollectionオブジェクトとほぼ同じでブラケット構文も使える。

セレクタ―の書式で要素を取得

HTML

JavaScript

  • querySelector…要素群の最初の1つだけ取得もしくは1つしかない場合
  • querySelectorAll…戻り値NodeListオブジェクト

jQueryと同様にCSSの記法で取得できるのでとっても楽。ただし、これよりgetElementById/getElementsByXxxxxメソッドの方が高速。その中でもできるだけgetElementByIdを使うようにしよう!

jQuery

DOMツリーの行き来(ノードウォーキング/トラバース)※編集中

HTML

JavaScript

jQuery

ノードを新規作成/追加

要素ノードを作成/追加

HTML

JavaScript

jQuery

属性値やテキストを取得/設定

テキストを取得/設定

textContentプロパティの方がinnerHTMLプロパティよりも高速、かつセキュリティの問題も発生しにくいためHTML文字列を埋め込むのでなければ優先して利用する。

HTML

JavaScript(テキストを取得)

JavaScript(テキストを変更)

jQuery(テキストを取得)

jQuery(テキストを変更)

属性値を取得/設定

HTML

①JavaScript

多くの属性は要素ノードの同名のプロパティとしてアクセスできる。 一部、属性とプロパティの名前が一致していないケースもあるので、注意。 (一致しないケース例)「class」属性は「className」プロパティとちょっと名前が変わってしまう。

②JavaScript(getAttribute/setAttribute)

属性名とプロパティとの名前の違いを意識したくないならば「getAttribute/setAttribute」メソッドを利用する②の書き方もできる。 冗長にはなるが、文字列として指定できるので、取得/設定する属性名をスクリプトから動的に変更できるメリットもある。

jQuery

CSSの操作

classListプロパティを利用して、class属性の値を操作できる。

スタイルクラスの追加/削除/オンオフ切り替え(toggle)

HTML

JavaScript

jQuery

指定したクラスが含まれているか

HTML

JavaScript

jQuery

イベント

イベントとイベントリスナー/イベントハンドラ

HTML

①JavaScript(addEventListenerメソッドを使って宣言)

できるだけ標準化されている上記のaddEventListenerメソッドを使うのが良い。 function(){}の部分は②と区別してイベントリスナーと呼ぶ。

②JavaScript(要素オブジェクトのプロパティとして宣言)

addEventListenerメソッドを使う方が良いが、これも良く使われているので覚えておくと良いかも。ちなみにこちらはfunction(){}の部分は①と区別してイベントハンドラと呼ぶ。

jQuery

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする