querySelectorについて
JavaScriptで「document.querySelector('h1')」のように書くと、HTML文書から最初に見つかる
h1タグの要素を取得します。
h1タグが存在しない場合はnullを返します。
これに.innerHTMLを追加するとh1タグの要素のHTMLを取得できます。
iwb.jpの見出しはh1タグなのでConsoleで試して見てください。
document.querySelector('h1').innerHTML
nullだとinnerHTMLでエラーになる問題
要素が存在しない場合はnullを返すので、例えば document.querySelector('h7').innerHTML だとエラーになってしまいます。
document.querySelector('h7').innerHTML
Uncaught TypeError: Cannot read properties of null (reading 'innerHTML')
これを防ぐにはオプショナルチェーン演算子 (?.)を使用して、要素が存在しない場合はundefinedを返します。
document.querySelector('h7')?.innerHTML
※ 例としてinnerHTMLと書いていますが、textContentなどでも同様です。
※ HTMLにh7タグはないです。
代入だと (?.) があってもエラーになる
前述のように document.querySelector('h7')?.innerHTML に書けばエラーになりませんが、これに文字列などを代入しようとするとエラーになります。
document.querySelector('h7')?.innerHTML = 'foo'
Uncaught SyntaxError: Invalid left-hand side in assignment
これはオプショナルチェーン演算子 (?.)でundefinedになったものに代入するためです。
この場合は以下のようにNull合体演算子 (??)を使用して、undefinedのときは{}を返すようにすればエラーになりません。
// エラーにならない
(document.querySelector('h7') ?? {}).innerHTML = 'foo'
// こちらもエラーにならず、h1があれば 'foo' が入ります
(document.querySelector('h1') ?? {}).innerHTML = 'foo'
あまり見慣れない書き方ですが、if文で条件分岐するより短くかけるので、覚えておくと良いでしょう。
