JavaScript #3

210730
JavaScript #3

const title = document.querySelectorAll('.hello h1')

console.dir(title)

querySelector All()またはquerySelector()を使用すると、次の要素がたくさんあります.

titleを使用してquerySelector Allを行い、helloというh 1タグ要素をすべて取得します.
titleは、3つのh 1を有するリストのように使用することができる.

const title = document.querySelectorAll('.hello h1')

title[0].innerText = 'This is first h1'
title[1].style.color = 'blue'

event
JavaScriptでの操作の多くはイベントの処理です.
-クリック、マウスのサスペンション、入力、ボタンなどはeventです.

-click event
addEventListenerを使用してイベントを検出および転送できます.

const title = document.querySelector('.hello h1')

function handleTitleClick() {
  console.log('title was clicked!')
}

title.addEventListener('click', handleTitleClick)

検出click eventはhandleTitleClickを呼び出します.
-画面を実行

titleをクリックすると関数が検出され呼び出されます.

const title = document.querySelector('.hello h1')

function handleTitleClick() {
  title.style.color = 'blue'
  console.log('title was clicked!')
}

title.addEventListener('click', handleTitleClick)

あるいは色を変えることができます.
リファレンス
https://nomadcoders.co/javascript-for-beginners/lobby