Javascript基礎学習④要素の取得・書換・追加・削除

勉強した事の復習！！

参考書籍：確かな力が身につくJavaScript「超」入門

要素を取得

・id属性から取得。

document.getElementById('id名')

・タグ名を持つ要素から取得。
※複数の要素にマッチした場合は、最初にマッチした要素1つだけを取得する。

document.querySelector("CSSセレクタ")

・タグ名を持つ複数の要素を取得したい場合。

document.querySelectorAll( CSSセレクタ )

要素の書換

・取得した要素の書換

document.getElementById("id名").textContent = 書き換えたい文字列; 

要素の追加

・取得した要素を追加

取得した要素.insertAdjacentHTML('挿入する場所','挿入する要素')

挿入する場所を指定するには、下記のキーワードを使用する。

キーワード	挿入する場所
beforebegin	取得した要素の前に挿入（開始タグの前に挿入）
afterbegin	取得した要素の子要素として挿入。すでに子要素がある場合はその前に挿入（開始タグのすぐ後に挿入）
beforeend	取得した要素の子要素として挿入。すでに子要素がある場合はその後に挿入（終了タグのすぐ前に挿入）
afterend	取得した要素の後に挿入（終了タグの後に挿入）

要素の削除

・HTML要素の削除

document.getElemntById("id名").removeChild(削除する要素);