childNodesによる探索

javascript
Posted

childNodesによる探索

親要素からみて子要素(childNodes)を取得する方法を試してみます。

まずは、下記のHTMLを用意しました。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>

<div id="test1">
	<div id="p1">p1text</div>
	<div id="p2">p2text
		<div id="c1">c1text</div>
		<div id="c2">c2text</div>
		<div id="c3">c3text</div>
		<div id="c4">c4text</div>
	</div>
	<div id="p3">p3text</div>
</div>

</body>
</html>

サーバ上のHTMLはこちら(test1)

このHTMLに対して、idがp2のdivタグを親として、子要素をchildNodesを使って取得してみます。

まずは、下記のようにjavascriptを追記しました。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>

<div id="test1">
	<div id="p1">p1text</div>
	<div id="p2">p2text
		<div id="c1">c1text</div>
		<div id="c2">c2text</div>
		<div id="c3">c3text</div>
		<div id="c4">c4text</div>
	</div>
	<div id="p3">p3text</div>
</div>

<script type="text/javascript">
	let p2 = document.getElementById("p2");
	console.log("p2.childNodes -> " + p2.childNodes);
</script>

</body>
</html>

サーバ上のHTMLはこちら(test2)

この結果、開発ツールのログには、以下のように出力されます。

p2.childNodes -> [object NodeList]

親要素のp2に対して、NodeListが取得できていることがわかります。

次に、この p2.childNodes の内容を詳しく出力してみます。
先ほどのHTMLに追記して、下記のように変更しました。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>

<div id="test1">
	<div id="p1">p1text</div>
	<div id="p2">p2text
		<div id="c1">c1text</div>
		<div id="c2">c2text</div>
		<div id="c3">c3text</div>
		<div id="c4">c4text</div>
	</div>
	<div id="p3">p3text</div>
</div>

<script type="text/javascript">
	let p2 = document.getElementById("p2");
	console.log("p2.childNodes -> " + p2.childNodes);
	console.log("p2.childNodes -> " + p2.childNodes[0]);
</script>

</body>
</html>

サーバ上のHTMLはこちら(test3)

ログには次のように表示されました。

p2.childNodes -> [object NodeList]
p2.childNodes -> [object Text]

p2.childNodesの1つ目の要素にアクセスし、そのオブジェクトの内容が [object Text] であることがわかりました。

それでは、さらに追記して下記のように変更しました。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>

<div id="test1">
	<div id="p1">p1text</div>
	<div id="p2">p2text
		<div id="c1">c1text</div>
		<div id="c2">c2text</div>
		<div id="c3">c3text</div>
		<div id="c4">c4text</div>
	</div>
	<div id="p3">p3text</div>
</div>

<script type="text/javascript">
	let p2 = document.getElementById("p2");

	// divタグ「p2」の childNodes を出力
	console.log("p2.childNodes -> " + p2.childNodes);

	// childNodesを配列とみたてて各要素にアクセスする
	console.log("p2.childNodes 0 -> " + p2.childNodes[0]);
	console.log("p2.childNodes 1 -> " + p2.childNodes[0]['data']);

	// 「p2.childNodes」の内容を確認する
	for(var key in p2.childNodes[0]){
		console.log(key + " : " + p2.childNodes[0][key]);
	}
</script>

</body>
</html>

サーバ上のHTMLはこちら(test4)

ログには次のように表示されました。

2.childNodes -> [object NodeList]
p2.childNodes 0 -> [object Text]
p2.childNodes 1 -> p2text

wholeText : p2text

assignedSlot : null
splitText : function splitText() { [native code] }
data : p2text

