DOMとは
HTMLやXMLドキュメントなどのマークアップ言語と、CSSをJavaScriptなどのプログラミング言語からアクセスできるようにするためのAPI。 HTML や XML のドキュメントに含まれる要素や、要素に含まれるテキストのデータをオブジェクトとして扱う。Webページの要素やコンテンツなどをツリー構造で表現したデータモデルのこと。
例）天気情報をタブで表示を切り替える
DOMの仕組みを使うと「週間」のタブが押された時に、以下のようなプログラムを実行し、Webページの表示を変更できる。
- 「今日タブ」が暗くなるようにする
- 「週間タブ」が明るくなるようにする
- 「今日のお天気情報」を非表示にする
- 「週間のお天気情報」を表示する
構造や内容など、Webページ上のあらゆるものの変更・追加・削除が可能。
XMLとは
マークアップ言語の一つ。HTMLの親戚。
コード例
<?xml version="1.0" encoding="Shift_JIS"?>
<?xml-stylesheet type="text/xsl" href="testxsl.xsl"?>
<おこづかい帳>
<支出>
<内容>
<日付>1月20日</日付>
<交通費>780</交通費>
<食費>980</食費>
<嗜好品>250</嗜好品>
</内容>
<内容>
<日付>1月21日</日付>
<交通費>950</交通費>
<食費>1200</食費>
<嗜好品>300</嗜好品>
</内容>
<内容>
<日付>1月22日</日付>
<交通費>500</交通費>
<食費>1500</食費>
<嗜好品>250</嗜好品>
</内容>
</支出>
</おこづかい帳>
APIとは
ソフトウェアの機能を共有する仕組み。ソフトウェアやアプリケーション間で情報をやり取りするための窓口。異なるプログラム同士がコミュニケーションをとるためのルールや手段を提供するもの。
開発者が複雑な機能をより簡単に作成できるよう、プログラミング言語から提供される構造。複雑なコードを抽象化し、それにかわる簡潔な構文を提供する。
JavaScriptのAPIには、DOM API、WebSocket API、Fetch API、XMLHttpRequest（XHR）、Window APIなどがある。
DOM APIはHTMLやXMLドキュメントの構造をプログラムから操作するための標準的なインターフェース。基本的な操作には、要素の選択、追加、削除、属性の変更、イベントの設定などがある。
XMLHttpRequest
// XMLHttpRequestオブジェクトの作成
var request = new XMLHttpRequest();
// URLを開く
request.open('GET', URL, true);
// レスポンスが返ってきた時の処理を記述
request.onload = function () {
// レスポンスが返ってきた時の処理
}
// リクエストをURLに送信
request.send();
使用例
<!DOCTYPE html>
<html>
<head>
<script>
var request = new XMLHttpRequest();
request.open('GET', 'https://jsonplaceholder.typicode.com/users/1', true);
request.responseType = 'json';
request.onload = function () {
var data = this.response;
console.log(data);
};
request.send();
</script>
</head>
<body>
</body>
</html>
参照サイト：
DOMとは？仕組みや構造を解説！HTMLやJavaScriptとの関係は？
1. DOMとは
「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典
XMLとは？IT初心者でもすぐわかるXML基礎知識 - HTMLとの違い
Web API の紹介
【初心者入門編】APIとは？知って得する Web APIの使い方
JavaScriptでAPIを呼び出す方法を現役エンジニアが解説【初心者向け】
主要なJavaScript API一覧とその利用方法の総まとめ
JavaScript API の例
APIとは? API連携の仕組みや事例をわかりやすく紹介