Textノードについて
Textノードについて、調べてみます。
あるHTMLドキュメントに対して、要素のコンテンツを取得する際、Textノードとして取得し、処理する場面があります。
また、Textノード自身がさらにTextノード(子要素)を持ち、その子要素のTextノードがさらにTextノード(孫要素)をもつ場合があります。
ここでは要素のコンテンツを取得する方法としてtextContent()の動きを確かめてみます。
以下のサンプルを用意して、試してみました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<div id="test1">
<div id="p1" name="p1name">p1text</div>
</div>
<script type="text/javascript">
// ID「p1」のオブジェクトを取得
let p1 = document.getElementById("p1");
// 取得したオブジェクトのattributesを確認
console.log("p1 -> " + p1.textContent);
</script>
</body>
</html>
出力結果は次のようになります。
p1 -> p1text
もう少し詳しく試してみると、
textContent()関数は、divタグ内のHTML要素を除く内容を取得します。
例えば、下記のように「p1text」に対してHTMLタグがあった場合でも、
<div id="test1"> <div id="p1" name="p1name"><b>p1text</b></div> </div>
出力結果は
p1 -> p1text
という形で出力されます。
では次に、元のHTMLファイルを以下のように変更します。
「p1text」の後にさらにdivタグを入れ子にして要素を作ります。
そして先ほどの例のようにtextContent関数を試してみます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>
<div id="test1">
<div id="p1" name="p1name">p1text<div id="p2" name="p2name">p2text</div></div>
</div>
<script type="text/javascript">
// ID「p1」のオブジェクトを取得
let p1 = document.getElementById("p1");
// 取得したオブジェクトのattributesを確認
console.log("p1 -> " + p1.textContent);
</script>
</body>
</html>
出力結果は
p1 -> p1textp2text
という形になります。
サンプルの文字列の例がよくないですが、p1タグの内容を取得すると、その入れ子にした中のp2タグの内容も取得していることがわかります。