1:DOM(Document Object Model)とは？
1:HTMLをJavaScriptから操作できるようにしたインターフェイス
2:JavaScriptからはDOM APIを通じてHTMLの情報を取得・変更します。
document.querySelectorを使う場合が多いらしい
3:情報の取得・変更・イベントの登録などができます。
例1
const ul = document.querySelector('ul')
undefined ul.style.color = 'red' "red"
const firstLi = ul.querySelector('li')
undefined firstLi.style.color = 'black' "black"1: ul要素を取得
2: ulの文字色をすべて赤にして
3: ul.querySelector(‘li’)で初めのli要素を代入
4: 初めのli要素の色を黒にしている
const li = document.querySelectorAll('li')
li[0].style.color = 'purple'
li
NodeList(3)
[li.item.item-1, li.item.item-2, li.item.item-3]
li.forEach(node => node.style.color = 'purple');1: li要素をすべて取得して
2:初めの要素をパープルにして
3:forEachを使ってループさせて全てに適用させている。
2:ボタンが押されたときhelloと出力する
HTML(bodyから)の記述
<body>
<h1 id="main-title">JavaScriptの基礎</h1>
<h2 class="sub-title">DOM(Document Object Model)に
イベントリスナーを登録してみよう。</h2>
<button id="btn">Change Title Color</button>
<script src="main.js"></script>
</body>JavaScriptの記述
// ボタンの要素を取得
const btn = document.querySelector('#btn')
; // ボタンが押されたときhelloと出力する
btn.addEventListener('click', function() {
alert('hello');
});
// こっちの書き方のほうがbetter
const hello = function() {
alert('hello');
};
// クリックしたときに発火
btn.addEventListener('click',hello);
// こちらの書き方でもOK
function hello() {
alert('hello');
};ボタンが押されたとき色を変更する
// ボタンの要素を取得
const btn = document.querySelector('#btn');
btn.addEventListener('click',hello);
functionhello() {
this.style.color = 'red';
console.log(this);
};
// クリックしたときに発火
btn.addEventListener('click', hello);
// マウスオーバーしたときに発火する記述
// btn.addEventListener('mouseenter',hello);
const h1 = document.querySelector('h1');
function changeColor() {
h1.style.color = 'red';
}
function changeBgColor() {
h1.style.backgroundColor = 'green';
}
function helloWorld(){
alert('HelloWorld');
}
// addEventListenerを使うことで複数のイベントを追加できるよ
btn.addEventListener('click', changeColor);
btn.addEventListener('click', changeBgColor);
// イベントリスナーを削除する(上を打ち消す)
// btn.removeEventListener('click', changeBgColor);ボタンを押す前
ボタンを押した後
