今回はDOMについて学んでいきます。

DOMとは

Document Object Modelのこと。

documentオブジェクトがDOMの世界へのエントリーポイントとなっており、便利なプロパティやメソッドなどが用意されている。

便利なメソッド

• document.getElementById()
  • idが一致する要素を取得する
• document.getElementsByTagName()
  • tagが一致する複数の要素（Element）を取得する
    • Elementが複数あるものをHTML Collectionという
• document.getElementsByClassName()
  • 指定されたクラス名をすべて持つすべての子要素の配列風オブジェクトを返す
• document.querySelector()
  • 指定されたセレクターまたはセレクター群に一致する、文書内の最初の Element を返す
• document.querySelectorAll()
  • 指定された CSS セレクターに一致する文書中のすべての要素（静的な NodeList）を返す
• Element: getAttribute()
  • この要素の指定された属性の値を返す
• Element: setAttribute()
  • 指定された要素の属性の値を設定する
• Node: appendChild()
  • 最後の子要素の後に要素を追加する
  • Nodeのみを追加可能
• Document: append()
  • 最後の子要素の後に要素を追加する
  • Nodeと文字列の両方を追加可能
• Document: prepend()
  • 先頭に要素を追加する
• Element: insertAdjacentElement()
  • 要素と要素の間に新しく要素を追加する
• Element: after()
  • 基準となる要素の後に兄弟要素を追加する
• Element: before()
  • 基準となる要素の前に兄弟要素を追加する
• Node: removeChild()
  • 子要素を削除する
• Element: remove()
  • 対象の要素を削除する

便利なプロパティ

• Element: innerText
  • 「人間が読める」要素のみを取得する
    • display = none と設定されているものは取得できない
• Element: textContent
  • <script> と <style> 要素を含む、すべての要素の中身を取得する
• Element: innerHTML
  • 要素内の HTML または XML のマークアップを取得したり設定する
• Element: classList
  • クラスを追加したり、削除したり、切り替えたりできる
• Node: parentElement
  • 親要素を取得する
• Element: children
  • 子要素を取得する
• Element: nextElementSibling
  • 次の兄弟要素を取得する
• Element: previousElementSibling
  • 前の兄弟要素を取得する

documentと関係ない便利なメソッド

• window.getComputedStyle
  • 最終的に適用されたスタイルを取得する

Javascriptでのスタイルの変更

下記のようにstyleを変更できる

const container = document.getElementById('container')
container.style.textAlign = 'center'