質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

1320閲覧

Document Object Modelについて。

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

2クリップ

投稿2016/12/25 06:26

Document Object Model の略で
Webページの要素にアクセスする仕組み(構造)のことです。

・HTML要素(P,ULなど)にJS(他の言語の場合も有る)からアクセスする為の仕組みの事。

・JSとHTMLの架け橋、インターフェースの役割をはたす、仕組み。HTMLのAPI

と調べてわかったのですが、どうもいまいちピント来ません。
初心者にもわかるように、具体的に教えていただければ幸いです。

また仕組みという単語はITでは非常によく出てきますが、ITで言う仕組みはわかりやすく言うとどういうことなのでしょうか?

辞書
物事の組み立て。構造。機構。「複雑な仕組の機械」「政治の仕組」2 事をうまく運ぶために工夫された計画。くわだて。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

自分が理解している感覚で言うと、ページ全体からHTMLの要素1つ1つに至るまで、あらゆる要素をJSでいうオブジェクト(連想配列)として扱う仕組みです。
要素(pタグなど)の1つ1つが様々な情報を含む情報の塊であり、それがJavaScript上でオブジェクトとして扱われています。

HTMLドキュメントはdocumentというオブジェクトに格納されており、そこから必要な要素を取り出して使うことが出来ます。
documentオブジェクトにはメソッドがあり、要素の取得や設定等に使用することが出来ます。

そういった構造・仕組みを指してDOMと呼んでいる、と理解しています。

javascript

1console.log([document]) // documentオブジェクトの参照 2 3document.getElementsByTagName('p'); // documentのメソッドを利用して、p要素を取得する。

投稿2016/12/26 10:06

yamato_hikawa

総合スコア2092

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/12/26 12:24

>>> HTMLドキュメントはdocumentというオブジェクトに格納されており、そこから必要な要素を取り出して使うことが出来ます。 documentというオブジェクトにp,spanなどの要素がほぼすべて入っているのですかね。 このように予約されたオブジェクトや変数には初めからたくさんの物が格納されていて、それを指定すれば実行できるのですね。 DOMはdocumentというオブジェクトにp,spanなどの要素が入っているので、これにアクセスする仕組みに名前を付けたのですかね? 下記のようにたくさん入っているようですね。 Regex Hide network messages All Errors Warnings Info Logs Debug Handled  file:///C:/Users/hoto/Desktop/images/gulp-folder/website/test/dest-after/img/common-img/back-img.png Failed to load resource: net::ERR_FILE_NOT_FOUND console.log([document]) VM515:1 Array[1] 0 : document length : 1 __proto__ : Array[0] concat : concat() constructor : Array() copyWithin : copyWithin() entries : entries() every : every() fill : fill() filter : filter() find : find() findIndex : findIndex() forEach : forEach() includes : includes() indexOf : indexOf() join : join() keys : keys() lastIndexOf : lastIndexOf() length : 0 map : map() pop : pop() push : push() reduce : reduce() reduceRight : reduceRight() reverse : reverse() shift : shift() slice : slice() some : some() sort : sort() splice : splice() toLocaleString : toLocaleString() toString : toString() unshift : unshift() Symbol(Symbol.iterator) : values() Symbol(Symbol.unscopables) : Object __proto__ : Object
yamato_hikawa

2016/12/26 12:42

そのページに使われている要素は全て入っています。自分が書いたHTMLコードがオブジェクトとして生成されたものなので。 ただ、連想配列のアクセスだけで取得操作するには手間なので、専用のメソッドがあります。
退会済みユーザー

退会済みユーザー

2016/12/26 13:21

documentというオブジェクトに自分が書いたHTMLコードが入っているのですね。 >> DOMはdocumentというオブジェクトにp,spanなどの要素が入っているので、これにアクセスする仕組みに名前を付けたのですかね? こちらの認識で正しかったのですね。
guest

0

ベストアンサー

DOMについて

ざっくり言うとこういうことです。

DOM API 登場以前

IE ─ JScript ─ DOM ─ HTML操作
NN ─ Javascript ─ layers ─ HTML操作

HTML操作の統一的な取り扱いがなく、DHTMLなどを書く時にはブラウザの種類とバージョンにより書き分ける必要がありました。

DOM API 登場以前

IE ─ JScript ──┐
Ch ─ Javascript ┼ DOM API ─ HTML操作
FF ─ Javascript ┤
PHPなどの他言語 ┘

HTML操作を DOM API を介して行うことによって、統一的な取り扱いができ、またブラウザ言語以外でのDOM操作モジュールも登場するようになりました。

たとえば、Docomoやauなどのキャリアごとに仕様が違う携帯電話を想像してみてください。
DocomoからDocomoにかける時と、auからDocomoにかける時で、電話番号が違ったら、とても使いにくいですよね? 1234567890とかけたらDocomoだろうとauだろうと、同じ相手に電話がかかってほしいですよね?

同じように、Documentと書いたら、IEだろうとChromeだろうと同じものを操作できるようにしたいですよね?
それがDOMです。

そういう意味では、プロトコルみたいなものと言ってもいいのかもしれませんね。

投稿2016/12/26 05:14

編集2016/12/26 05:15
Lhankor_Mhy

総合スコア35865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/12/26 05:43

OSやプロトコルのように、ブラウザとHTML要素の間を仲介しているインターフェースのやくわりを果たす仕組み?のことなんですね。 昔はDOMがなくてそれぞれ違うルールで要素にアクセスしていたのを、 統一したルールにしたということでしょうか? プロトコルで言えば、例えばですが、windowsは、httpでアクセスして、macはhttpsでアクセスしていたが、もうhttpsに統一しましょうとなり、この統一されたhttpsがDOMと同じ役割になるということですかね?
guest

0

仕組み

仕組みとは「構造」で合っています。
IT特有の特別な意味は全くありませんので日本語として理解すればOKです。

API (Application Programming Interface)

API とは「あるプログラムから別のプログラムにアクセスする時に決められた手順で処理をすれば望む結果が返ってくるように設計されたもの」です。
https://www.google.co.jp/search?q=test でHTTPリクエストを投げると "test" でGoogle検索されたHTML文書が返ってくるのも API の一種です。
q= の後に続く文字列を変更すれば、検索語を変化させることが出来ます。
このように決められた手順で処理を実行すれば、決められた結果が返ってきます。
その決められた手順を「API」と呼び、文書化されたものを「仕様書」と呼びます。

DOM (Document Object Model)

DOM とは JavaScript, PHP, Java 等の様々な言語で扱えるように設計されたAPIの仕様です。
例えば、getElementById, getElementsByTagName, querySelectorAll 等があります。

Re: webpage さん

投稿2016/12/25 14:57

編集2016/12/25 15:00
think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/12/26 01:05

ありがとうございます。 ちょっと難しいですが、 API とは手順に名前を付けたということなのですね。
退会済みユーザー

退会済みユーザー

2016/12/26 01:05

仕様はその手順を文章化したもののことなのですね。
退会済みユーザー

退会済みユーザー

2016/12/26 01:19

getElementByIdはHTMLのIDにアクセスするための手順(API)の一種ということですかね。 IPは通信プロトコルの一種と一緒ですね。 そのAPIを文章化したのがDOMなのですか?
think49

2016/12/26 01:45

おおざっぱには「API===手順」「仕様===設計図」でしょうかね(あくまでイメージです)。 DOMは「IE12 を起動→[F12] キーを押下→[DOM Explorer] で表示されるDOMツリーにアクセスする為の手順」と思っておけば概ね間違ってないかと。 あくまでおおざっぱな説明なので実際の定義は DOM の仕様書を読んで掴んでください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問