DOMとは何か？

#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