プログラミングで月収5万円になるまでの記録60日目

こんにちは、こずえです。
プログラミング学習記録60日目です。
JavaScriptについて学習しました。

所感：Consoleで確認しつつ読み進めていますが先は長いですね。

1 合計学習時間
2 学習内容
- 2.1 DOM
3 参考資料

合計学習時間

前回までの時間：118.25[h]
今回の時間：3.00[h]
合計時間：121.25[h]

学習内容

前回と同様に以下のサイトを読み進めていきました。

今回は「二章第二回　DOMとは」から「二章第六回　木構造の操作：さまざまな機能」までを読みました。

JavaScript初級者から中級者になろう — uhyohyo.net

以下自分まとめです。

DOM

document

document：ブラウザに読み込まれたページを表すインターフェイス(bodyやspanなどの要素を持っている)
HTMLElement：HTML文書の要素を表すインターフェイス

ノード

読み進めていく中で説明にあったプロパティやメソッドを以下にまとめました。

プロパティ、ノード

parentNode：親ノードを表すプロパティ
childNodes：子ノードのリスト(NodeList)を表すプロパティ
- NodeList：ノードの集合　※1
firstChild：最初の子ノードを表すプロパティ
- 存在しない場合はnull
- 対としてlastChildプロパティが存在する
#Text：要素がもつ文字列を表すノード
id：id属性を表すプロパティ
className：class属性を表すプロパティ
title：title属性を表すプロパティ

ノードには書き換えができるものとできないものが存在します(parentNode、tagName…etc)。

※1：NodeListはArrayオブジェクトではありません。そのため、itemメソッドやlengthプロパティといった異なるプロパティを持っています。また、DOM内が更新された場合内容が自動的に更新されるという特徴を持っています。

NodeList – Web API | MDN

メソッド

createElement：HTMLElementにノードを追加するメソッド
appendChild：指定した親要素の子ノードリストの末尾に追加するメソッド
insertBefore：指定した要素の前に子ノードを追加するメソッド
removeChild：子ノードを取り除いたノードを返すメソッド
hasChildNodes：子ノードの有無をtrue/falseで返すメソッド
getElementsByTagName：引数に渡した要素名のNodeListを返すメソッド(*を渡すと全ての要素名のNodelistを返す)

テキストノードを書き換える

以下のようにnodeValueに値を代入することでテキストノードを書き換えることが可能です。

<p id="bar">t<strong>es</strong>t</p>

<script>
	var p = document.getElementById('bar');
	var children = p.childNodes;
	var textnode = children.item(0);
	console.log(textnode.nodeValue);
	textnode.nodeValue = "テキストノードのnodeValueプロパティを書き換えました";
</script>

Chrome開発ツールでテキストノードを見てみると同じ値をもつプロパティがあることに気が付きます(textContentなど)。

上記ソースコードの書き換え部分をnodeValueからtextContentに置き換えた場合でも同様の結果が得られます。

nodeValueとtextContentの差については細かくなりそうなので参考記事を以下に残しておきます。

ノードを作成、追加する

appendChild

テキストノードを持ったp要素を生成しbodyに追加します。

<body>
	<div>
		<span id="childSpan">天気は晴れです。</span>
	</div>
	<script>
		var new_element = document.createElement("span");
		var new_text_node = document.createTextNode("お散歩日和ですね。");
		new_element.appendChild(new_text_node);
		document.body.appendChild(new_element);
	</script>
</body>

上記の結果は以下の通りになります。

<body>
	<div>
		<span id="childSpan">天気は晴れです。</span>
	</div>
	<script>
		var new_element = document.createElement("span");
		var new_text_node = document.createTextNode("お散歩日和ですね。");
		new_element.appendChild(new_text_node);
		document.body.appendChild(new_element);
	</script>
	<span>お散歩日和ですね。</span>
</body>

insertBefore

<div>
  <span id="childSpan">天気は晴れです。</span>
</div>

<script>
	// 空の要素ノードを作成します
	var sp1 = document.createElement("span");

	// 作成した要素に追加するためのテキストノードを作成します
	var sp1_content = document.createTextNode("明日の");

	// 作成した要素にテキストノードを追加します
	sp1.appendChild(sp1_content);

	// id属性にchildSpanを持つ要素の親ノードを取得します
	var sp2 = document.getElementById("childSpan");
	var parent_div = sp2.parentNode;

	// 作成した要素をsp2の前に追加します
	parent_div.insertBefore(sp1, sp2);
</script>

上記の結果divは以下の通りになります。

<div>
	<span>明日の</span>
	<span id="childSpan">天気は晴れです。</span>
</div>

参考資料

以下は「JavaScript初級者から中級者になろう — uhyohyo.net」以外の参考資料になります。