はじめに
この記事はWebの基礎をおさらいカレンダー Advent Calendar 2022です。
このカレンダーでは、なんとなくわかった気になっている、Webの知識をおさらいするカレンダーです。
興味をもし持ってくださった方は、購読いただけると嬉しいです！
DOMとは
Document Object Modelの略で、HTMLやXMLを操作するための仕組みです。
<!DOCTYPE html>
<html>
<head><title>example</title></head>
<body><p>hoge</p></body>
</html>
例えば、HTMLで上記のように表されるものは、DOMだと下記のように表される。
一意に場所を指し示すので、操作ができるようになるというわけです。
└Document
└Doctype: html
└Element: html class="e"
└Element: head
└Element: title
└Text: example
└Text: ⏎␣
└Element: body
└Text: hoge⏎
上記のように階層構造が取られていて、各要素をノードと呼ぶ。
対象のノードから
上位階層にあるものを親ノード、
下位にあるものを子ノードと呼び、
同一階層にあるものを兄弟姉妹ノードと表現する。
実際にDOMの操作を行ってみる
<!DOCTYPE html>
<html>
<head><title>example</title></head>
<body>
<p id='target'>hoge</p>
</body>
</html>
pタグにid属性を付与することで、そのページ内で一意のものだと宣言できます。
JavaScriptで、下記のメソッドを使用することで、id名がtargetのものを特定できます。
document.getElementById('target')
上記にさらにstyleのcolor属性を指定してみると、色が青に変わります。
document.getElementById('target').style.color = 'blue';
See the Pen Untitled by yuki (@yutaroud) on CodePen.
まとめ
以上、DOMについての説明でした！
DOM操作はよく使うので、必ず覚えておきましょう！
Webの基礎をおさらいカレンダー Advent Calendar 2022でした。
興味をもし持ってくださった方は、購読いただけると嬉しいです！