Publicité
Check these out next
Dom
29 Mar 2010•0 j'aime•11,016 vues
2 j'aime
Soyez le premier à aimer ceci
afficher plus
vues
Nombre de vues
0
Sur Slideshare
0
À partir des intégrations
0
Nombre d'intégrations
0
Signaler
Technologie
Développement personnel
Kazunori TokudaSuivre
フロントエンドエンジニア à 株式会社ピクセルグリッドPublicité
Dom
- DOMを知って コーディングをもっと楽しむ 德田 和規(nori) / 5509
- DOMを知って コーディングをもっと楽しむ 德田 和規(nori) / 5509
- DOMってなんだろ
- DOMってなんだろ
- DOMってなんだろ • ドキュメントオブジェクトモデル
- DOMってなんだろ • ドキュメントオブジェクトモデル • HTMLをひとつのツリー構造として見る
- DOMってなんだろ • ドキュメントオブジェクトモデル • HTMLをひとつのツリー構造として見る • ツリー構造 ＝ 家系図
- ドキュメントオブジェクトモデル
- ドキュメントオブジェクトモデル • ドキュメント ＝ HTML
- ドキュメントオブジェクトモデル • ドキュメント ＝ HTML • オブジェクト ＝ HTML要素
- ドキュメントオブジェクトモデル • ドキュメント ＝ HTML • オブジェクト ＝ HTML要素 • モデル ＝ 捉え方
- ドキュメントオブジェクトモデル • ドキュメント ＝ HTML • オブジェクト ＝ HTML要素 • モデル ＝ 捉え方
- ドキュメントオブジェクトモデル • ドキュメント ＝ HTML • オブジェクト ＝ HTML要素 • モデル ＝ 捉え方
- HTMLをひとつのツリー構造として見る たとえば以下のようなHTML <html> <head> <title>title</title> </head> <body> <h1>heading1</h1> <div> <h2>heading2</h2> <p>hogehoge</p> </div> </body> </html>
- HTMLをひとつのツリー構造として見る たとえば以下のようなHTML <html> <head> <title>title</title> </head> <body> <h1>heading1</h1> <div> <h2>heading2</h2> <p>hogehoge</p> </div> </body> </html>
- HTMLをひとつのツリー構造として見る たとえば以下のようなHTML <html> <head> <title>title</title> </head> <body> <h1>heading1</h1> <div> <h2>heading2</h2> <p>hogehoge</p> </div> </body> </html>
- HTMLをひとつのツリー構造として見る たとえば以下のようなHTML <html> <head> <title>title</title> </head> <body> <h1>heading1</h1> <div> <h2>heading2</h2> <p>hogehoge</p> </div> </body> </html>
- HTMLをひとつのツリー構造として見る たとえば以下のようなHTML <html> <head> <title>title</title> </head> <body> <h1>heading1</h1> <div> <h2>heading2</h2> <p>hogehoge</p> </div> </body> </html>
- HTMLをひとつのツリー構造として見る たとえば以下のようなHTML <html> <head> <title>title</title> </head> <body> <h1>heading1</h1> <div> <h2>heading2</h2> <p>hogehoge</p> </div> </body> </html>
- HTMLをひとつのツリー構造として見る DOMツリーにするとこんな感じ
- HTMLをひとつのツリー構造として見る DOMツリーにするとこんな感じ
- HTMLをひとつのツリー構造として見る DOMツリーにするとこんな感じ
- ツリー ＝ 家系図 ちょっと見方を変えてみましょう
- ツリー ＝ 家系図 ちょっと見方を変えてみましょう
- セレクタとの関係 オレンジの丸で囲んだ人（要素）を中心とすると 他の人（要素）との関係はこんな感じ
- セレクタとの関係 オレンジの丸で囲んだ人（要素）を中心とすると 他の人（要素）との関係はこんな感じ
- セレクタとの関係 オレンジの丸で囲んだ人（要素）を中心とすると 他の人（要素）との関係はこんな感じ
- 起点からのアクセス jQueryを使えば起点から簡単にアクセスできる
- 起点からのアクセス jQueryを使えば起点から簡単にアクセスできる $(‘h1’)
- 起点からのアクセス jQueryを使えば起点から簡単にアクセスできる $(‘h1’).parent() $(‘h1’)
- 起点からのアクセス jQueryを使えば起点から簡単にアクセスできる $(‘h1’).parent() $(‘h1’).next() $(‘h1’)
- 起点からのアクセス jQueryを使えば起点から簡単にアクセスできる $(‘h1’).parent() $(‘h1’).next() $(‘h1’) $(‘h1’).next().children(‘p’)
- 起点からのアクセス jQueryを使えば起点から簡単にアクセスできる $(‘h1’).parent() $(‘h1’).next() $(‘h1’) $(‘h1’).next().children(‘h2’) $(‘h1’).next().children(‘p’)
- 起点からのアクセス jQueryを使えば起点から簡単にアクセスできる $(‘h1’).parent().parent() $(‘h1’).parent() $(‘h1’).next() $(‘h1’) $(‘h1’).next().children(‘h2’) $(‘h1’).next().children(‘p’)
- 起点からのアクセス jQueryを使えば起点から簡単にアクセスできる $(‘h1’).parent().parent() $(‘h1’) .parent() .parent() $(‘h1’).parent() .children(‘head’) $(‘h1’).next() $(‘h1’) $(‘h1’).next().children(‘h2’) $(‘h1’).next().children(‘p’)
- 起点からのアクセス jQueryを使えば起点から簡単にアクセスできる $(‘h1’).parent().parent() $(‘h1’) .parent() .parent() $(‘h1’).parent() .children(‘head’) $(‘h1’).next() $(‘h1’) .parent() .parent() $(‘h1’) .children(‘head’) .children(‘title’) $(‘h1’).next().children(‘h2’) $(‘h1’).next().children(‘p’)
Notes de l'éditeur
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
Publicité