Q&A
DOMを使用して何をするか（何を作るのか）によっても変わってくると思います。差し支えなければ、その辺の情報を追加してみてはいかがでしょうか。
DOMに非常に興味をもち、深堀して勉強してみたいと思いました。そこで、DOMを勉強するのに有用な「方法」「本」「サイト」があれば教えていただきたいです。
また、合わせてDOMをやるには「javascript」「jQuery」どちらで書く方がいいのでしょうか。
回答8件
0
このサイトがわかりやすいかも、
http://piyo-js.com/05/dom.html
javascriptからやったほうが根幹が理解できるとは思いますが、基本的な動作を理解したらjqueryにした方が制作効率は格段に上がります。
投稿2015/04/28 05:31
総合スコア213
0
DOMに特化しているわけではないですが、自分は以下の本がいいなと思いました！
自分は非常にお世話になった本です！
投稿2015/04/28 12:12
総合スコア34
0
DOMのなにを勉強したいのかが個人的にはいまひとつピンとこないんですが…。あんまり肩肘張らずに使えばいい程度の概念な気がします。
HTML中のDOMをJavaScriptから操作する方法について習熟したい ということであれば、
jQueryのDOM操作関連メソッド互換関数を自分でつくる
※クロスブラウザで、Internet Explorer 8にもちゃんと対応していること！
と最終的には無敵になれます。とりあえず getElementsByClass の実装からはじめるといいです。というか、ブラウザ実装ごとにパフォーマンスを追求すると XPath も使うことになるので、これで DOM は完璧じゃないかなあ。
あとは気晴らしにこっちの DOM もやっておくと勉強会の LT のネタになりますね。
![どむ]WIDTH:600
投稿2015/06/10 04:22
総合スコア20
画像のはSVGかな??
もしこれがsvgなら超凄いですね〜w
0
JavaScriptのほうがよいかと
ドットインストールというサイトがなかなか良いかも
書籍ならポケットリファレンスがいいですね
投稿2015/06/07 01:49
総合スコア35
0
投稿2015/05/05 12:39
退会済みユーザー
総合スコア0
0
こんにちは。
いくつかのご質問の中で、DOMを勉強するのに有用な**「方法」**について、
「これをやってみてはいかがでしょうか？」というお題を一つ、お伝えしたい
と思います。
ちなみに、javascriptやJQueryもおやりになるということなので、プログラムを
書ける方とお見受けしての回答となります。
何かというと、「本」や「サイト」などを読んでインプットしたことの
アウトプットとして、
HTMLパーサーもしくはXMLパーサーを自作してみること
です。
例を挙げてみます。以下のような、お店リストのHTML、restaurants.html
があるとします。
lang
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>散財日記</title> 6</head> 7<body> 8<h1>東京いい店やれる店（1994）で行ったことある店</h1> 9<ul> 10<li><span class=“shop”/>ラブレー</span> 11 (<span class=“location”>代官山</span>)</li> 12<li><span class=“shop”/>ソリッソ</span> 13 (<span class=“location”>飯田橋</span>)</li> 14<li><span class=“shop”/>ラ・ビスボッチャ</span> 15 (<span class=“location”>広尾</span>)</li> 16<li><span class=“shop”/>セラン</span> 17 (<span class=“location”>表参道</span>)</li> 18</ul> 19</body> 20</html>
上記のHTMLから、所在地名だけを取り出すプログラムを書く必要があり、
かつ、今後、ページ構成が変わる可能性があって、HTMLの中で地名が
現れる位置が変わるかもしれませんが、locationというクラスの何らかの
要素（<span>だけとは限りません。）のテキストとして記載されることは
変わらないとします。
上記の要件を満たすプログラムを、ここでは仮にjavaのコンソールアプリケーション
として書くとして、mainメソッドを持つクラスを、jp.hoichoi.ListShops とします。
（実装するときの言語はJAVAでなくても、phpでもrubyでも、または他の何か、
お得意な言語でかまいません。）
このListShopsは、シェル（WindowsではDOSプロンプト）から、以下のように
入力するHTMLのファイル名を引数として与えて
lang
1java jp.hoichoi.ListShops restaurants.html
として起動すると、標準出力に
lang
1代官山 2飯田橋 3広尾 4表参道
と出力してくれるものを想定しています。
上記の例で挙げたHTMLですと、<ul>の<li>の中に地名がありますが、
これが、たとえば入れ子になった<div>の中にあったとしても、
lang
1class=“location”
であるような要素だけをくまなく拾い出して、その中のテキストを抽出して
リストするプログラムを自力で書いてみるとなるとけっこう大変ですが、
そのときに作っているのは、おそらく
自分独自のDOMモドキ
になっていると思います。（以下これを便宜上、「俺様DOM」と称します。）
俺様DOMを実装したプログラム、たとえば上記のListShopsでは、HTMLを
解析して得られたオブジェクト群の中で、「隣のノードに移動する」という
関数なりメソッドなりが必要になってきますが、「隣のノードに移動する」
のは、本家のDOMですと
というAPIにするのがお約束ですが、俺様DOMでは別のメソッド名にしても
よいのです。
このようにして、本家DOMとは違う、HTMLのパースツリーのクラスを
設計、実装して、最初は簡単なことしかできないものから徐々に複雑な
こともできるように実際にパーサーから動かしていくと、W3Cのような
機関で標準的なDOMの仕様を決める意義というのが分かってくる（＝知ったかではなく
自分の言葉で説明できるような、ハラオチした何かが得られる）と思いますし、
今後、何らかの言語でHTMLやXMLをパースする必要が出てきたときに、単に
ライブラリを使うだけではなく、そのライブラリのソースを覗いて、深堀り
してみようという動機にもなってくると思います。
以上、何かの参考になれば幸いです。
投稿2015/05/02 18:18
編集2015/05/02 23:05
総合スコア9058
補足です。
もし、上記のサンプルのListShopsに相当するプログラムを自作で書いてみたときに、
作り方によっては、「はて？全然、俺様DOMになっている気がしないのだが？」
というものになっているかもしれません。そのときは、ご自身が作成されたパーサーが
SAXタイプのものなっているから、かもしれません。詳しくは以下をご参照ください。
DOM Vs SAX Parser in Java
http://howtodoinjava.com/2014/07/30/dom-vs-sax-parser-in-java/
DOMパーサーやhtmlパーサーを作るには正規表現が必要だしな難しいのでは？
0
深く勉強しようと思ったら、結局は全ての機能を知ることになります。
ブラウザのコンソールに、windowやdocumentと入力して、
そこに生えているプロパティを確認して下さい。
そしてそこから自分がまだ知らないものを片っ端から検索していくと網羅できます。
投稿2015/06/11 21:59
総合スコア100
0
深堀して勉強であれば、JQueryのソースを追ってみたらどうでしょうか？
JQueryはDOM操作だけではありませんが、プラグインの作成方法から、Javascriptのテクニックまで学べると思います。
投稿2015/06/10 03:06
総合スコア1464
あなたの回答
tips
プレビュー
