メシのタネ

メシのタネになる、Laravelや設計思想の技術配信サイト


OREILLY Javascript 15章-2-4 CSSクラスによる要素選択

,

  1. Webプログラム
  2. javascript
  3. OREILLY Javascript 15章-2-4 CSSクラスによる要素選択

昨日に引き続き、オライリーから取ったノートを載せます。

ライブラリ使いましょう

querySelectorAllのような強力なメソッドがJavascriptには用意されていますが、
どうやら、これらは、IE8以下で未対応なようです。でも、そういったことに互換性を
持たしてくれるのが、jQueryといったようなライブラリですねーみたいな感じで締めくくられてました。
素直にライブラリつかいます。僕は。

CSSクラスによる要素の選択

classはJsでは予約語として扱われる

同じクラスはセットで扱われる

classを扱う場合はHTMLタグと同じように戻り値がNodeListになる

呼び出し方

var hoge = getElementByClassName(“huga”);
でもこのメソッドはHTML5から利用可能

CSSセレクタによる要素の選択

セレクタAPIがW3Cで標準化されている為
セレクタでの要素の選択が大体可能




メソッド名はquerySelectorAll();
IE8以下で未サポート。

jQueryを入れることで$()と同じになる。

ノードのツリー構造としてのドキュメント

Document,Element,

HTMLのすべてのテキストを表すTextそれぞれのオブジェクトは
NodeオブジェクトNodeには以下のプロパティがある

parentNode

親Nodeにアクセス

childrenNodes

子ノードを読み出し専用でアクセスする

firstChild,lastChild

子ノードの最初と最後以下childrenNodesと同じ


nextSlibling,previousSibling

ノードの兄弟ノード。親が同じノードの先か後

nodeType

documentなら9、Elementなら1、Textなら3
それぞれのノードで番号が違う。

nodeValue

そのノードのテキストコンテンツにアクセス

nodeName

Elementのタグ名。大文字に変換されます。


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

This site uses Akismet to reduce spam. Learn how your comment data is processed.