DocumentオブジェクトによるHTML要素の操作

DOM操作のメソッド

HTMLドキュメントの階層構造

DOMを使用すると、HTMLドキュメント内のすべての要素を「html」を頂点とする階層構造でアクセスできます
この階層構造を「DOMツリー」と呼びます
DOMツリー内の個々の要素を「ノード」と呼びます

ノードを取得する getElementByIdメソッド

プログラムで目的のノードを取り出す
引数には、HTMLにはタグで設定したid属性を指定します（HTMLタグにあらかじめid属性を指定しておく必要があります）

ノードにHTMLを設定する innerHTMLプロパティ

DOMの各ノードは、innerHTMLというプロパティが用意されています
「innerHTML」は日本語にすると「内部」ですが、文字通りノードの内部のHTMLを表します
innerHTMLの値を変更することにより、ノードのHTMLを動的に変更できます

《例》

	var myArea = document.getElementById('myArea');
	myArea.innerHTML = '<h2>中見出し</h2>';

要素内容の操作

要素が持つ内容を操作するための「innerHTMLプロパティ」

《要素の中身を書き換える》

要素 . innerHTML = 文字列 ;

画像タグの生成

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>画像タグの生成</title>
<script>
  function showImage() {
    var htmlstr = '';
    for(var i=1; i<=3; i++) {
      htmlstr += '<img src="img/sweets' + i + '.jpg">';
    }
    document.getElementById( 'imageArea' ).innerHTML = htmlstr;
  }
</script>
</head>
<body>
<button id="btn" onclick="showImage();">読込</button>
<div id="imageArea">ここに画像が読み込まれます。</div>
</body>
</html>

《実行結果》

DOMで使えるその他のメソッド

メソッドの書き方と引数	機能
document.querySelector('セレクタ')	セレクタ(CSS)にマッチする要素を１つ取得する
document.querySelectorAll('セレクタ')	セレクタにマッチする要素をすべて取得する
要素.getAttribute('属性')	要素の属性値を取得する
要素.setAttribute('属性')	属性値を属性値１に変更する
document.createElement('要素')	新しい要素を作る
要素１.appendChild('要素２')	要素２を要素１の子要素として追加する

DOMによって、要素の属性や内容を変更することができる

DOM based XSS

XSS（Cross Site Scripting）脆弱性の中であまり注意を払われていないタイプにDOM Based XSSというものがあります
一般的にXSS脆弱性と聞いて思い浮かべるのは、攻撃者の悪意ある入力データ（JavaScriptなど）がサーバサイドでのエンコードや削除をすり抜けてクライアントにアウトプットされるというもの
document.write()やinnerHTMLといった、文字そのままを書き出すメソッドやプロパティを使うと、そこにDOM based XSSが可能になる余地が生まれます

XSSのタイプ

第１のXSSは悪意ある入力データが直ちに画面に出力されるタイプ
第２のXSSは悪意ある入力データが（例えば掲示板のように）一旦サーバにデータとして保存された後に画面に出力されるタイプ
第３のXSSとして言及されているのがDOM Based XSSです。第１、第２のXSSが悪意ある入力データがサーバサイドを経由するという特徴があるのに対して、このDOM Based XSSでは悪意ある入力データが必ずしもサーバサイドを経由する必要がないという特徴を持っています

write()メソッドは使用しないようにする

write()メソッドを使用しないで、ブラウザに表示する

textContent

取得した要素の「コンテンツ」を表すプロパティ

Q1

p要素の部分に、現在の日時を表示しなさい（デフォルト）

<body>
<p id="choice">ここに日時を表示します</p>
<script>
document.getElementById('choice').textContent = new Date();
</script>
</body>

Q2

１冊2,400円の本の消費税込みの金額をブラウザに表示しなさい
document.write()を使用しない

<body>
<p id="output"></p>
<script>
var total = function(price) {
  var tax = 0.08;
  return price + price * tax;
}

document.getElementById('output').textContent = '１冊2400円の本の税込み価格は、' + total(2400) + '円（税込）です。';
</script>
</body>

<body>
<p id="output"></p>
<script>
var price = parseInt( prompt('金額を半角数字で入力してください', '') );
var total = function(price) {
  var tax = 0.08;
  return price + price * tax;
}

document.getElementById('output').textContent = '１冊' + price + '円の本の税込み価格は、' + total(price) + '円（税込）です。';
</script>
</body>

Q3

以下のような表になるように記述しなさい

<table>
<tr>
<th>タイトル</th><th>価格</th><th>在庫</th>
</tr>
<tr>
<td id="title"></td>
<td id="price"></td>
<td id="stock"></td>
</tr>
</table>

<style>
table {
  border: 1px solid #23628f;
border-collapse: collapse;
}
th,td {
padding: 4px 8px;
border: 1px solid #23628f;
  text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th>タイトル</th><th>価格</th><th>在庫</th>
</tr>
<tr>
<td id="title"></td>
<td id="price"></td>
<td id="stock"></td>
</tr>
</table>
<script>
var jsbook = { title:'JavaScript', price:2400, stock:3 };

document.getElementById('title').textContent = jsbook.title;
document.getElementById('price').textContent = jsbook.price + '円';
document.getElementById('stock').textContent = jsbook.stock;
</script>
</body>

Q4

わかりやすく日時を表示しなさい（年月日と時刻）

<p>最終アクセス日時：<span id="time"></span></p>

<body>
<p>最終アクセス日時：<span id="time"></span></p>
<script>
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth();
var date = now.getDate();
var hour = now.getHours();
var min = now.getMinutes();
var week = [ '日', '月', '火', '水', '木', '金', '土' ];
var day = week[now.getDay()];

var output = year + '年' + (month + 1) + '月' + date + '日' + day + '曜日' + hour + '時' + min + '分';
document.getElementById('time').textContent = output;
</script>
</body>