はじめに
JavaScriptでHTML要素を操作するのに使用するdocumentオブジェクトの，主なメソッドをアウトプットします．
getElementById
指定したID属性を持つHTML要素を取得することができるメソッド．
使用例 : input内のテキストを取得
HTML
～～～
<body>
<input id="example" />
<button onclick="onclickAlert()">表示</button>
<script>
const onclickAlert = () => {
const inputText = document.getElementById("example").value;
alert(inputText);
};
</script>
</body>
～～～
「表示」ボタン実行結果
aaa //アラートに表示される
addEventListenerメソッドを使い，document.getElementById("対象要素のid").addEventListener("click",クリック時の処理)とすることで，要素をクリックしたときに実行する処理を設定できる．
createElement
HTML要素を生成することができる．
使用例1
const li = document.createElement("li");
console.log(li);
実行結果
<li></li>
生成した要素にクラスを設定するには，classNameプロパティを使用する．
使用例2
JavaScript
const li = document.createElement("li");
li.className = "list";
console.log(li);
実行結果
<li class="list"></li>
appendChild
JavaScriptで要素の階層構造を作るのに使用．対象要素に子要素を追加する．
使用例
JavaScript
const div = document.createElement("div");
const p = document.createElement("p");
p.className = "child";
div.appendChild(p);
console.log(div);
実行結果
<div>
<p class="child"></p>
</div>