DOMとは？
ブラウザ自体はwindowという組み込みオブジェクトでJavaScriptから扱うことができます。
console.log(window.outerHeight); // ブラウザの高さを表示
window.location.href = 'http://google.com'; // 別ページへ遷移
windowオブジェクトにはブラウザの高さを示す「window.outerHeight」や、別のページに飛ばすwindow.location.href」などがあります。
そして、このwindowオブジェクトの中で、特によく使うようになるのが、「window.document」です。これは一言で言うと、「今開いているページ」になっています。
window.documentをJavaScriptで操作することによって動的にページの一部を書き換えたり、新しい要素を追加したりといったことができるようになります。
ちなみに、window.documentにアクセスする時はwindowは省略可能なので、ただのdocumentでもアクセスできます。
そして、documentにアクセスするための色々な命令を document object model と言います。
一般的にDOM（ドム）と呼ばれていて、DOM をいじる、DOM を操作する、といった使い方をします。
DOMを操作する
DOM を使って動的にページを書き換えてみます。
ちなみにブラウザは HTML や CSS を読み込んだ後に、それぞれの要素をツリー構造で展開していきいます。
html の子要素として head と body があって、body の子要素として h1 や p 等があるといった状態です。DOM を弄る時はこのツリー構造が大事です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>JavaScriptの練習</title>
</head>
<body>
<h1>見出し</h1>
<p id="msg">こんにちは！</p>
<script>
// 「こんにちは!」を「Hello!」に変更
var e = document.getElementById('msg');
e.textContent = 'Hello!';
// 「Hello!」の下に「Hello world」を表示
var greet = document.createElement('p'),
text = document.createTextNode('Hello world');
document.body.appendChild(greet).appendChild(text);
</script>
</body>
</html>
まずp要素のテキストを書き換えてみます。
p要素のid 名を指定して、「var e = document.getElementById('msg');」で取得することができます。
テキストを書き換える場合、textContent というものが使えるので、「e.textContent = 'Hello!';」とすると、「こんにちは」が「Hello!」に書き換ります。
新しく自分で要素を作ることも可能です。
body 要素の中に、p 要素を追加して、その p 要素の中にtext を仕込んでみます。
Hello world というテキストを作りたいので、greet という element を作ります。
element を作る時には、createElement というものを使います。
タグネームを指定すればいいので「var greet = document.createElement('p'),」とします。
その後に text を追加していきます。
text の場合は、createTextNode を使います。
「text = documet.createTextNode('Hello world');」のように中に好きなテキストを入れてあげます。
そこまで出来たら、body に対して子要素を追加していきたいので「document.body.appendChild()」というのを使えば子要素の最後に追加してくれます。
今回追加したいのは、greet で、更に appendChild してあげて text を入れてあげれば OK です。
実行すると、Hello! の下に Hello world と出てきます。