JavaScriptでHTMLの要素を取得・値を変更する方法

ある日、ボーっとしていたら、「今やっている作業はHTML+JavaScriptで効率化できそうだ！」と思い立ちました。
何はともあれ、構文を知らないと始まらないので、調べたことをまとめてみました。

要素を取得するには？

IDで取得する

戻り値はHTMLElement
 

クラス名で取得する

戻り値はHTMLCollection
 

name属性要素で取得する

戻り値はHTMLCollection
 

タグ名で取得する

戻り値はHTMLCollection
 

タグ名と名前空間で取得する

戻り値はHTMLCollection
 

CSSセレクタの書き方で取得する

戻り値はNodeList

値を取得するには？

要素のテキストを取得する

違いの詳細はこちら ⇒ MDN Web Docs
 

要素のHTMLを取得する

「.innerHTML」は要素内のHTMLを、「.outerHTML」は要素自体のHTMLも含めて取得します。
 

アンカータグのリンクURLを取得する

テキストボックスの内容を取得する

ラジオボタンやチェックボックスの値を取得する

「true」か「false」で取得できます。

値を設定するには？

要素のテキストを設定する

違いの詳細はこちら ⇒ MDN Web Docs
 

要素のHTMLを設定する

テキストボックスの内容を設定する

ラジオボタンやチェックボックスの値を設定する

「true」か「false」を指定します。

具体的なコードの書き方は？

「text」というidを持ったテキストボックスに入っている文字列を取得する

window.document.getElementById('text').value;

2つ目のtableにある、3つ目のリンクからURLを取得する

window.document.getElementsByTagName('table')[1].getElementsByTagName('a')[2].href;

「getElementById」や「getElementsBy～」は、重ねて使うことができます。
取得できる「HTMLCollection」の添え字は「0」から始まるので、2つ目は[1]、3つ目は[2]に格納されます。

「q1」というnameがついたラジオボタンの4つ目をチェックする

window.document.getElementsByName('q1')[3].checked = true;

まとめ

JavaScriptで要素を取得したり、値を取得・設定する方法を列挙してみました。
これらをベースに色々試してみます。