今回扱う内容：DOM操作

DOM操作を理解しよう。

DOM(Document Object Model)とは

DOMは下図のように、ブラウザは主にコンテンツが表示されるDocument、アドレスバー部分またはブラウザ全体であるWindow、それ以外の部分であるNavigationで構成されています。

特にDocumentについては、そのコンテンツと構造からなるオブジェクトのデータ表現であるDOM（Document Object Model）というプログラミングインターフェイスがあります。ブラウザのJavaScriptにはこのDOMuを操作するためのAPI（DOM API）があり、これらを使用することをDOM操作といいます。

詳しくはMDNを参照してください。

https://developer.mozilla.org/ja/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents

DOM操作の例

文章の書き換えとリンク先の指定

const link = document.querySelector("a");
link.textContext = "REDIMPULZ Lab";
link.href = "https://www.youtube.com/channel/UCdsCNxALP2nAJ_mLLlg3rFQ";

新しいノードの作成と配置

const sect = document.querySelector("section");
const para = document.createElement("p");
para.textContent = "We hope you enjoyed JS master.";
sect.appendChild(para);

要素の移動と削除

sect.appendChild(linkPara);  //sectionに追加
sect.removeChild(linkPara);  //削除方法１
linkPara.remove();           //削除方法２

スタイルの操作をする

para.style.color = "white";
para.style.backgroundColor = "black";
para.style.padding = "10px";
para.style.width = "250px";
para.style.textAlign = "center";