DOMとは何か？

DOM(Document Object Model)とはHTMLドキュメントの構造を記述するものです。

JavaScriptがすること

この仕組みを利用して、Javascriptはページを再読み込みすることなく、動的にHTMLドキュメントを書き換えることができます。

DOMの操作方法-取得

idから取得する

sample.js

const elements = document.getElementById('sampleId');

sample.html

<div id="sampleId">hogehoge</div>

Tagから取得する

sample.js

const elements = document.getElementsByTagName('li');

sample.html

<li>hogehoge</li>

Nameから取得する

sample.js

const elements = document.getElementsByName('sampleName');

sample.html

<input name="sampleName">

Classから取得する

sample.js

const elements = document.getElementsByClassName('sampleClass');

sample.html

<p class="sampleClass">hogehoge</p>

DOMの操作方法-ノードの生成

sample.js

const li = document.createElement('li');
const text = document.createTextNode('追加文字列');

DOMの操作方法-ノードの削除

sample.js

const parentElement = document.getElementById('lists');
const elements = parentElement.getElementsByTagName('li');
const removeIndex = elements.length - 1;
parentElement.removeChild(elements[removeIndex]);

参考資料

DOM の紹介 - Web API | MDN