はじめに

この記事は、Javascript１年生の私が基本的に自分の学習アウトプットとメモを兼ね合わせて作成しておりますが、同様にこれからJavascriptを学びはじめたい方や、学びはじめの方の参考になれば僥倖でございます。

目次

1.DOMってなに？
2.なんでDOMを使うの？
3.DOMの基本操作まとめ

1.DOMってなに？

そもそもDOMとは何か？というところからはじめていきたいと思います！
D・O・Mと書くだけあって、それぞれ何かの単語の頭文字をからきているのではないかと推測できます。
その単語とは“Document Object Model”のことで、Javascriptを通してHTML・XMLの操作を可能にする仕組みのことらしいです。
つまり、DOMを使用することで、JavaScriptを使ってウェブページとその要素にアクセスすることができます。

2.なんでDOMを使うの？

DOMがどういうものなのか？ということが大まかにわかったかと思いますが、実際にDOMが使われている理由とは一体なんでしょうか？
これはDOMの持つ特徴からわかるかと思います。
・階層構造を持っている
・JavascriptからHTMLの操作が可能
言葉だけで説明するのは私の実力では難しいので、次のDOMの基本操作のまとめで実際のコードをもとに見ていきたいと思います。

3.DOMの基本操作まとめ

可能な基本操作
・HTML要素の取得
・HTML要素の追加
・HTML要素の削除
・HTML要素内のテキスト変更
・HTML要素の属性に値をセット・変更

・HTML要素の取得

使い方：メソッドを使用してid名やclass名を取得して、そこから追加・削除・属性変更・テキスト変更が可能

メソット：

document.getElementById(id)
document.getElementsByClassName(class)
document.getElementsByTagName(name)
document.querySelector(css)
document.querySelector(css)

・HTML要素の追加

使い方：divタグ等の要素を追加

メソット：
・createElement
…DOMの新規作成・追加
・appendChild
…DOMを別のDOMに追加

書き方：例）createElement

dom.js

//DOMを新規作成
const divDom = document.createElement('div');

・HTML要素の削除

使い方：divタグ等の要素内にhタグやpタグを削除

メソット：
・removeChild
…DOMの削除

書き方：例）removeElement

dom.js

//DOMを取得
const dom = document.getElementById('id');

//Nodeプロパティから親要素のDOMを取得
dom.parentNode.removeChild(dom);

・HTML要素内のテキスト変更

使い方：divタグ等の要素内にhタグやpタグを変更

メソッド：
・innerHTML
…HTML要素を含んだ内容の取得
・innerText
…HTML要素を含まずにテキスト内容を取得
・textContent
…HTML要素を含まずにテキスト内容を取得

書き方：例）innerHTML

dom.js

//DOMを取得
const dom = document.getElementById('id');

//DOMのテキスト内容を取得
console.log(dom.innerHTML);

//DOMのテキスト内容を変更
dom.innerHTML = '<strong>テ</strong>キスト'

・HTML要素の属性に値をセット・変更

使い方：aタグ等の要素内にあるsrc属性を変更してリンク先を差し替える

メソット：
・setAttribute
…指定の要素属性を追加変更

書き方：例）imgタグ

dom.js

//DOMを取得
const imgDom = document.getElementById('id');

//画像URLをsrc属性へ
imgDom.setAttribute('src', 'https://******.png')
console.log(dom.innerHTML);

//DOM要素がセットされたかの確認
conosle.log('imgDom');

参考文献

DOMとは：Let`sプログラミング
JavaScript初心者でもすぐわかる！DOMとは何か？：エンジニアの入り口
DOMの紹介：公式ドキュメント

おわりに

Javascript学び途中の未熟者で申し訳ないのですが、今回はDOMの基本操作についてまとめてみました。
ここでまとめたDOM操作を使いこなすことで、Javascriptのレベルを上げていきたいものですね。
ありがとうございました！