length : 5
previousElementSibling : null
nextElementSibling : [object HTMLDivElement]
after : function after() { [native code] }
appendData : function appendData() { [native code] }
before : function before() { [native code] }
deleteData : function deleteData() { [native code] }
insertData : function insertData() { [native code] }
remove : function remove() { [native code] }
replaceData : function replaceData() { [native code] }
replaceWith : function replaceWith() { [native code] }
substringData : function substringData() { [native code] }
nodeType : 3
nodeName : #text
baseURI : https://propansystem.net/blogsample/js/024/test4.html
isConnected : true
ownerDocument : [object HTMLDocument]
parentNode : [object HTMLDivElement]
parentElement : [object HTMLDivElement]
childNodes : [object NodeList]
firstChild : null
lastChild : null
previousSibling : null
nextSibling : [object HTMLDivElement]
nodeValue : p2text
		
textContent : p2text
		
ELEMENT_NODE : 1
ATTRIBUTE_NODE : 2
TEXT_NODE : 3
CDATA_SECTION_NODE : 4
ENTITY_REFERENCE_NODE : 5
ENTITY_NODE : 6
PROCESSING_INSTRUCTION_NODE : 7
COMMENT_NODE : 8
DOCUMENT_NODE : 9
DOCUMENT_TYPE_NODE : 10
DOCUMENT_FRAGMENT_NODE : 11
NOTATION_NODE : 12
DOCUMENT_POSITION_DISCONNECTED : 1
DOCUMENT_POSITION_PRECEDING : 2
DOCUMENT_POSITION_FOLLOWING : 4
DOCUMENT_POSITION_CONTAINS : 8
DOCUMENT_POSITION_CONTAINED_BY : 16
DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC : 32
appendChild : function appendChild() { [native code] }
cloneNode : function cloneNode() { [native code] }
compareDocumentPosition : function compareDocumentPosition() { [native code] }
contains : function contains() { [native code] }
getRootNode : function getRootNode() { [native code] }
hasChildNodes : function hasChildNodes() { [native code] }
insertBefore : function insertBefore() { [native code] }
isDefaultNamespace : function isDefaultNamespace() { [native code] }
isEqualNode : function isEqualNode() { [native code] }
isSameNode : function isSameNode() { [native code] }
lookupNamespaceURI : function lookupNamespaceURI() { [native code] }
lookupPrefix : function lookupPrefix() { [native code] }
normalize : function normalize() { [native code] }
removeChild : function removeChild() { [native code] }
replaceChild : function replaceChild() { [native code] }
addEventListener : function addEventListener() { [native code] }
dispatchEvent : function dispatchEvent() { [native code] }
removeEventListener : function removeEventListener() {

p2.childNodes 1 -> p2text と表示されている行から、 p2.childNodes[0][‘data’] を出力すると、

タグのテキスト情報「p2text」を取得していることがわかります。

では次に、div id=”c1″ の内容を取得してみます。

先ほどのHTMLを変更して、次のHTMLを設置しました。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>

<div id="test1">
	<div id="p1">p1text</div>
	<div id="p2">p2text
		<div id="c1">c1text</div>
		<div id="c2">c2text</div>
		<div id="c3">c3text</div>
		<div id="c4">c4text</div>
	</div>
	<div id="p3">p3text</div>
</div>

<script type="text/javascript">
	let p2 = document.getElementById("p2");

	// divタグ「p2」の childNodes を出力
	console.log("p2.childNodes -> " + p2.childNodes);

	// childNodesを配列とみたてて各要素にアクセスする
	console.log("p2.childNodes 0 -> " + p2.childNodes[0]);
	console.log("p2.childNodes 0 -> " + p2.childNodes[0]['data']);

	console.log("p2.childNodes 1 -> " + p2.childNodes[1]);
	console.log("p2.childNodes 1 -> " + p2.childNodes[1].innerHTML);
</script>

</body>
</html>

サーバ上のHTMLはこちら(test5)

出力結果は次のようになります。

p2.childNodes -> [object NodeList]
p2.childNodes 0 -> [object Text]
p2.childNodes 0 -> p2text

p2.childNodes 1 -> [object HTMLDivElement]
p2.childNodes 1 -> c1text

p2.childNodes[1] という形で、配列の1つ目にアクセスすると、

タグにアクセスしていることがわかります。
さらに、p2.childNodes[1].innerHTML で要素内のHTMLを取得してみると「c1text」というHTML内の値を取得できていることがわかります。

同様に、他の要素にもアクセスしてみます。
HTMLを次のように変更します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>

<div id="test1">
	<div id="p1">p1text</div>
	<div id="p2">p2text
		<div id="c1">c1text</div>
		<div id="c2">c2text</div>
		<div id="c3">c3text</div>
		<div id="c4">c4text</div>
	</div>
	<div id="p3">p3text</div>
</div>

<script type="text/javascript">
	let p2 = document.getElementById("p2");

	// divタグ「p2」の childNodes を出力
	console.log("p2.childNodes -> " + p2.childNodes);

	// childNodesを配列とみたてて各要素にアクセスする
	console.log("p2.childNodes 0 -> " + p2.childNodes[0]);
	console.log("p2.childNodes 0 -> " + p2.childNodes[0]['data']);

	console.log("p2.childNodes 1 -> " + p2.childNodes[1]);
	console.log("p2.childNodes 1 -> " + p2.childNodes[1].innerHTML);
	console.log("p2.childNodes 2 -> " + p2.childNodes[2]);
	console.log("p2.childNodes 2 -> " + p2.childNodes[2].innerHTML);
	console.log("p2.childNodes 3 -> " + p2.childNodes[3]);
	console.log("p2.childNodes 3 -> " + p2.childNodes[3].innerHTML);
	console.log("p2.childNodes 4 -> " + p2.childNodes[4]);
	console.log("p2.childNodes 4 -> " + p2.childNodes[4].innerHTML);
	console.log("p2.childNodes 5 -> " + p2.childNodes[5]);
	console.log("p2.childNodes 5 -> " + p2.childNodes[5].innerHTML);
	console.log("p2.childNodes 6 -> " + p2.childNodes[6]);
	console.log("p2.childNodes 6 -> " + p2.childNodes[6].innerHTML);
	console.log("p2.childNodes 7 -> " + p2.childNodes[7]);
	console.log("p2.childNodes 7 -> " + p2.childNodes[7].innerHTML);
	console.log("p2.childNodes 8 -> " + p2.childNodes[8]);
	console.log("p2.childNodes 8 -> " + p2.childNodes[8].innerHTML);
</script>

</body>
</html>

サーバ上のHTMLはこちら(test6)

出力結果は次のようになります。

p2.childNodes -> [object NodeList]
p2.childNodes 0 -> [object Text]
p2.childNodes 0 -> p2text

p2.childNodes 1 -> [object HTMLDivElement]
p2.childNodes 1 -> c1text
p2.childNodes 2 -> [object Text]
p2.childNodes 2 -> undefined
p2.childNodes 3 -> [object HTMLDivElement]
p2.childNodes 3 -> c2text
p2.childNodes 4 -> [object Text]
p2.childNodes 4 -> undefined
p2.childNodes 5 -> [object HTMLDivElement]
p2.childNodes 5 -> c3text
p2.childNodes 6 -> [object Text]
p2.childNodes 6 -> undefined
p2.childNodes 7 -> [object HTMLDivElement]
p2.childNodes 7 -> c4text
p2.childNodes 8 -> [object Text]
p2.childNodes 8 -> undefined

ここでわかることは、p2の要素としてchildNodesを取得した結果として、
p2.childNodes[1].innerHTML の値は、要素c1タグの「c1text」が取得できていますが、
p2.childNodes[2].innerHTML の値は未定義(undefined)になることです。

p2.childNodes[3].innerHTML の値を取得して初めて、画面上の次の値である「c2text」が取得できました。
同様に、c4textの値も、childNodesの7つ目の要素「p2.childNodes[7].innerHTML」で初めて取得できています。

p2の要素としてchildNodesを取得する際、一見すると配列の値として順番に画面上の値が取得できそうですが、
厳密にDOM要素の順番に要素を取得していることがわかります。

また、「p2.childNodes[1]」の中にどんな情報が格納されているかを確かめてみます。
HTMLを次のように変更しました。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>

<div id="test1">
	<div id="p1">p1text</div>
	<div id="p2">p2text
		<div id="c1">c1text</div>
		<div id="c2">c2text</div>
		<div id="c3">c3text</div>
		<div id="c4">c4text</div>
	</div>
	<div id="p3">p3text</div>
</div>

<script type="text/javascript">
	let p2 = document.getElementById("p2");

	// divタグ「p2」の childNodes を出力
	console.log("p2.childNodes -> " + p2.childNodes);

	// childNodesを配列とみたてて各要素にアクセスする
	console.log("p2.childNodes 0 -> " + p2.childNodes[0]);
	console.log("p2.childNodes 0 -> " + p2.childNodes[0]['data']);

	console.log("p2.childNodes 1 -> " + p2.childNodes[1]);
	console.log("p2.childNodes 1 -> " + p2.childNodes[1].innerHTML);

	// 「p2.childNodes[1]」の内容を確認する
	for(var key in p2.childNodes[1]){
		console.log(key + " : " + p2.childNodes[1][key]);
	}
</script>

</body>
</html>

サーバ上のHTMLはこちら(test7)

出力結果は次のようになります。

p2.childNodes -> [object NodeList]
p2.childNodes 0 -> [object Text]
p2.childNodes 0 -> p2text

p2.childNodes 1 -> [object HTMLDivElement]
p2.childNodes 1 -> c1text
align : 
title : 
lang : 
translate : true
dir : 
hidden : false
accessKey : 
draggable : false
spellcheck : true
autocapitalize : 
contentEditable : inherit
isContentEditable : false
inputMode : 
offsetParent : [object HTMLBodyElement]
offsetTop : 56
offsetLeft : 8
offsetWidth : 997
offsetHeight : 24
style : [object CSSStyleDeclaration]
innerText : c1text
outerText : c1text
onbeforexrselect : null
onabort : null
onblur : null
oncancel : null
oncanplay : null
oncanplaythrough : null
onchange : null
onclick : null
onclose : null
oncontextmenu : null
oncuechange : null
ondblclick : null
ondrag : null
ondragend : null
ondragenter : null
ondragleave : null
ondragover : null
ondragstart : null
ondrop : null
ondurationchange : null
onemptied : null
onended : null
onerror : null
onfocus : null
onformdata : null
oninput : null
oninvalid : null
onkeydown : null
onkeypress : null
onkeyup : null
onload : null
onloadeddata : null
onloadedmetadata : null
onloadstart : null
onmousedown : null
onmouseenter : null
onmouseleave : null
onmousemove : null
onmouseout : null
onmouseover : null
onmouseup : null
onmousewheel : null
onpause : null
onplay : null
onplaying : null
onprogress : null
onratechange : null
onreset : null
onresize : null
onscroll : null
onseeked : null
onseeking : null
onselect : null
onstalled : null
onsubmit : null
onsuspend : null
ontimeupdate : null
ontoggle : null
onvolumechange : null
onwaiting : null
onwebkitanimationend : null
onwebkitanimationiteration : null
onwebkitanimationstart : null
onwebkittransitionend : null
onwheel : null
onauxclick : null
ongotpointercapture : null
onlostpointercapture : null
onpointerdown : null
onpointermove : null
onpointerup : null
onpointercancel : null
onpointerover : null
onpointerout : null
onpointerenter : null
onpointerleave : null
onselectstart : null
onselectionchange : null
onanimationend : null
onanimationiteration : null
onanimationstart : null
ontransitionrun : null
ontransitionstart : null
ontransitionend : null
ontransitioncancel : null
oncopy : null
oncut : null
onpaste : null
dataset : [object DOMStringMap]
nonce : 
autofocus : false
tabIndex : -1
attachInternals : function attachInternals() { [native code] }
blur : function blur() { [native code] }
click : function click() { [native code] }
focus : function focus() { [native code] }
onpointerrawupdate : null
enterKeyHint : 
namespaceURI : http://www.w3.org/1999/xhtml
prefix : null
localName : div
tagName : DIV
id : c1
className : 
classList : 
slot : 
attributes : [object NamedNodeMap]
shadowRoot : null
part : 
assignedSlot : null
innerHTML : c1text
outerHTML : <div id="c1">c1text</div>
scrollTop : 0
scrollLeft : 0
scrollWidth : 997
scrollHeight : 24
clientTop : 0
clientLeft : 0
clientWidth : 997
clientHeight : 24
attributeStyleMap : [object StylePropertyMap]
onbeforecopy : null
onbeforecut : null
onbeforepaste : null
onsearch : null
elementTiming : 
onfullscreenchange : null
onfullscreenerror : null
onwebkitfullscreenchange : null
onwebkitfullscreenerror : null
children : [object HTMLCollection]
firstElementChild : null
lastElementChild : null
childElementCount : 0
previousElementSibling : null
nextElementSibling : [object HTMLDivElement]
after : function after() { [native code] }
animate : function animate() { [native code] }
append : function append() { [native code] }
attachShadow : function attachShadow() { [native code] }
before : function before() { [native code] }
closest : function closest() { [native code] }
computedStyleMap : function computedStyleMap() { [native code] }
getAttribute : function getAttribute() { [native code] }
getAttributeNS : function getAttributeNS() { [native code] }
getAttributeNames : function getAttributeNames() { [native code] }
getAttributeNode : function getAttributeNode() { [native code] }
getAttributeNodeNS : function getAttributeNodeNS() { [native code] }
getBoundingClientRect : function getBoundingClientRect() { [native code] }
getClientRects : function getClientRects() { [native code] }
getElementsByClassName : function getElementsByClassName() { [native code] }
getElementsByTagName : function getElementsByTagName() { [native code] }
getElementsByTagNameNS : function getElementsByTagNameNS() { [native code] }
hasAttribute : function hasAttribute() { [native code] }
hasAttributeNS : function hasAttributeNS() { [native code] }
hasAttributes : function hasAttributes() { [native code] }
hasPointerCapture : function hasPointerCapture() { [native code] }
insertAdjacentElement : function insertAdjacentElement() { [native code] }
insertAdjacentHTML : function insertAdjacentHTML() { [native code] }
insertAdjacentText : function insertAdjacentText() { [native code] }
matches : function matches() { [native code] }
prepend : function prepend() { [native code] }
querySelector : function querySelector() { [native code] }
querySelectorAll : function querySelectorAll() { [native code] }
releasePointerCapture : function releasePointerCapture() { [native code] }
remove : function remove() { [native code] }
removeAttribute : function removeAttribute() { [native code] }
removeAttributeNS : function removeAttributeNS() { [native code] }
removeAttributeNode : function removeAttributeNode() { [native code] }
replaceChildren : function replaceChildren() { [native code] }
replaceWith : function replaceWith() { [native code] }
requestFullscreen : function requestFullscreen() { [native code] }
requestPointerLock : function requestPointerLock() { [native code] }
scroll : function scroll() { [native code] }
scrollBy : function scrollBy() { [native code] }
scrollIntoView : function scrollIntoView() { [native code] }
scrollIntoViewIfNeeded : function scrollIntoViewIfNeeded() { [native code] }
scrollTo : function scrollTo() { [native code] }
setAttribute : function setAttribute() { [native code] }
setAttributeNS : function setAttributeNS() { [native code] }
setAttributeNode : function setAttributeNode() { [native code] }
setAttributeNodeNS : function setAttributeNodeNS() { [native code] }
setPointerCapture : function setPointerCapture() { [native code] }
toggleAttribute : function toggleAttribute() { [native code] }
webkitMatchesSelector : function webkitMatchesSelector() { [native code] }
webkitRequestFullScreen : function webkitRequestFullScreen() { [native code] }
webkitRequestFullscreen : function webkitRequestFullscreen() { [native code] }
ariaAtomic : null
ariaAutoComplete : null
ariaBusy : null
ariaChecked : null
ariaColCount : null
ariaColIndex : null
ariaColSpan : null
ariaCurrent : null
ariaDescription : null
ariaDisabled : null
ariaExpanded : null
ariaHasPopup : null
ariaHidden : null
ariaKeyShortcuts : null
ariaLabel : null
ariaLevel : null
ariaLive : null
ariaModal : null
ariaMultiLine : null
ariaMultiSelectable : null
ariaOrientation : null
ariaPlaceholder : null
ariaPosInSet : null
ariaPressed : null
ariaReadOnly : null
ariaRelevant : null
ariaRequired : null
ariaRoleDescription : null
ariaRowCount : null
ariaRowIndex : null
ariaRowSpan : null
ariaSelected : null
ariaSetSize : null
ariaSort : null
ariaValueMax : null
ariaValueMin : null
ariaValueNow : null
ariaValueText : null
getInnerHTML : function getInnerHTML() { [native code] }
getAnimations : function getAnimations() { [native code] }
nodeType : 1
nodeName : DIV
baseURI : https://propansystem.net/blogsample/js/024/test7.html
isConnected : true
ownerDocument : [object HTMLDocument]
parentNode : [object HTMLDivElement]
parentElement : [object HTMLDivElement]
childNodes : [object NodeList]
firstChild : [object Text]
lastChild : [object Text]
previousSibling : [object Text]
nextSibling : [object Text]
nodeValue : null
textContent : c1text
ELEMENT_NODE : 1
ATTRIBUTE_NODE : 2
TEXT_NODE : 3
CDATA_SECTION_NODE : 4
ENTITY_REFERENCE_NODE : 5
ENTITY_NODE : 6
PROCESSING_INSTRUCTION_NODE : 7
COMMENT_NODE : 8
DOCUMENT_NODE : 9
DOCUMENT_TYPE_NODE : 10
DOCUMENT_FRAGMENT_NODE : 11
NOTATION_NODE : 12
DOCUMENT_POSITION_DISCONNECTED : 1
DOCUMENT_POSITION_PRECEDING : 2
DOCUMENT_POSITION_FOLLOWING : 4
DOCUMENT_POSITION_CONTAINS : 8
DOCUMENT_POSITION_CONTAINED_BY : 16
DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC : 32
appendChild : function appendChild() { [native code] }
cloneNode : function cloneNode() { [native code] }
compareDocumentPosition : function compareDocumentPosition() { [native code] }
contains : function contains() { [native code] }
getRootNode : function getRootNode() { [native code] }
hasChildNodes : function hasChildNodes() { [native code] }
insertBefore : function insertBefore() { [native code] }
isDefaultNamespace : function isDefaultNamespace() { [native code] }
isEqualNode : function isEqualNode() { [native code] }
isSameNode : function isSameNode() { [native code] }
lookupNamespaceURI : function lookupNamespaceURI() { [native code] }
lookupPrefix : function lookupPrefix() { [native code] }
normalize : function normalize() { [native code] }
removeChild : function removeChild() { [native code] }
replaceChild : function replaceChild() { [native code] }
addEventListener : function addEventListener() { [native code] }
dispatchEvent : function dispatchEvent() { [native code] }
removeEventListener : function removeEventListener() { [native code] }

keyの名前の出力部分を見てわかるとおり、[object HTMLDivElement]の一連の要素名が格納されていることがわかります。

実際のプログラムの実装ではchildNodes内の各要素を正確に把握して、取得した要素内の[object HTMLDivElement]の値を必要に応じて取得して実装を行います。

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です