本記事は一人アドベントカレンダー企画の一つです。
30代未経験エンジニアが25日後にJavaScriptをマスターするカレンダー
JAVASCRIPT.INFOを元にJavaScriptを勉強していき、そこで学んだ知識をアウトプットしていきます。
２５日でJAVASCRIPT.INFOをやりきり、未経験エンジニアがJavaScriptをマスターする過程を投稿していきます。
2.1.1 ブラウザ環境, スペック
知らない単語
-
DOMとは
- XML文書やHTML文書を構成する要素をコンピュータプログラムで参照したり操作したりするための取り決めの事 -
BOMとは
- Unicodeで記述された文書の冒頭に記載される短い符号で、使用されている文字符号化方式（文字エンコーディング）の種類や、そのバイト順（エンディアン）を指定するためのもの
学んだこと
プラットフォームは、ブラウザ、Webサーバ、あるいは別の ホストの事だが、それはプラットフォーム固有の機能を提供する
JavaScriptではこれを ホスト環境 と呼ぶ
ホスト環境は言語のコアと独自のオブジェクトや機能を提供する
Webブラウザであれば Webページを制御する手段、Node.js であればサーバサイドの機能などを提供する
- DOM（ドキュメントオブジェクトモデル）
DOM(ドキュメントオブジェクトモデル)は、ページ全体のコンテンツを変更可能なオブジェクトとして表現する
document オブジェクトはページのメインの エントリーポイントとなり、ページ上のものを変更したり作成できる
例えば、
// 背景色を赤に変える
document.body.style.background = 'red';
// 1秒後に戻す
setTimeout(() => document.body.style.background = '', 1000);
のように書く
- BOM (HTML仕様の一部)
BOM(ブラウザオブジェクトモデル)は document 以外のすべてと連携するブラウザにより提供される追加オブジェクトである
navigator オブジェクトはブラウザとオペレーティングシステムのバックグラウンドの情報を提供し、
location オブジェクトはURLを読み、ブラウザを新しいURLへリダイレクトできる
例えば、location オブジェクトを使う方法は
alert(location.href); // 現在のURLを表示
if (confirm("Go to wikipedia?")) {
location.href = 'https://wikipedia.org'; // 別のURLへリダイレクト
}
のように書く
感想
DOM はブラウザだけではない事やBOM は一般的な HTML スペックの一部である事など、特徴をしっかり抑えておく。
2.1.2 ブラウザ環境, スペック
知らない単語
- バックボーンとは
- 大規模な通信ネットワークにおいて、集線装置間や拠点間、事業者間、国家間などを結ぶ大容量の通信回線網の事
学んだこと
HTMLドキュメントのバックボーンはタグである
ドキュメントオブジェクトモデルでは、すべてのHTMLタグはオブジェクトであり、タグの内側のテキストもオブジェクトである
これらを使用してページが変更ができる
例えば、document.body は
タグを表すオブジェクトで、下記で3秒間 が赤になる
document.body.style.background = 'red'; // 背景を赤に変更
setTimeout(() => document.body.style.background = '', 3000); // 戻す
ここでは背景を赤に変更するのに、style.backgroundを使用しているが、他にもプロパティは多く存在する
- DOM の例
DOM は HTMLをタグのツリー構造として表現するが、例えば以下のようになる
すべてのツリーノードはオブジェクトで、
タグは 要素ノードと呼ばれ、ツリー構造を形成する
感想
手動でDOMを検査したり修正するのに、開発者ツールが使えると思うので、ここで学んだ、よく使われている重要なアクションを忘れないようにしたい。
2.1.3 DOM ナビゲーション
知らない単語
- ノードとは
- ネットワークにつながっている1つ1つの機器の事
学んだこと
DOM 上のすべての操作は document オブジェクトから始まり、そこから任意のノードにアクセスできる
以下は DOM ノード間を移動できるリンクの図である
- トップ: documentElement と body
最上位のツリーノードは documet プロパティとして直接利用可能である
= document.documentElement 最上位のドキュメントノードは document.documentElement で、 タグの DOM ノードになる = document.body もう１つのDOM ノードは 要素で、 – document.body. = document.head タグは document.head で使用できる- 子: childNodes, firstChild, lastChild
子ノード – 直接の子要素、与えられた要素にネストしている
例えば
子孫 – 子要素、子要素など、指定された要素にネストされたすべての要素
例えば、ここで body は子 div と ul を持つ
<html>
<body>
<div>Begin</div>
<ul>
<li>
<b>Information</b>
</li>
</ul>
</body>
</html>
- Element-only navigation
上でリストされているナビゲーションプロパティは すべての ノードを参照する
例えば、childNodes では、テキストノード、要素ノードの両方を、さらに存在する場合にはコメントノードも見ることができる
だが、大抵の場合、テキストノードやコメントノードは必要無い
感想
すべてのノードを取得するプロパティと要素ノードのみの取得するプロパティは、与えられた DOM ノードで、ナビゲーションプロパティを使用することで直接隣接ノードに移動できるという事がここで1番重要だと思う。
2.1.4 検索: getElement* と querySelector*
知らない単語
- 無し
学んだこと
DOM でノードを検索するための6つのメソッド
最も使われるのは querySelector と querySelectorAll である
- querySelectorAll
elem.querySelectorAll は、指定された CSS セレクターに一致する elem 内のすべての要素を返す
下記は、最後の子要素となるすべての
要素を探す<ul>
<li>The</li>
<li>test</li>
</ul>
<ul>
<li>has</li>
<li>passed</li>
</ul>
<script>
let elements = document.querySelectorAll('ul > li:last-child');
for (let elem of elements) {
alert(elem.innerHTML); // "test", "passed"
}
</script>
任意の CSS セレクタが書けるので汎用性が高いメソッドである
感想
使い勝手の良いメソッドは頻繁に使用する事になると思うので、使うパターンなどをしっかり記憶したい。
最後に
DOMのところで、ノード間を移動できるリンクの図は検査したり修正する時に使用するようだが、実務ではどのような場面で使用するのかの例えなどをもう少し自分なりに調べて覚えておきたい。