JavaScriptの基礎文法
下記の解説をします。
let btn = document.querySelector("button");
ノードオブジェクトのbuttonをbtnに代入しています。
function printHello() {
console.log("Hello world");
printHello関数を定義しています。
2番目の記述で、コンソールにHello worldと出力しています
btn.addEventListener("click", printHello);
buttonのノードオブジェクトに対して、clickイベントとprintHello関数を紐付ける仕組みであるイベントリスナを追加する。
DOM
DOMとはDocument Object Model(ドキュメントオブジェクトモデル)の略です。HTMLを解析し、データを作成する仕組みです。HTMLで書かれたファイルは結局ただの文字情報なので、そのまま表示しても意味がありません。HTMLを解析し、CSSやJavascriptによる装飾を行ってから画面に映すという工程が必要です。
ノード
HTML1つ1つのタグが、DOMツリーの中ではノードと呼ばれます。
document.getElementById("id名");
documentは、開いているWebページのDOMツリーが入っているオブジェクトです。documentに対していくつかのメソッドを利用することで、DOMツリーに含まれる要素を抽出して取得することができます。.getElementById("id名")はDOMツリーから特定の要素を取得するためのメソッドの1つです。引数に渡したidを持つ要素を取得します。
document.querySelector("セレクタ名");
セレクタ名とは、CSSでスタイルを適用するために指定している要素です。セレクタ名を指定してDOMを取得する場合、querySelectorメソッドを使用します。HTML上から、引数で指定したセレクタに合致するもののうち一番最初に見つかった要素1つを取得します。
addEventListener
(ノードオブジェクト).addEventListener("イベント名", 関数);
上記のような記述により、この記述の読み込み以降で「ノードオブジェクト」に「イベント」が起きた時、「関数」を実行するようになります。
addEventListener
「ノードオブジェクト」に「イベント」が起きた時、「関数」を実行します。
Author And Source
この問題について(JavaScriptの基礎文法), 我々は、より多くの情報をここで見つけました https://qiita.com/nariprogramming/items/d2b9b49b68acd27a8e0d著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .