SIMJavaScriptのDOM操作についてまとめてみました。
JavaScript（DOM操作）の基本文法
SIMまずはJavaScript（DOM操作）の基本の書き方から見ていきましょう。
document . 要素の取得 . 処理
以下、例文を書いてみます。
HTMLデータを取得する（idで取得）
document.getElementById(‘id名’).outerHTML
outerHTML: 要素自身とその子孫要素に含まれる HTML 文を取得
id=contact-titleを含む要素のHTMLを取得してポップアップ表示させたいと場合は下のようになります。
alert( document.getElementById('contact-title').outerHTML) HTMLデータを取得する（classで取得）
document.getElementsByClassName(‘class名’)[配列のindex番号].outerHTML
注1）getElementsByClassNameのElementsは「s」が付く
注2）getElementsByClassNameは配列扱いのため[index番号]を指定する
class=c-buttonを含む要素の上から２つについてHTMLを取得し、ポップアップ表示させる時は下のようになります。
alert( document.getElementsByClassName('c-button')[0].outerHTML)
alert( document.getElementsByClassName('c-button')[1].outerHTML) HTMLデータを取得する（タグで取得）
document.getElementsByTagName(タグ名’)[配列のindex番号].outerHTML
注1）getElementsByTagNameのElementsは「s」が付く
注2）getElementsByTagNameは配列扱いのため[index番号]を指定する
１番目のaタグのHTMLを取得し、ポップアップ表示させる時は下のようになります。
alert( document.getElementsByClassName('a')[0].outerHTML) テキストを書き変える
document.セレクタ .innerText = ‘書き換え後のテキスト’
＊セレクタがidの場合
document.getElementById(‘id名’).innerText = ‘書き換え後のテキスト’
idがcompany-infoのh2タグのテキストを「会社情報」に変えたい時は…
document.getElementById('company-info').innerText = '会社情報' HTML要素を追加する
const 要素の変数名 = document.createElement(‘要素のタグ名（例えば、aタグの場合はa）’)
要素の変数名.innerText = ‘テキスト’
要素の変数名.setAttribute(‘id’, 追加するid名’)
要素の変数名.setAttribute(‘class’,’追加するclass名’)
要素の変数名.setAttribute(‘href’,’追加するパス’)
//……等のように属性等を追加していく
document . getElementById(‘親要素のid名’) . appendChild(要素の変数名)
以下、例文: id=”contact-form”の子要素としてaタグのボタンを追加する時は…
const submit_btn = document.createElement('a') //新規にaタグを作成
submit_btn.innerText = 'ログイン' //テキストを追加
submit_btn.setAttribute('id', 'submit') //setAttribute(属性名, 値) でid="submit"を追加
submit_btn.setAttribute('class','btn') //class="btn"を追加
submit_btn.setAttribute('href','https://abcdefg.com/') //href="https://abcdefg.com/"を追加
document.getElementById('contact-form').appendChild(submit_btn) //親要素.appendChild(追加したい要素)でlogin_btnを追加 参考）JavaScript公式（Element関係）
クリック操作
document . セレクタ .click()
＊セレクタがidの場合
document . getElementById(‘id名’) .click()
以下、例文: id=”submit-btn”をJavaScriptでクリックする時は…
document.getElementById('submit-btn').click()イベント処理を追加（onload）
SIMHTMLが読み込まれた後にJavaScriptで処理を行いたい場合です。
window.onload = funciton(){
//読み込み後に実行したい処理
}
でDOM（HTMLデータ）が読み込まれた後に実行したい処理を追加します。
以下、例文: 読み込み後に、id=”h2-title”のテキストを「はじめに」に変えたい時は…
window.onload = function() {
document.getElementById('h2-title').innerText = 'はじめに'
} イベント処理を追加（click）
SIM特定の要素をクリックした後に処理を行いたい時です。
document.セレクタ .addEventListener (‘click’, function() {
//クリック後に実行したい処理
})
以下、例文: ボタン(id=”c-button”)をクリック後に、H2タグ（id=”h2-title”の）のテキストを「はじめに」に変えたい時は…
document.getElementById("c-button").addEventListener('click', function() {
document.getElementById('h2-title').innerText = 'はじめに'
})
