おしえて

【JavaScript】エレメントって何ですか？

解決済

質問者：ZZ-TOP
質問日時：2018/12/28 22:52
回答数：2件

JavaScriptの勉強をしています。

コードの説明の時に、JavaScript特有のいろんな言葉が出てきます。
オブジェクト、メソッド、プロパティの3つは自分なりに理解出来ているつもりです。

ですが関連のWebサイトやガイド本の中で時々、
エレメント(Element)という言葉が出てきます。

場合によっては変数の名前に使ったりされますし、
getElementById( );などのようにJavaScriptで使われる
単語の中にも登場します。

「たった1日で基本が身につく JavaScript超入門」
https://gihyo.jp/book/2017/978-4-7741-8995-6

というガイドブックを使っており、この本の中に以下のサンプルコードがあります。
こちらのコードでも変数の名前に「elem」(=Elementを意味していると思います)を
使っていますし、getElementByIdという「Element」
という言葉の入ったプロパティを使っています。

このコードは「Element」を取得してダイアログボックスに表示する
という意味だと思いますが、表示されたダイアログボックスのコメントが
何を意味するのか全く理解できません。

※ダイアログボックスのコメントは画像のとおりです。

すいませんがJavaScriptに詳しい方、説明の上手な方、

「エレメント(Element)」という言葉の意味と
このコードで取得して、ダイアログボックスに表示されているものが
何なのか教えて下さい。

お手数ですが、よろしくお願いします。

<script>
window.onload = function(){
// 要素を取得
var elem = document.getElementById("sample");
// 取得した要素オブジェクトの確認
window.alert(elem);
}
</script>

HTML側
<body>
<p id="sample">要素を取得<p>
</body>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： Tacosan
回答日時：2018/12/29 23:53

「HTMLParagraphElement というクラスのオブジェクト」の「クラス」は JavaScript のお話で HTML の class 属性とは無関係. HTML を JavaScript の内部で操作するときにいろんなオブジェクトを使っていて, ここでは HTML の p 要素に対応して HTMLParagraphElement というのがある, んだと思う. で, このオブジェクトの中に「id 属性があってその値が "sample" だ」とか「その内容は『要素を取得』という文字列だ」とかの情報が入っている. この辺の情報もしかるべきアクセサを使えば取得できる, はず.

ダイアログボックスでの表示は「そのオブジェクトを文字列化したらそうなった」くらいだと思うよ. どうしてそうなっているのかは知らん. そのオブジェクトに聞いてくれ.

- 1
- 件

通報する

この回答へのお礼

ありがとう

ご解答ありがとうございます

>「HTMLParagraphElement というクラスのオブジェクト」の「クラス」は JavaScript のお話で HTML の class 属性とは無関係.
↓
そうなんですか、納得です。

ダイアログボックスでの表示は「そのオブジェクトを文字列化したらそうなった」
↓
納得です。わかりました。

詳細まではわからならいのですが、だいたいの雰囲気は理解できました。

なので今後、テキストを読んだり関連のWebページを読む時に
戸惑いが減ると思います。
今回のお話を元にして、ちょっとづつ理解していけると思います。

年末なのに何度も解答して頂きありがとうございます。
機会がありましたら、またお願いします。
良いお年を。

追記
以下のタグをhtmlページ上に作成し、
.getElementById("");
のidにそれぞれ入れてダイアログボックスの表示を確認しました。

以下のようになり、説明して下さったことの意味がわかりました。

> p 要素に対応して HTMLParagraphElement というのがある
↓
htmlタグにいろんなエレメントがあり、idで特定していろんな情報を表示できる
というのはわかりました。

<div id="AAA">div</div>
<h1 id="BBB">h1</h1>
<h2 id="CCC">h2</h2>
<section id="section">section</section>
<ul id="EEE">ul</ul>
<table id="FFF">table</table>

ダイアログボックスの表示～上から
object HTMLDivElement
object HTMLHeadingElement
object HTMLHeadingElement
object HTMLElement
object HTMLUListElement
object HTMLTableElement

通報する

お礼日時：2018/12/30 01:58

No.1

回答者： Tacosan
回答日時：2018/12/29 00:10

getElementById の element は HTML の意味での element (要素) のこと. で, このダイアログボックスでは

HTMLParagraphElement というクラスのオブジェクト
だといっている.

- 0
- 件

通報する

この回答へのお礼

解答して頂きありがとうございます。

せっかく解答して頂いたのですが、
こちらの知識不足で、ご解答の意味がわかりません。

順番にいきますね。

HTMLParagraphElement というクラスのオブジェクト
↓
HTML側は<p id="sample">要素を取得<p>

です。なのでクラスはどこにもないように思います。

「クラスのオブジェクト」って、このコードの中のどれに相当するのですか？

もしかしたらクラスとidを勘違いされているのかも、、、考えたのですが
その場合、idの名前は"sample"です。

ダイアログボックスへの出力にid名の「sample」は表示されてませんよね？

>getElementById の element は HTML の意味での element (要素) のこと
↓
ということなら、HTML の意味での要素(element)は、
開始タグから終了タグまで(コンテンツを含む) ですよね？

参照元↓
http://www.tohoho-web.com/html/memo/elem.htm

なので、おっしゃるとおりの意味でしたら、ダイアログボックスへの出力は
以下のようになるか、何らかのかたちでidの名前「sample」や
コンテンツ「要素を取得」も表示されると思うのですが、、、。

<p id="sample">要素を取得<p>

せっかく、解答して頂いたのですが、
こちらの知識不足でご解答の意味が理解できずに、すいません。

クラスの件で何か、お気付きのことがありましたら、
教えて頂ければうれしいです。

※ご面倒でしたらスルーでOKです。

今回は解答して頂きありがとうございます。