DOMを利用する

  • オブジェクトのプロパティを表示
<script>
    console.dir(window);
</script>

f:id:hrt0kmt:20140611040847p:plain



  • windowの高さを表示します。
<script>
    console.log(window.outerHeight);
</script>

f:id:hrt0kmt:20140611041132p:plain



  • 指定のページへ遷移
<script>
    window.location.href = "http://google.co.jp";
</script>

f:id:hrt0kmt:20140611041346p:plain

document object model(DOM)
  • documentにアクセスするための色々な命令
  • 古いブラウザだと違う命令の場合もある
  • htmlをいじるとき、idがあるとやりやすい



  • テキストを変更

index.html

<body>
    <p id="foo">AAA</p>
    <script type= "text/javascript" src="sample.js" charset="utf-8"></script>
</body>

sample.js

var bar = document.getElementById('foo'); // id fooを取得し、barへ代入します
bar.textContent = 'BBB'; // barのテキストを、BBBへ変更します。

f:id:hrt0kmt:20140611145804p:plain



  • 色を変更

sample.js

var bar = document.getElementById('foo'); // id fooを取得し、barへ代入します
bar.textContent = 'BBB'; // barに代入されているテキストを、BBBへ変更します
bar.style.color = 'blue'; // barに代入されているテキストのスタイルカラーを、青へ変更します

f:id:hrt0kmt:20140611155516p:plain



index.html

    <title>practice js</title>
    <style>
        .qux {
            color: pink;
        }
    </style>
    </head>
<body>
    <p id="foo">AAA</p>
    <script type= "text/javascript" src="myscript.js" charset="utf-8"></script>
</body>

sample.js

var bar = document.getElementById('foo');
bar.className = 'qux'; // セレクタを指定

f:id:hrt0kmt:20140611151446p:plain

var baz = document.createElement('p'), // エレメント作成
    text = document.createTextNode('CCC'); // テキスト作成
document.body.appendChild(baz).appendChild(text); // bazにtextを追加

f:id:hrt0kmt:20140611155756p:plain

https://developer.mozilla.org/ja/docs/Web/API/Node.appendChild http://dotinstall.com/lessons/basic_javascript_v2/26723 https://developer.mozilla.org/en-US/docs/Web/API/Node.textContent



Somebody to Love

Somebody to Love