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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

Q&A

解決済

1回答

2059閲覧

querySelectorAllを指定する際の親要素?について

toll_tree

総合スコア199

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

0グッド

0クリップ

投稿2019/06/01 05:26

編集2019/06/01 05:54

document.querySelectorについて、お聞きしたいことがございます。

js

1'use strict'; 2{ 3 4 console.log(document.querySelectorAll('input[type="checkbox"]')[0].checked); 5 console.log(document.querySelectorAll('input[type="checkbox"]')[1].checked); 6 7 8 9 10} 11

html

1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>Javascript Basics</title> 6 <style> 7 8 9 </style> 10 </head> 11 <body> 12 <input type="checkbox" name="os" value="mac">macOS 13 <input type="checkbox" name="os" value="win" checked>Windows 14 <hr> 15 <input type="radio" name="color" value="red" checked>Red 16 <input type="radio" name="color" value="blue" >blue 17 <hr> 18 <select> 19 20 <option>item 0</option> 21 <option selected>item 1</option> 22 <option>item 2</option> 23 </select> 24 <script src="js/main.js"></script> 25 </body> 26</html>

上記コードを実行しますと、「false」「true」とconsole.logに表示されます。
公式リファレンスの構文の項目には「lementList = parentNode.querySelectorAll(selectors);」このように「parentNode」との記載があります。しかし、上記コードでは親要素の「body」ではなく、「document」となっております。何故、bodyではなく、documentが指定されているのでしょうか?

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

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

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

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

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

guest

回答1

0

ベストアンサー

documentが最上位の親要素だからじゃないでしょうか。

投稿2019/06/01 05:57

gentaro

総合スコア8949

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

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

toll_tree

2019/06/01 05:58

ご回答ありがとうございます。 確かに、そうなのですが、親要素だとするならば、bodyもそうですし、何故bodyではエラーとなってしまうのかと疑問に思ったんですよね...
gentaro

2019/06/01 06:01

質問内容にはエラーになると書かれていませんが、エラーについての質問であればどんなエラーが出るのか追記されては?
toll_tree

2019/06/01 06:06

いえ、エラーについてといいますか、何故、documentでなければならないのか、といった部分が疑問に思った点ですね
gentaro

2019/06/01 06:07

「documentでも良い」と「decumentでなくてはならない」は別です。
toll_tree

2019/06/01 06:18 編集

では、「documentでなければならない」、「documentで良い」どちらなのでしょうか?
gentaro

2019/06/01 06:18

この場合は「documentでも良い」でしょうね。 リファレンスに書かれているparentNodeは「親ノード」ですので、「特定のノード以下」のものだけを対象に条件に一致する子要素を取得したいなら、まずその親となる要素(親ノード)を取得する必要がありますが。
toll_tree

2019/06/01 06:50 編集

そういうことでしたか。 となるとdocumentは、深く考えず最上位だから取得しなくても良いと覚えておくのが、懸命かもしれませんね
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問