Hi beanryu,
i prepared some document sample for you, which you can used as referenced when you are mapping elements inside your document.
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="#css21" media="all"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html id="xhtml10" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<!-- W3Cs Standard Template : XHTML 1.0 Transitional DTD -->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Walk the DOM</title>
<style id="css21" type="text/css" media="all">
/* <![CDATA[ */
html, body {
border : none;
color : #405060;
font : normal normal normal 90%/1.4 Verdana, Helvetica, Arial, sans-serif;
height : auto;
margin : 0;
min-height : 206px;
min-width : 176px;
padding : 0;
text-align : center;
width : auto; }
body { background-color : #FFFFFF; }
h2.logo {
border-top : 1px solid #000;
border-bottom : 1px solid #000;
letter-spacing : 2px;
padding : .200em 1em .200em 1em;
margin-bottom : 1.500em;
background-color : #405060;
color : #fff; }
div {
border : none;
margin : 0;
padding : 0; }
div#main {
margin : 0 auto;
background-color : transparent !important;
height : 100%;
width : 100%; }
div.pad {
padding : 1.200em; }
div.bordered {
min-height : 600px;
border : 1px solid;
padding : 1em;
text-align : left; }
.no-top-margin { margin-top : 0; }
/* ]]> */
</style>
<script type="text/javascript">
// <![CDATA[
var dom = function() {
var mydiv = document.getElementsByTagName("div")[ "mydiv" ];
if( "createElement" in document ) { // See if the document model supports the "createElement" method.
var paragraph = document.createElement( "p" ); // dynamic paragraph.
var p = mydiv.getElementsByTagName( paragraph.nodeName );
/* our paragraph collections referenced by an index position ( when the dynamic paragraph is appended inside mydiv, then indexPos : 0 - will become the dynamic paragraph, 1 - is the second, and 2 - for the third and last paragraph inside mydiv ). */
paragraph.appendChild( document.createTextNode( "First Paragraph"));
mydiv.insertBefore( paragraph, p[ 0 ] );
/* instructing our main div to insert our created paragraph right before the second paragraph--which is preloaded on the document. */
alert( p[ 0 ].innerText + "\n\n ~ using the innerText method" ); /* The simplest way of getting the text-node inside any of the target paragraph is to use the "innerText" method.
There are many different methods or different techniques, that you can apply to extract all the elements you need inside your documents'. */
for( var x = 0; p[ x ]; x++ ) { // Here's a little demo of extracting only the text content of your paragraph collection.
for( var y = 0; ( nodes = p[ x ].childNodes[ y ] ); y++ ) {
if ( nodes.nodeType === 3 || nodes.nodeType === Node.TEXT_NODE ) {
alert( nodes.nodeValue + "\n\n ~ looping the nodeList item." );
continue;
}
}
}
}
};
window.onload = dom;
// ]]>
</script>
</head>
<body id="xhtml-10-transitional">
<div id="main">
<div class="pad">
<div class="bordered">
<h2 class="no-top-margin logo">JavaScript Live Demo!</h2>
<!-- The only thing that is missing here, is our 1st paragraph. Which we will be needing to append inside the div( mydiv ) using our created function ( dom ). -->
<div id="mydiv">
<p id="Two">Second Paragraph</p>
<p id="Three">Third Paragraph</p>
</div>
</div> <!-- class :: bordered -->
</div> <!-- class :: pad -->
</div> <!-- id :: main -->
</body>
</html>
-essential
