DOMってなんなの？？DOMについて調べてみました。

ただただサンプルコードを打ってると、説明されてもなんぞや？その単語？というのに多々ぶち当たります。

今日はDOM(ドム）について調べてみました！

DOMとは、HTMLドキュメントやXMLドキュメントをプログラムから利用するためのAPI。

DOMではHTMLドキュメントやXMLドキュメントを「オブジェクトのツリー状の集合」として取り扱う。このツリーをDOMツリーと呼ぶ。

DOMツリーの一つ一つのオブジェクトはノードと呼ばれる。ある1つのノードから他のノードを参照する時は、親ノード、子ノード、兄弟ノード、先祖ノード、子孫ノードなどと呼ぶ。

DOMの仕様は、Level1〜3がW3Cにより定義されている。

Qiitaさんのサイトにまとめが載っていました。

qiita.com

今まで、サンプルコードをただただ打っていたのでdocument.getElementByIdとかなんのこっちゃ〜っだったのですが、改めて勉強してみるとちょっと繋がってきました！

**********************************************************************

まず

document→今開いているページ

であり

DOMを操作する

とは内容や属性を書き換えたり新しい機能のDOM要素を作成内容や属性を書き換えたりすること。

まずはこんな感じでコードを書くとブラウザには

こんな感じで表示されます。このページをDOMを操作してhelloを変更して表示を変えてみます。

scriptタグの中に

var e=document.getElementById('msg');

変数eを作りその中に代入していきます。そしてテキストをGoodmorning！と書き換えたいので

e.textContent='Goodmorning!';

そうすると↓

でHelloがGoodMorning!にテキストが変更されています。

同様にスタイルを変更することも可能です。

以下コードです。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM説明</title>
<style>
.myStyle{
font-weight: bold;
border:1px solid gray;
}
</style>
</head>
<body>
<h1>DOM</h1>
<p id="msg">Hello</p>
<script>