JavaScript Tutorial/DOM Node/Introduction
Get node name
<html>
<head>
<title>The Node</title>
<script type="text/javascript">
function outputNodeProps(nd) {
var strNode = "Node Type: " + nd.nodeType;
strNode += "\nNode Name: " + nd.nodeName;
strNode += "\nNode Value: " + nd.nodeValue;
if (nd.style) {
var clr = "red";
nd.style.backgroundColor=clr;
strNode += "\nbackgroundColor: " + clr;
}
alert(strNode);
}
</script>
<body onload="outputNodeProps(document)">
<div id="div1">
<h1>Header</h1>
</div>
</body>
</html>
Get node type
<html>
<head>
<title>The Node</title>
<script type="text/javascript">
function outputNodeProps(nd) {
var strNode = "Node Type: " + nd.nodeType;
strNode += "\nNode Name: " + nd.nodeName;
strNode += "\nNode Value: " + nd.nodeValue;
if (nd.style) {
var clr = "red";
nd.style.backgroundColor=clr;
strNode += "\nbackgroundColor: " + clr;
}
alert(strNode);
}
</script>
<body onload="outputNodeProps(document)">
<div id="div1">
<h1>Header</h1>
</div>
</body>
</html>
Get node value
<html>
<head>
<title>The Node</title>
<script type="text/javascript">
function outputNodeProps(nd) {
var strNode = "Node Type: " + nd.nodeType;
strNode += "\nNode Name: " + nd.nodeName;
strNode += "\nNode Value: " + nd.nodeValue;
if (nd.style) {
var clr = "red";
nd.style.backgroundColor=clr;
strNode += "\nbackgroundColor: " + clr;
}
alert(strNode);
}
</script>
<body onload="outputNodeProps(document)">
<div id="div1">
<h1>Header</h1>
</div>
</body>
</html>
InnerText and InnerHTML
innerText returns only the text portions.
innerHTML returns the HTML code for all elements and text.
The following table lists the different values for innerText and innerHTML based on certain code.
Code innerText innerHTML
Hello world
"Hello world" "Hello world"
Hello world
"Hello world" "Hello world"
"" ""
