サンプル４-ー子ノードへのアクセスの例

firstChild:
lastChild:
hasChild:
記事へ戻る --- 愚鈍人ホーム

htmlソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>サンプル４-ー子ノードへのアクセスの例</title>
<script type="text/javascript">
	window.onload = function(){
		// ulタグの子ノードのリストを取得する
	    var ulTag = document.getElementsByTagName("ul")[0];
		
		var childNodesList=''
	    for (var i = 0; i < ulTag.childNodes.length; i++) {
	        var childNode = ulTag.childNodes[i];
	        if (childNode.tagName) {
	            childNodesList+=("childNode["+i+"]:"+ulTag.childNodes[i].innerHTML+"<br>");
	        }
	    }
		document.getElementById("childNodesList").innerHTML=childNodesList;
		
		// firstChildとlastChildとhasChildNodesの値を表示する。
		document.getElementById("firstChild").innerHTML=ulTag.firstChild;
		document.getElementById("lastChild").innerHTML=ulTag.lastChild;
		document.getElementById("hasChildNodes").innerHTML=ulTag.hasChildNodes();
	};
</script>
</head>
<body>
<h1>サンプル４-ー子ノードへのアクセスの例</h1>
<hr />
<ul>
    <li>項目１</li>
    <li>項目２</li>
    <li>項目３</li>
    <li>項目４</li>
</ul>
<div id="childNodesList"></div>
<div>
	firstChild:<span id="firstChild"></span><br />
	lastChild:<span id="lastChild"></span><br />
	hasChild:<span id="hasChildNodes"></span><br />
</div>
</body>
</html>