少しずつ進んできた。基礎ばかりだけれどね、、、。
今週末にでもなんかしらのサイトを作ってみようと思う。さて何を作ろうか。
なんでもいいかな。
#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);
}