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