最初の子ノードと最後の子ノードを取得する
【開発環境】
OS:Win11(64ビット)
VSCode1.72.2、
【最初の子ノードと最後の子ノードを取得する】
1,firstChild プロパティ
このノードの 1 つ下の階層にある子ノードの中の最初のノードを取得することが出来る。
書式;node.firstChild
2,lastChildプロパティ】
このノードの 1 つ下の階層にある子ノードの中の最後のノードを取得することが出来る。
書式;node.lastChild
これらの戻り値として Node オブジェクトを返します。子ノードがなかった場合は null が返ります。
例えば特定のノードの子ノードの中で最初と最後の子ノードを取得するには次のように記述します。
let element = document.getElementById('main'); let first = element.firstChild; let last = element.lastChild;
【同じ階層の次のノードと前のノードを取得する】
3,nextSibling プロパティ
このノードと同じ階層にある次のノードを取得することができます。
書式;node.nextSibling
このプロパティは参照専用です。戻り値として Node オブジェクトを返します。子ノードがなかった場合は null が返ります。
4, previousSibling プロパティ
このノードと同じ階層にある一つ前のノードを取得することができます。
書式:node.previousSibling
このプロパティは参照専用です。戻り値として Node オブジェクトを返します。子ノードがなかった場合は null が返ります。
例えば特定のノードの同じ階層にある次のノードと一つ前のノードを取得するには次のように記述します。
let element = document.getElementById('main'); let next = element.nextSibling; let prev = element.previousSibling;
サンプル
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>nextSibling,previousSibling</title>
</head>
<body>
<p>今日は外でランチを食べました</p>
<div id="box">
<!-- お店の情報 -->
<p>場所:港区南青山</p>
<p>店名:リストランテ南青山</p>
</div>
<button onClick="getElements(1);">要素を取得(前から後)</button>
<button onClick="getElements(2);">要素を取得(後から前)</button>
<script>
function getElements(direct){
let element = document.getElementById('box');
if (direct == 1){
let child = element.firstChild;
while (child){
console.log(child.nodeName);
child = child.nextSibling;
}
}else{
let child = element.lastChild;
while (child){
console.log(child.nodeName);
child = child.previousSibling;
}
}
}
</script>
</body>
</html>
ブラウザを立ち上げる
左ボタンをクリック
id 属性の値が box の要素ノードを取得したあと、要素ノードの最初の子ノードを取得します。そして同じ階層のノードを前から後ろに向かって順に取得していきます。取得したノードはノードの名前を出力しています。
注意)p 要素の前後にある空白や改行、タブなどの連続する空白文字は一つの空白ノードとして扱われます。(空白ノードはテキストノードのひとつです)。
次に右ボタンを押す
id 属性の値が box の要素ノードを取得したあと、要素ノードの最後の子ノードを取得します。そして同じ階層のノードを後ろから前に向かって順に取得していきます。取得したノードはノードの名前を出力しています。
以上
【親ノードを取得する】
Node オブジェクトの parentNode プロパティを参照することで、このノードの親ノードを取得することができます。
Node オブジェクトの parentNode プロパティを参照することで、このノードの親ノードを取得することができます。
書式;node.parentNode
このプロパティは参照専用です。戻り値として Node オブジェクトを返します。 Document ノードの親ノードを取得した場合は null が返ります。
サンプル
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>parentNode
</head>
<body>
<p>今日は外でランチを食べました</p>
<div>
<!-- お店の情報 -->
<p>場所:港区南青山</p>
<p id="shop">店名:リストランテ南青山</p>
</div>
<button onClick="getElements();">要素を取得</button>
<script>
function getElements(direct){
let element = document.getElementById('shop');
let parent = element.parentNode;
while (parent){
console.log(parent.nodeName);
parent = parent.parentNode;
}
}
</script>
</body>
</html>
以上