参考にした動画
学んだこと
・階層がわからないからどこのidを取得したらメモのタイトルが重複してるかチェックできるかわからない。(調査中)
・childNodes | MDN (プロパティ)
・children | MDN (要素)
childNodesの実験コード①
実験内容①
・childNodesを使って子要素のテキストコンテンツを添字でアクセスできるか。
実験結果①
・添字でアクセスできる。
・childNodesの実験コード①のようにdivタグの親要素の中に改行と
インデントをしてpタグで子要素を作った場合、childNodesの添字を0から指定すると改行にアクセスすることになる。
<!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>
ブラウザ
childNodesの実験コード②
実験内容②
・childNodes[0]を使って子要素のテキストコンテンツをアクセスするにはhtmlをどのように書けば良いのか
実験結果②
・親要素のdivタグと子要素のpタグの間に改行とタブを設定しない。
・コードが読みにくくなる。
<!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>
ブラウザ②
childrenの実験コード
実験内容
・childrenを使って子要素のテキストコンテンツを添字0からアクセスできるか。
実験結果
・childrenの添字は0からアクセスできる。
<!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>
ブラウザ
