プログラマーへの道 #36 今までの動画の知識でメモ帳アプリを作る #17（プログラミング入門）のメモ

# 参考にした動画
https://youtu.be/BRPeQH8EGqM

# 学んだこと
・階層がわからないからどこのidを取得したらメモのタイトルが重複してるかチェックできるかわからない。(調査中)
・childNodes[ | MDN](https://developer.mozilla.org/ja/docs/Web/API/Node/childNodes) (プロパティ)
・children[ | MDN](https://developer.mozilla.org/ja/docs/Web/API/Element/children) (要素)

# childNodesの実験コード①
<b>実験内容①</b>
・childNodesを使って子要素のテキストコンテンツを添字でアクセスできるか。
<b>実験結果①</b>
・添字でアクセスできる。
・childNodesの実験コード①のようにdivタグの親要素の中に改行と
インデントをしてpタグで子要素を作った場合、childNodesの添字を0から指定すると改行にアクセスすることになる。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>childNodes</title>
</head>
<body>
	<div id="menu-list">
		<p>curry</p>
		<p>soup</p>
		<p>sandwich</p>
	</div>
</body>
<script>
	const dinner = document.getElementById("menu-list")
	const todayDinner = dinner.childNodes[1].textContent
	// 添字を0にするとコンソールには何も出力しないが...
    // textContentでなんのテキストが取得できているか確認すると
    // 改行(\n)とタブ(\t)が取得できているのが3枚目の画像でわかる。
    // 改行(\n)とタブ(\t)は特殊文字と呼ばれる
    // 特殊文字が連続した場合は一つの文字列として扱われる
    // 今はこの理解で先に進む。
	const todayDinner2 = dinner.childNodes[0].textContent

	console.log(todayDinner)
	console.log(todayDinner2)
</script>
</html>
```
<b>ブラウザ</b>
![スクリーンショット 2023-07-04 13.24.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823837/863294b4-7643-7110-30a7-4d0cd147c3c1.png)
![スクリーンショット 2023-07-04 13.25.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823837/142354ad-0843-0501-08f8-2e7c9eff7048.png)
![スクリーンショット 2023-07-04 13.25.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823837/b6bf0890-b8c0-fa7f-df83-c7825d061c35.png)
![スクリーンショット 2023-07-04 13.30.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823837/3aa25b2a-f9cd-1d75-e5ff-9352172f4bd3.png)

# childNodesの実験コード②
<b>実験内容②</b>
・childNodes[0]を使って子要素のテキストコンテンツをアクセスするにはhtmlをどのように書けば良いのか
<b>実験結果②</b>
・親要素のdivタグと子要素のpタグの間に改行とタブを設定しない。
・コードが読みにくくなる。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>childNodes</title>
</head>
<body>
	<div id="menu-list"><p>curry</p><p>soup</p><p>sandwich</p></div>
</body>
<script>
	const dinner = document.getElementById("menu-list")
	const todayDinner0 = dinner.childNodes[0].textContent
	const todayDinner1 = dinner.childNodes[1].textContent

	console.log(todayDinner0)
	console.log(todayDinner1)
</script>
</html>
```
<b>ブラウザ②</b>
![スクリーンショット 2023-07-04 16.49.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823837/8e1424f4-eec1-a1fc-6f7c-664c0b4cb899.png)
![スクリーンショット 2023-07-04 16.50.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823837/28c2ef61-f850-6ac2-c9b8-e737e697e92a.png)


# childrenの実験コード
<b>実験内容</b>
・childrenを使って子要素のテキストコンテンツを添字0からアクセスできるか。
<b>実験結果</b>
・childrenの添字は0からアクセスできる。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>children</title>
</head>
<body>
	<div id="memu-list">
		<p>curry</p>
		<p>soup</p>
		<p>sandWich</p>
	</div>
</body>
<script>
	const diner = document.getElementById("memu-list")
	// childrenにしたら添字を0にしてもアクセスできる説
	const todayDiner = diner.children[0].textContent

	console.log(todayDiner)
</script>
</html>
```
<b>ブラウザ</b>
![スクリーンショット 2023-07-03 17.48.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823837/4359114f-e7d5-adff-8a89-95b1f3ab2f98.png)