🖥️

JavaScriptを理解していく

に公開
JavaScript
未経験
独学
tech

記事を作るきっかけ

  • 今回はJavaScript→Reactと学んできたが、ReactのHooksやNext.js(App router)で詰んだので、まだJavaScriptの理解が浅いと思い、この記事を残そうと思いました。
  • ここまで１か月と短い期間だったのでこのようになるのも当然かなと。

JavaScriptの役割

  • 画面の動的な要素を担っている
    　- ﾎﾞﾀﾝｸﾘｯｸによるｱｸｼｮﾝ
    • 画面内でのテキストの編集機能など
    • Todoリストの機能、タスク管理機能など


DOM

  • documentｵﾌﾞｼﾞｪｸﾄがDOMの世界へのｴﾝﾄﾘｰﾎﾟｲﾝﾄとなっている
  • その中にﾌﾟﾛﾊﾟﾃｨやﾒｿｯﾄﾞが用意されている
  • documentｵﾌﾞｼﾞｪｸﾄが読み込まれると、その中にJavaScriptｵﾌﾞｼﾞｪｸﾄも生成される
  • 直接HTMLを触らずにJavaScript(ﾌﾟﾛﾊﾟﾃｨ)で操作することをDOM操作とする

document.getElementById(ﾒｿｯﾄﾞ)

  • 返ってくる要素は、あくまでJSｵﾌﾞｼﾞｪｸﾄとして返ってくる
  • ｵﾌﾞｼﾞｪｸﾄの中にあるgetElementByIdというﾌﾟﾛﾊﾟﾃｨに要素がついてくる
  • idをもとに返ってきた要素を変数に入れる

document.getElementsByTagName

  • タグ要素を返す
  • HTMLCollection[]で返ってくる
  • 配列ではなく、１つ１つの要素である
  • mapﾒｿｯﾄﾞは使えず、for~of文で書く



document.getElementsByClassName

  • TagNameと同じでClassNameを属性として持ってる要素を返す

document.querySelector(All)

  • 指定したタグの１番目を返す
  • すべてのタグの要素を返すことができる(Allも付けた場合)
  • :nth-of-type(*)で *番目の要素を返す
  • 'a[title="アンパンマン"]'のように細かく指定して返すことができる




演習やってみた

  • クラス指定してそのクラスの要素をすべて返す
  • 複数ある要素の中でもあるtype属性だけを返す


プロパティを使って書き換えてみる

  • innerText
    • 見えているものすべての文字を返す
  • textContent
    • 見えていないｽﾍﾟｰｽや改行なども返す
  • innerHTML
    • タグ要素もセットで返す
  • spanタグの要素を取得し、innerHTMLﾌﾟﾛﾊﾟﾃｨを使って書き換える



  • getAttribute
    • 属性の値を返す
  • setAttribute
    • 変数.setAttribute(属性,変更後の属性の値) で属性の更新ができる)

タグのstyleｵﾌﾞｼﾞｪｸﾄ

  • 返ってきたタグ要素の中にstyleｵﾌﾞｼﾞｪｸﾄがあり、インライン要素で直接CSSをあてるやり方

    • 直接インラインにCSSをあてることは、使いまわしができないし、可読性が落ちるので本番環境には向かない

  • 演習やってみる

タグにclassをつけてCSSをあてる

  • classList.add("クラス名")でクラスのCSSをあてることできる
  • .removeで削除できる
  • .toggleであててるクラスを外したりつけたりできる
  • setAttlibuteでクラスにあてるより楽にできる

.parentElementと.children

  • parentElementは指定した要素の親要素を返す
  • childrenは指定した要素の子要素を返す

nextElementsiblingとpreviousElementsibling

  • 同じ兄弟要素内の前後の要素を返す
  • ※　Elementをつけないと前後のノードを返すので注意

JSからボタンを100個追加する演習

  • 最低限のことをAIに投げて、コードは自分で書く
  • これだけなのにすぐ作れなかった

removeとremoveChild

  • remove
    • 指定したタグ要素を削除
  • removeChild
    • 指定したタグ要素の子要素を削除
    • 削除するときはparentElementで親を呼んでセットで書く

演習でポケモン図鑑作成


Discussion