(Sample)
ポイントは14行目と15行目です。
14行目では「document.querySelector("#do").onclick」という記述によりこのHTMLドキュメントの"do"というID名の要素を取得し、クリックした時というイベントハンドラを設定しています。
メソッドチェーンはJavaでも学びました。
今回の関数には名前をつけていません。
使うのが1回限りの関数なので名前を付ける必要性がないのです。
その後、window.confirm()というメソッドの戻り値はBoolean型ですのでif文の条件に使っています。
18，20行目の「textContent 」はDOMプロパティで、テキストの内容という意味です。
<!DOCTYPE html>
<html>
<head>
<title>confirm.html</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
<button class="btn-primary" id="do">実行</button>
<div id="result"></div>
<script>
document.querySelector("#do").onclick = function () {
let checkSaveFlg = window.confirm('実行しますか？');
if (checkSaveFlg) {
document.querySelector("#result").textContent = "実行しました。";
} else {
document.querySelector("#result").textContent = "キャンセルしました。";
}
};
</script>
</body>
</html>参考までにその他のよく使うであろうDOMプロパティを紹介します。
| DOMプロパティ | 説明 |
|---|---|
| attributes[] | ノードの属性リストを取得したいときに使う |
| className | クラス名の取得・設定に使う |
| id | ID名の取得・設定に使う |
| name | 要素のname属性の取得・設定に使う |
| tagName | 要素名の取得・設定に使う |
| style | 要素のstyle属性の取得・設定に使う |
少し分かりにくいのが以下の3つのDOMプロパティです。
| DOMプロパティ | 説明 |
|---|---|
| innerHTML | 要素（含むその子要素）に含まれるすべてのHTMLの取得・設定に使う（brタグは<br>と表示） |
| innerText | 要素（含むその子要素）に含まれるすべてのテキストの取得・設定に使う（brタグは有効） |
| textContents | 要素（含むその子要素）に含まれるすべてのテキストの取得・設定に使う（brタグは無効） |
以下のサンプルで確認してください。
<!DOCTYPE html>
<html>
<head>
<title>innerHTML_innerText_textContents.html</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="text">テキスト<br>テキスト。</div>
<script>
alert(document.querySelector('#text').innerHTML);
alert(document.querySelector('#text').innerText);
alert(document.querySelector('#text').textContent);
</script>
</body>
</html>