おしえて

【JavaScript】querySelectorの使い方を教えて下さい

解決済

質問者：ZZ-TOP
質問日時：2019/03/07 23:03
回答数：3件

お世話になります。
「querySelector」の使い方について教えて下さい。

ガイドブックのサンプルコードで気が付いたのですが
以下のコードでは1番と2番では出力結果が違います。

1番はわかります。
「querySelector」はCSSのタイプセレクタの値を取得するメソッドなので、
1番の出力結果は理解できます。

ですが、2番の方は意味がわかりません。

「console.log(lang3.textContent);」にしたときの結果が、
「ja」になるのならまだ理解できます。

ですが「.textContent」を追加したわけでもないのに
どうして右側に「.lang」を追加しただけで
2番の出力結果は「ja」になるのでしょうか？

そう思うので3番で試してみたところ
コンソールへの出力は無茶苦茶なものになり
余計にわからなくなりました。

1番は問題ありません。

ですが、なぜ2番と3番はこんな出力結果になってしまうのでしょうか？

お手数ですが、JavaScriptに詳しい方、説明の上手な方、
「querySelector」メソッドの使い方、考え方、プロパティ等の扱い方のコツ、etc.を教えて下さい。

追記
※込み入った説明でなく、ちょっとしたコツのような感じでOKです。
※可能でしたらサンプルのコードと一緒に説明して頂ければありがたいです。
※コンソールへの出力結果は画像の通りです。

↓サンプルのコードはこちらです。

<!doctype html>
<html lang="ja">

</html>

<script>
//1
var lang=document.querySelector('html');
console.log(lang);

//2
var lang2=document.querySelector('html').lang;
console.log(lang2);

//3
var lang3=document.querySelector('html');
console.log(lang3.textContent);
</script>

通報する

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

質問の本文を隠す

回答 (3件)

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

No.1ベストアンサー

回答者： naktak
回答日時：2019/03/08 09:25

langは属性であってタグ内のテキストではありませんので正しいです。

2は、html要素内のlang属性を得ようとした結果なので何も不思議ではありません。

3は、html要素内の文字列と認識される内容を全て得ます。1のコンソール結果のhtml要素内を展開してみてください。それと同じ結果が3として出力されているはずです。
展開してみてdom構造を見ると分かると思いますが、script要素がhtml要素の外側で記述されていること自体が誤りです。
ただしこの場合、JavaScriptが読み込まれて即実行されるようになっているため、script要素をhead要素内などに設置した時、body要素に含まれるテキストは出力されません。

- 1
- 件

通報する

この回答へのお礼

ありがとう

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

>2は、html要素内のlang属性を得ようとした結果なので何も不思議ではありません。
↓
なるほどです。わかりました。今回はlang属性ですが、
html要素内にある要素がほかの属性である場合もあるし、
その時は属性を指定することができるわけですね。

>3は、html要素内の文字列と認識される内容を全て得ます。
↓
わかりました。今回はhtml要素なのでページ内全てが対象になってしまうので、
全部テキストで出力されてしまうわけですね。

今までずっと getElementById() しか使ってませんでした。

ガイドブックで勉強しており、今回初めてquerySelector()を使うようになったので、
まだ感覚に慣れておらず(打ち込みで目いっぱいなので)気が付きませんでした。

言われてみれば全部、ご指摘の通りです。

>1のコンソール結果のhtml要素内を展開してみてください。それと同じ結果が3として出力されているはずです。
↓
展開すると1の結果がものすごく多いため、よくわかりません。
ですが、よく見ると似た記述がところどころにあります。

なので、こちらの件も何となくですが教えて頂いたことが実感できました。

今回は丁寧に解答して頂き、ありがとうございます。
機会があれば、またお願いします。

※質問はしばらく開けておきます。

通報する

お礼日時：2019/03/08 11:39

No.3

回答者： yambejp
回答日時：2019/03/08 13:20

補足

> 今回は属性しかないのでプロパティは関係ありませんが、

属性を参照するならこう
var lang2=document.querySelector('html').getAttribute("lang";

> 今回はイベントではないので
> あまり関係ないような気がします。

いえ間違います。
「スクリプトをHTMLの後ろの方に書く」という認識がよくないです
headタグに書いたり、外部ファイルに書いたりするとき
どこからでも参照できるようにwindowが呼ばれたあとの
ページがレンダリングされる前に要素を参照するのが
window.addEventListener('DOMContentLoaded', function(e){・・・});
という処理です。
つねにこの処理は意識して使ってください

- 1
- 件

通報する

この回答へのお礼

ありがとう

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

属性を参照するならこう
var lang2=document.querySelector('html').getAttribute("lang");
↓
教えて頂きありがとうございます。

No.2の返答の通りガイドブックを2冊使っているのですが、
2のガイドブックはこの記述が多いです。

>ページがレンダリングされる前に要素を参照するのが
window.addEventListener('DOMContentLoaded', function(e){・・・});
という処理です。
↓
アドバイスありがとうございます。

今使っている1のガイドブックはスクリプトの
読み込みのタイミングについて詳しい記述がありません。

2の方のガイドブックは、ところどころ指定があるので、
2の本を使うようになったら、ちょっとづつ教えて頂いたことを
実感する機会があると思います。

捕捉にて、教えて頂きありがとうございます。
機会がありましたら、またお願いします。

通報する

お礼日時：2019/03/08 23:51

No.2

回答者： yambejp
回答日時：2019/03/08 11:40

２については、html要素には属性とプロパティがあり、

プロパティが設定されていない状態でそれを参照すると
属性が参照されるという特徴があります
なおhtmlタグで囲ってもdocument.querySelectorは
DOMとして拡大解釈してくれるので全体のソースが表示されます
（やる意味はあまりないですが）

querySelectorは参照するタイミングが重要なので
以下のように書くのが肝要です

<!doctype html>
<html lang="ja">
<head>
<script>
window.addEventListener('DOMContentLoaded', function(e){
var lang=document.querySelector('html');
console.log(lang);
var lang2=document.querySelector('html').lang;
console.log(lang2);
var lang3=document.querySelector('html');
console.log(lang3.textContent);
});
</script>
</head>
<body>
hoge
</body>
</html>

- 1
- 件

通報する

この回答へのお礼

ありがとう

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

>２については、html要素には属性とプロパティがあり、
プロパティが設定されていない状態でそれを参照すると
属性が参照されるという特徴があります
↓
なるほどです。
今回は属性しかないのでプロパティは関係ありませんが、
気をつけます。

>querySelectorは参照するタイミングが重要なので
以下のように書くのが肝要です
↓
アドバイスありがとうございます。
今回はイベントではないので
あまり関係ないような気がします。

ですが「読み込んでからでないと動作しない」
というようなこともあるようなので、
気をつけます。

追記
ガイドブックを２冊使っています。
１には「DOMContentLoaded」の記述が全くありませんが、
２にはあります。

この件も、質問する機会があると思うので、
機会がありましたらまたお願いします。

今回は教えて頂きありがとうございます。
※質問はしばらく開けておきます。

１
確かな力が身につくJavaScript「超」入門
http://urx3.nu/TjOg

２
たった1日で基本が身に付く！
JavaScript超入門
http://urx3.nu/VBKp