【WEB制作×勉強】Day15　DOM操作

引き続きJavaScript... 
なれない言葉たちに頭がパンクぎみ…

取得→加工→出力　DOM操作

HTMLの取得

console.log(document.querySelector（”取り出したい要素”）
取り出したい要素が
Id=＃Id名
class=.class名
タグ=タグ名
属性=[属性]＊属性の中に””がある場合は’’にする

querySelector　　：最初の要素
querySelectorAll　：すべての要素

---

・テキストの追加

console.log(document.querySelector("").innerText="変更したいテキスト内容")

innerText＝指定したテキストがある場合はテキストを変更する・ない場合は追加する

---

・タグの追加

// タグの追加
const button=document.createElement("a")
button.innerText="ログイン";
button.setAttribute("class","btn");
button.setAttribute("href","https://tokyofreelance.jp/")
document.querySelector("#js-btn-wrap").appendChild(button);

①まず追加する要素を特定することを宣言する（今回はaタグ）
const button=document.createElement("a")
②追加したいボタンを定義する
・button.innerText="ログイン";　　テキストをログインとする
・button.setAttribute("class","btn");　　btnというclassをつける
・button.setAttribute("href","https://tokyofreelance.jp/")　　https
～のhrefを追加する
③定義したボタン（②）を指定した場所(親要素)に追加する
document.querySelector("#js-btn-wrap").appendChild(button);

createElement＝追加する要素を特定する　
setAttribute=指定した要素の値（”追加したい属性の属性名”,”属性値”）
appendChild＝追加する

---

javaScriptからの操作

document.querySelector("#js-register").click();
のようにdocument.querySelectorで呼び出して.click等イベントを入力することでその指定した操作を行うことができる

---

イベント監視（イベントが起きた時に指示を実行する）

・onloadイベント

//ページの読み込みが完了したらアラートを表示させよう！
window.onload = function () {
  alert("読み込みが完了しました");
};

・clickイベント

//js-btnがクリックされた時にアラートを表示させよう！
document.querySelector("#js-btn").addEventListener("click", function () {
  alert("ボタンがクリックされました");
});

.addEventListener（”イベント”,function(){
       イベント時の指示
}）