サンプル３-ノードの情報取得の例

<button id="element_node" name="button_name">abc</button>

上記HTMLのbuttonタグのノードの情報は以下のようになります。

要素ノード テキストノード
nodeName
nodeType
nodeValue
tagName
name属性
記事へ戻る --- 愚鈍人ホーム

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>
<style type="text/css">
	pre.code {
	    font-size: 12px;
	    /* line-height:1.2em; */
	    border:1px solid #aaa;
	    background:#f0f0f0;
	    padding:0.5em; 
	    overflow: auto;
	}
	pre.code span.tag		{ color: #0000ff;	}
	pre.code span.attr 		{ color: #000; 		}
	pre.code span.value		{ color: #900; 		}
	pre.code span.str 		{ color: #009900; 	}
	pre.code span.num 		{ color: #009900; 	}
	pre.code span.keyword	{ color: #0000ff; 	}
	pre.code span.rem		{ color: #909; 		}
	pre.code span.variable	{ color: #500050;	}
</style>
<script type="text/javascript">
	window.onload = function() {
	    var elementNode = document.getElementById("element_node");
		document.getElementById("element_nodeName").innerHTML=elementNode.nodeName;
		document.getElementById("element_nodeType").innerHTML=elementNode.nodeType;
		document.getElementById("element_nodeValue").innerHTML=elementNode.nodeValue;
		document.getElementById("element_tagName").innerHTML=elementNode.tagName;
		document.getElementById("element_name").innerHTML=elementNode.name;

	    var textNode = elementNode.firstChild;
		document.getElementById("text_nodeName").innerHTML=textNode.nodeName;
		document.getElementById("text_nodeType").innerHTML=textNode.nodeType;
		document.getElementById("text_nodeValue").innerHTML=textNode.nodeValue;
		document.getElementById("text_tagName").innerHTML=textNode.tagName;
		document.getElementById("text_name").innerHTML=textNode.name;
	};
</script>
</head>
<body>
<h1>サンプル３-ノードの情報取得の例</h1>
<hr />
<button id="element_node" name="button_name">abc</button>
<pre class="code"><span class="tag">&lt;button <span class="attr">id=</span><span class="value">&quot;element_node&quot;</span> <span class="attr">name=</span><span class="value">&quot;button_name&quot;</span>&gt;</span>abc<span class="tag">&lt;/button&gt;</span></pre>
<p>上記HTMLのbuttonタグのノードの情報は以下のようになります。</p>
<table border="1">
	<tr>
		<th></th>
		<th>要素ノード</th>
		<th>テキストノード</th>
	</tr>
	<tr>
		<td>nodeName</td>
		<td	id="element_nodeName"></td>
		<td	id="text_nodeName"></td>
	</tr>
	<tr>
		<td>nodeType</td>
		<td	id="element_nodeType"></td>
		<td	id="text_nodeType"></td>
	</tr>
	<tr>
		<td>nodeValue</td>
		<td	id="element_nodeValue"></td>
		<td	id="text_nodeValue"></td>
	</tr>
	<tr>
		<td>tagName</td>
		<td	id="element_tagName"></td>
		<td	id="text_tagName"></td>
	</tr>
	<tr>
		<td>name属性</td>
		<td	id="element_name"></td>
		<td	id="text_name"></td>
	</tr>
</table>
<div id="element_node_result"></div>
<div id="text_node_result"></div>
</body>
</html>