少しずつ進んできた。基礎ばかりだけれどね、、、。
今週末にでもなんかしらのサイトを作ってみようと思う。さて何を作ろうか。
なんでもいいかな。

DOM

Document Object Model
WEBサイトを動的に書き換えるために必要。
JavaScriptで記述されたプログラムから、HTMLページにアクセスして、HTMLページを操作する方法を提供している。

DOMツリー

HTMLドキュメントやXMLドキュメントをツリー構造として表現したもの。

ノード

DOMツリーの一つ一つのオブジェクトのこと。

ブラウザオブジェクトの階層構造

Windowブジェクト
- ブラウザを操作するための機能を集めたオブジェクト
- ブラウザオブジェクトの階層構造の最上位に位置する。
Documentオブジェクト
- HTMLで表現されているコンテンツを保持しているオブジェクト
- Windowオブジェクト内で表示されたドキュメントを操作するのは、Documentオブジェクトの役割

IDをキー要素に取得

getElementBtIdメソッド

指定したidを持つ要素を１つ取得

document.ElementById(id)

今更だけど、ボタンをクリックしたときに関数showが呼ばれる。=> onclick
<input type="botton" value="取得" onclick="show()">

ボタン押したらpタグ内の文字列が日時に書き換わる。

html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <p id="result">pタグ要素</p>
        <input type="button" value="取得" onclick="show()">
        <script src="js/element_id.js"></script>
    </body>
</html>

JavaScript

function show(){
    var result = document.getElementById("result");
    console.log(result.innerText);
    var nowDate = new Date();
    result.innerText = nowDate.toLocaleString();
}

　タグ名をキー要素に取得

divの中身を取得して、ボタンをおしたらコンソールに出力

html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="result">div1</div>
        <p id="result">p2</p>
        <div id="result">div3</div>
        <span id="result">span4</span>
        <div id="result">div5</div>
        <input type="button" value="get" onclick="showElements()">
        <script src="js/element_tag.js"></script>
    </body>
</html>

JavaScript

function showElements(){
    var elements = document.getElementsByTagName("div")
    for(var i = 0; i < elements.length; i++ )
    console.log(elements[i].innerText);
}