Verifying th type of the Node
you have created a web page that contains some nodes(or elements)containing text.
you want to know the type of node, which you are using in your webpage
web page is a group of various nodes. such as element node, attribute node, text node, comment node, document node, where each node is representd by a numaric value.
to know the type of the node, you need to check the numeric value of the node with the help of the nodeType property of node interface, which returns a integer value that represent the node type.
<!DOCTYPE HTML>
<HEAD>
<TITLE>checking the node type</TITLE>
<SCRIPT type="text/javascript">
function checkNodeType()
{
var tag=document.getElementById("T1");
var value= tag.nodeType;
if(value== 1)
document.write("This is the Element Node type");
if(value== 2)
document.write("This is the Attribute Node type");
if(value== 3)
document.write("This is the Text Node type");
if(value== 8)
document.write("This is the Comment Node type");
if(value== 9)
document.write("This is the Document Node type");
}
</SCRIPT>
</HEAD>
<BODY>
<H1>Checking the DOM Node Type</H1>
<P id="T1"> Welcome to the world of DOM</P>
<INPUT type= "button" onclick="checkNodeType();" value="Check Node Type!">
</BODY>
</HTML>
Verifying the child nodes of a node
you can check whether a node has child nodes or not by using the hasChildNodes() function, which returns true if the node has child nodes; otherwise it rturns false.
<!DOCTYPE HTML>
<HEAD>
<TITLE>verifying the child node</TITLE>
<SCRIPT type="text/javascript">
function checkNode(value)
{
var tag=document.getElementById(value);
if(tag.hasChildNodes())
{
alert("Node has child nodes");
}
else
{
alert("Node has no child nodes");
}
}
</SCRIPT>
</HEAD>
<BODY id="T1">
<H1>Checking the Child Nodes</H1>
<H3> Welcome to the world of DOM</H3>
<P>Click this button to check the child nodes of the BODY Element:</P>
<INPUT type="button" onclick="checkNode('T1');" value="Check Child Node">
<P>Click this button to check the child nodes of the INPUT Element:</P>
<INPUT id="T2" type="button" onclick="checkNode('T2');" value="Check Child Node">
</BODY>
</HTML>
Changing the text of an element
you have created a webpage that displays some text to the user and also has a submit button.
the text of the webpage change automatically on clicking the submit button.
<!DOCTYPE HTML>
<HEAD>
<TITLE>changing the text</TITLE>
<SCRIPT type="text/javascript">
function changeText()
{
document.getElementById("T1").innerHTML="Text is changed";
document.getElementById("B1").value="Clicked";
}
</SCRIPT>
</HEAD>
<BODY>
<H1>Changing the Text of the Elements</H1>
<P id="T1"> Click the button to change the text </P>
<INPUT id="B1" type= "button" onclick="changeText();" value="Click Me!">
</BODY>
</HTML>
you have created a web page that contains some nodes(or elements)containing text.
you want to know the type of node, which you are using in your webpage
web page is a group of various nodes. such as element node, attribute node, text node, comment node, document node, where each node is representd by a numaric value.
to know the type of the node, you need to check the numeric value of the node with the help of the nodeType property of node interface, which returns a integer value that represent the node type.
<!DOCTYPE HTML>
<HEAD>
<TITLE>checking the node type</TITLE>
<SCRIPT type="text/javascript">
function checkNodeType()
{
var tag=document.getElementById("T1");
var value= tag.nodeType;
if(value== 1)
document.write("This is the Element Node type");
if(value== 2)
document.write("This is the Attribute Node type");
if(value== 3)
document.write("This is the Text Node type");
if(value== 8)
document.write("This is the Comment Node type");
if(value== 9)
document.write("This is the Document Node type");
}
</SCRIPT>
</HEAD>
<BODY>
<H1>Checking the DOM Node Type</H1>
<P id="T1"> Welcome to the world of DOM</P>
<INPUT type= "button" onclick="checkNodeType();" value="Check Node Type!">
</BODY>
</HTML>
Verifying the child nodes of a node
you can check whether a node has child nodes or not by using the hasChildNodes() function, which returns true if the node has child nodes; otherwise it rturns false.
<!DOCTYPE HTML>
<HEAD>
<TITLE>verifying the child node</TITLE>
<SCRIPT type="text/javascript">
function checkNode(value)
{
var tag=document.getElementById(value);
if(tag.hasChildNodes())
{
alert("Node has child nodes");
}
else
{
alert("Node has no child nodes");
}
}
</SCRIPT>
</HEAD>
<BODY id="T1">
<H1>Checking the Child Nodes</H1>
<H3> Welcome to the world of DOM</H3>
<P>Click this button to check the child nodes of the BODY Element:</P>
<INPUT type="button" onclick="checkNode('T1');" value="Check Child Node">
<P>Click this button to check the child nodes of the INPUT Element:</P>
<INPUT id="T2" type="button" onclick="checkNode('T2');" value="Check Child Node">
</BODY>
</HTML>
Changing the text of an element
you have created a webpage that displays some text to the user and also has a submit button.
the text of the webpage change automatically on clicking the submit button.
<!DOCTYPE HTML>
<HEAD>
<TITLE>changing the text</TITLE>
<SCRIPT type="text/javascript">
function changeText()
{
document.getElementById("T1").innerHTML="Text is changed";
document.getElementById("B1").value="Clicked";
}
</SCRIPT>
</HEAD>
<BODY>
<H1>Changing the Text of the Elements</H1>
<P id="T1"> Click the button to change the text </P>
<INPUT id="B1" type= "button" onclick="changeText();" value="Click Me!">
</BODY>
</HTML>
No comments:
Post a Comment