【学習ログ】MDN JavaScript チュートリアル (11 回目)

はじめに

学習したもの

MDN JavaScript コーナー
┃
┗ チュートリアル
　 ┣ 完全な初心者向け
　 ┃
　 ┣ 中級者向け
　 ┃ ┣ クライアントサイド Web API
　 ┃ ┃ ┣ Web API の紹介
　 ┃ ┃ ┣ 文章の操作（本日の学習箇所）
　 ┃ ┃ ┣ サーバからのデータ取得
　 ┃ ┃ ┣ サードパーティ API
　 ┃ ┃ ┣ 絵を描く
　 ┃ ┃ ┣ 動画と音声の API
　 ┃ ┃ ┗ クライアント側でのデータ保存
　 ┃ ┃
　 ┃ ┣ JavaScript 「再」入門
　 ┃ ┣ JavaScript のデータ構造
　 ┃ ┣ 等価比較と同一性
　 ┃ ┗ クロージャ
　 ┃
　 ┗ 上級者向け

概要

チュートリアルで習った事の概要は下記の通りです。

文章の操作

DOM API の核と、DOM と共によく利用される API、ドキュメントの操作について学習。

ノート・メモ

ウェブブラウザーの重要なパーツ, ウェブ API
- Navigator
  - ブラウザーの状態やウェブで使われているようなブラウザーの身元(つまりユーザーエージェント)を表わします。JavaScript では Navigator オブジェクトで表わされます。このオブジェクトを使って、位置情報、ユーザが好む言語、ユーザのウェブカムからの録画データ、などを取得できます。
- Window
  - ウェブページが読み込まれる部分の回りのブラウザーの枠です。これは JavaScript では Window オブジェクトで表わされます。このオブジェクトに備わるメソッドを使って、ウィンドウの大きさを調べたり、ウィンドウに読み込まれる文書を操作したり、その文書に関係するデータをクライアント側(例えばローカルデータベースや他のデータ保存機構)で保存したり、現在のウィンドウに対してイベントハンドラーを追加したり、などできます。
- Document (ブラウザーでは DOM として表現されます)
  - ウィンドウに実際に読み込まれているページのことで、JavaScript では Document オブジェクトで表わされます。このオブジェクトを使って文書を構成する HTML と CSS 上の情報を調べたり操作したりできて、例えば DOM の中のある要素に対する参照を得たり、その中身のテキストを変更したり、新しいスタイルを適用したり、新しい要素を作成して現在の要素の子に追加したり、一緒くたに削除したりできます。
ドキュメントオブジェクトモデル(Document Object Model、DOM)
- DOM は HTML とスタイルに関する情報を Document オブジェクトを多用して操作する一連の API です。
- ドキュメントは、ドキュメントオブジェクトモデルとして表現されます。これは HTML の構造に対してプログラム言語から簡単にアクセスできるようにブラウザーが作成する、"木構造"による表現です
エレメント(要素)ノード
DOM の中での HTML 要素です。
ルート(根)ノード
木の頂点のノードで、HTML の場合であれば常に HTML ノードになります。(SVG や独自の XML といった他のマークアップ言語の方言では異なるルート要素の場合があります)
子ノード
他のノードに直結して含まれるノードです。
子孫ノード
他のノードにどのような形であれ含まれるノードです。
親ノード
その中に他のノードを持つノードです。
兄弟ノード
DOM ツリーの同じ階層にあるノードです。
テキストノード
テキスト文字列を含むノードです。
要素を選んで変数に保存する方法にはいろんなやり方がある。Document.querySelector(), Document.querySelectorAll() などなど。
document.createElement() = 要素を新規作成する。
Node.appendChild() = 親ノードに対して子ノードを追加する。ノードの移動時にも使用可。
document.createTextNode() = テキストノードを作成する。
Node.removeChild() = 子ノードを削除する。
削除したいノードそのものへの参照しかない場合に、そのノードを削除するのはちょっとばかり複雑になります。下記のように削除対象 → 親ノード → 親ノードから見た子ノードの削除対象を削除という流れ。

example.parentNode.removeChild(example);

CSS スタイルを操作する方法はいろいろあります。
- Document.stylesheets を使ってドキュメントに付随する全スタイルシートのリストを得て、スタイルを追加・削除する方法。（ちょっと古風だし難しいのでチュートリアルではやらないとのこと）
- 動的にスタイルを指定したい要素に、インラインスタイルを直接追加するやり方です。これには HTMLElement.style プロパティを使い、このプロパティはドキュメント中の各素要のインラインスタイル情報を保持しています。このオブジェクトのプロパティを更新すれば要素のスタイルを直接変更できます。
- 別のやり方として、事前に CSS にクラスのスタイルを設定しておいて、Element.setAttribute() でノードに対して、クラスを付与するやり方があります。

分かった事

DOM でノードを追加・移動・削除したり、CSS スタイルを操作したり、ウィンドウサイズにあわせて画像サイズを伸縮させたりする方法が分かりました。
最終的にチュートリアルの最後にあった課題の買い物リストも答えを見ないで自力で調べたりして完成できました！

分からなかった事

買い物リストを作る課題で、入力フォームから値を取得するところでどう記述したらいいか分からず戸惑いました。最終的に .value を input を参照している変数につけたら取得できることが分かりました。

まとめ

今回はコーディング出来ない・分からないという部分が少なかったので良かったです。この調子で学習を続けていきたいと思います。

最後までご覧頂きありがとうございました。

フロントエンド学習記(仮題)

主にフロントエンドについて学習した事を記録・メモしていきます。