JavascriptでDocument Object Model（DOM）インターフェースの使用方法をまとめました。
DOMとは
『Document Object Model』の略で、Javascriptを使ってHTMLやXMLを操作できる仕組みのことです。
HTMLやXMLは、要素や属性（ノード）を組み合わせて作られた構成（ツリー構造）になっており
階層構造が明確に決められているため、『とある要素の親を削除する』や『自分自身の子供として要素を追加する』といったことが容易にできるようになっています。
DOM操作でよく使われるメソッドには下記のようなものがあります。
| メソッド名 | 内容 |
|---|---|
| append/remove | 引数の要素を子要素の末尾に追加／子要素の中から削除 |
| hasAttribute | 引数の属性が存在する場合『true』、しない場合『false』を返す |
| getAttribute(Names) | 引数の属性が持つ値を取得（getAttributeNames：全ての属性値を配列を返す） |
| setAttribute | 引数の属性に引数の値を設定 |
| removeAttribute | 引数の属性を削除 |
| getElementById | id属性値が引数と一致する最初の要素を返す |
| getElementsByClassName | class属性値が引数と一致する全ての要素を返す |
| getElementsByTagName | 要素名が引数と一致する全ての要素を返す |
| querySelector(All) | 引数のCSSセレクタと一致する最初の要素を返す （querySelectorAll：全ての要素を返す） |
| classList.add/remove/toggle/contains | class属性値に引数の値を add：追加 remove：削除 toggle：持っていたら削除、持っていなかったら追加 contains：持っていたら『true』、持っていなかったら『false』を返す |
さっそくサンプルを見てみましょう。
サンプル