【JavaScript】要素をさわる

○要素の取得-1（id）

　document.getElementById('id名')

例）html

　　<p id="choice">ここに日時を表示します</p>

　　JavaScript

　　console.log(document.getElementById('choice'));

○要素の取得-2（cssセレクタ）

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

例）HTMLのボタンをクリックしたら、コンソールに文字を表示する

const button = document.querySelector('button')!;

button.addEventListener('click',()=>{

    console.log('clicked!')

})

☆CSSセレクタは、ほとんどHTMLタグみたいなもん！

○要素の取得-3（カスタムデータ属性、data-*属性）

　data-ってつけたらなんでも指定できる！

○取得した要素の書き換え-1（p53）

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

例）＜タグ　id='choice'＞のtextContent をnew Date()にする

　　document.getElementById('choice').textContent = new Date();

○取得した要素の書き換え-2

innerHTMLを使う

textContent　…htmlのタグを文字としてそのまま出力します

innerHTML　…htmlのタグを解釈して出力します

JavaScript textContentとinnerHTMLの違いのサンプル | ITSakura

○要素の挿入（p135）

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

参考：確かな力が身につくJava Script 超入門