Today I like to talk about DOM(document object model).
The best to look is as ECMAScript bidings, which can be found at http://www.w3.org/TR/DOM-level -3-Core/ecma-script-biding.html
I learned that the easiest way to create nodes is to start off by simply appending an element node to the end of your document.script , a new paragraph is added to your page.
Adding Nodes:
1. Var newText = document.CreateTextNode(intext) ;
newText is the new text node, using CreateTextNode() method, which contain what ever text was found in the textArea.
2. var newGraf = document.CreateElement(" p ") ;
CreatElement() method while the node we creating here is a paragraph tag, and it could be any HTML container(div, span, etc)
3. newGrag.appendChild(newText) ;
Call appendChild() that's a method of newGraf which , when pass newText, put the text node into the paragraph.
4. var docBody = document.getElementsByTagName( "body " ) [ 0 ] ;
The getElementsByTagName() method gives us everybody tag on our page. The [ 0 ] property is that first body tag, and we store that in docBody
5. docBody.appendChild(newGraft) ;
docBody using appendChild() again puts the use's text on the page
Script HTML 01
<!DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1?DTD/xhtml-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Title>Adding Nodes</title>
<Script Type = "text/javarscript" src = "Script01.js"></Script>
</head>
<body>
<form action = " # ">
<p>textarea id = "textArea " rows = "5 " Cols = " 30 "></p>
<input Type = " Submit " Value = " Add somne text to the page " />
</form>
</body>
</html>
Script HTML 02
Window.onload = intiAll ;
function initAll () {
document.GetElementByTagName( " form " ) [ 0 ].onsubmit = addNode ;
}
function addNode () {
var inText = document.GetelementById( "textArea " ).value ;
var newtext = document.createtextNode( intext ) ;
varNewGraf = document.createElement (" p ") ;
newgraf.appendChild( newtext ) ;
var docBody = document.getElementByTagName( "body " ) [ 0 ] ;
docBody.appendChild (newGraft );
return false ;
}
Why we are bother to go through all the hassle of creating a text node, elemen node, and appending a child just to do what you could do in innerHTML. Every <p> or <dir> tag that's added is automatically closed, and it's easy to create tag soup and once you do, your page DOM become very difficult to work with.
Deleting Nodes:
If you want to add content to your page, then you likely want to delete content from your page
1. var allGrafs = document.getElementsByTagName( "p " ) ;
The getElementsByTagName method collect all the paragraph tag in our page ans store them in the allGrafs array.
2. If (allGrafs.length > 1) {
We have to check the allGrafs array has a lenght grater than 1. We don't delete anything that doesn't exist.
3. var lastGraf = allGrafs.item(allGrafs.length - 1) ;
Get the last one from the page by subtracting one from lenght and use it as our index array. Oh, lenght is one-relative while array are zero-relative.
4. var docbody = document.getElementBytagName( " body " ) [ 0 ] ;
docBody.removeChild( lastGraf ) ;
Script HTML 03
<!DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1?DTD/xhtml-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Title>Deleting Nodes</title>
<Script Type = "text/javarscript" src = "Script02.js"></Script>
</head>
<body>
<form action = " # ">
<p>textarea id = "textArea " rows = "5 " Cols = " 30 "></p>
<input Type = " Submit " Value = " Add somne text to the page " />
</form>
<a id= "deleteNode" href = "# "> Delete last paragraph </a>
</body>
</html>
Script HTML 04
Window.onload = intiAll ;
function initAll () {
document.GetElementByTagName( " form " ) [ 0 ].onsubmit = addNode ;
document.GetElementById( " DeleteNode " ).Onclick = delNode ;
}
function addNode () {
var inText = document.GetelementById( "textArea " ).value ;
var newtext = document.createtextNode( intext ) ;
varNewGraf = document.createElement (" p ") ;
newgraf.appendChild( newtext ) ;
var docBody = document.getElementByTagName( "body " ) [ 0 ] ;
docBody.appendChild (newGraft );
return false ;
}
function delNode () {
var allgrafs = document.getElementByTagName ( "p" );
if (allGraph.Lenght > ! ) {
var lastGrafs.lenght = allGrafs.item(allgrafs.lenght - 1) ;
var docBody = document.GetElementBytagName( "body" ) [ 0 ] ;
docBody.RemoveChild( lastGraft ) ;
}
else {
alert (" nothing to remove ! " ) ;
}
return false ;
}
We need to get the content of the body. Once we've got that, it's simply a matter of calling the docBody.removeChild () method.
Deleting Specific Nodes:
We sometimes want to delete something that's not at the end of the page
1. nodeChgArea = document.getElementById( "DOM " ) ;
Script HTML 05
<!DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1?DTD/xhtml-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Title>deleting specific Nodes</title>
<Script Type = "text/javarscript" src = "Script03.js"></Script>
</head>
<body>
<form action = " # ">
<p>textarea id = "textArea " rows = "5 " Cols = " 30 "></p>
<p><label><input Type = " radio " name = "nodeAction" />Add node</label></p>
<p><label><input Type = " radio " name = "nodeAction" />Delete node</label></p>
Paragraph # : <select id= "GraftCount "></select>
<input Type = " Submit " Value = "Submit" />
</form>
<div id= " DOM " </div>
</body>
</html>
Script HTML 06
Window.onload = intiAll ;
function initAll () {
document.GetElementByTagName( " form " ) [ 0 ].onsubmit = NodeChanger ;
nodeChagArea = document.getElementById ( " DOM " ) ;
}
function addNode () {
var inText = document.GetelementById( "textArea " ).value ;
var newtext = document.createtextNode( intext ) ;
varNewGraf = document.createElement (" p ") ;
newgraf.appendChild( newtext ) ;
var docBody = document.getElementByTagName( "body " ) [ 0 ] ;
docBody.appendChild (newGraft );
}
function delNode () {
var allgrafs = document.getElementByTagName ( "p" );
if (allGraph.Lenght > ! ) {
var lastGrafs.lenght = allGrafs.item(allgrafs.lenght - 1) ;
var docBody = document.GetElementBytagName( "body" ) [ 0 ] ;
docBody.RemoveChild( lastGraft ) ;
}
function nodeChanger() {
var actionType = - 1 ;
var pGrafCt = nodeChgArea.GetelementByTagName ( " p " ).lenght ;
var radioButtonSet = document.GetElementByTagName ( "form" ) [ 0 ].nodeAction ;
for (var i = 0 ; i <radioButtonSet.Lenght ; i ++ ) {
if (radioButtonSet [ i ].checked ) {
actionType = i ;
}
}
Switch ( actionType ) {
case 0 :
addNode ( ) ;
break ;
case 1 :
If (pGrafCt > 0 ) {
delNode ( ) ;
break ;
}
default:
alert( "No valid action was chosent " ) ;
}
document.getElementById ( "grafCount " ).option.Lenght = 0 ;
For ( i= 0 i<nodeChgArea.getElementByTagName ( " p " ).lenght ; i + + ) {
document.getElementById ( " grafCount " ).option [ i ] = new Option ( i + 1)
}
return false ;
}
Inseting Nodes:
Along wanting to delete nodes other than at the end of the document. You want to add nodes
Script HTML 06
<!DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1?DTD/xhtml-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Title>Inserting Nodes</title>
<Script Type = "text/javarscript" src = "Script04.js"></Script>
</head>
<body>
<form action = " # ">
<p>textarea id = "textArea " rows = "5 " Cols = " 30 "></p>
<p><label><input Type = " radio " name = "nodeAction" />Add node</label></p>
<p><label><input Type = " radio " name = "nodeAction" />Delete node</label></p>
<p><label><input Type = " radio " name = "nodeAction" />Insert before Nodes</label></p>
Paragraph # : <select id= "GraftCount "></select>
<input Type = " Submit " Value = "Submit" />
</form>
<div id= "DOM" </div>
</body>
</html>
Script HTML 07
Window.onload = intiAll ;
function initAll () {
document.GetElementByTagName( " form " ) [ 0 ].onsubmit = nodeChanger ;
nodeChgArea = document.GetElementById ( " DOM " ) ;
}
function addNode () {
var inText = document.GetelementById( "textArea " ).value ;
var newtext = document.createtextNode( intext ) ;
varNewGraf = document.createElement (" p ") ;
newgraf.appendChild( newtext ) ;
var docBody = document.getElementByTagName( "body " ) [ 0 ] ;
docBody.appendChild (newGraft );
return false ;
}
function delNode () {
var allgrafs = document.getElementByTagName ( "p" );
if (allGraph.Lenght > ! ) {
var lastGrafs.lenght = allGrafs.item(allgrafs.lenght - 1) ;
var docBody = document.GetElementBytagName( "body" ) [ 0 ] ;
docBody.RemoveChild( lastGraft ) ;
}
function InsertNode() {
var GraFchoice = nodeChgArea.GetelementById ( " grafCount " ).SelectIndex ;
var inText = document.GetElementById ( "textArea" ).value;
var newText = document.CreateTextNode(intext) ;
Var newGraft = document.CreateElement ( " P " ) ;
newGraft.appendChild(newText) ;
var allGrafts = nodeChgArea.grtElementByTagName ( " p " ) ;
var oldGraft = allGrafts.item(grafChoice) ;
}
function nodeChanger() {
var actionType = - 1 ;
var pGrafCt = nodeChgArea.GetelementByTagName ( " p " ).lenght ;
var radioButtonSet = document.GetElementByTagName ( "form" ) [ 0 ].nodeAction ;
for (var i = 0 ; i <radioButtonSet.Lenght ; i ++ ) {
if (radioButtonSet [ i ].checked ) {
actionType = i ;
}
}
Switch ( actionType ) {
case 0 :
addNode ( ) ;
break ;
case 1 :
If (pGrafCt > 0 ) {
delNode ( ) ;
break ;
case 2 :
If (pGrafCt > 0 ) {
InsertNode( ) ;
break ;
}
default:
alert( "No valid action was chosent " ) ;
}
document.getElementById ( "grafCount " ).option.Lenght = 0 ;
For ( i= 0 i<nodeChgArea.getElementByTagName ( " p " ).lenght ; i + + ) {
document.getElementById ( " grafCount " ).option [ i ] = new Option ( i + 1)
}
return false ;
}
Replacing Nodes:
While you can always delete existing nodes and insert new nodes. It's simply just replace nodes if that what you want
Script HTML 08
<!DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1?DTD/xhtml-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Title>Inserting Nodes</title>
<Script Type = "text/javarscript" src = "Script05.js"></Script>
</head>
<body>
<form action = " # ">
<p>textarea id = "textArea " rows = "5 " Cols = " 30 "></p>
<p><label><input Type = " radio " name = "nodeAction" />Add node</label></p>
<p><label><input Type = " radio " name = "nodeAction" />Delete node</label></p>
<p><label><input Type = " radio " name = "nodeAction" />Insert Nodes</label></p>
<p><label><input Type = " radio " name = "nodeAction" />Replacing Nodes</label></p>
Paragraph # : <select id= "GraftCount "></select>
<input Type = " Submit " Value = "Submit" />
</form>
<div id= "DOM" </div>
</body>
</html>
Script HTML 09
Window.onload = intiAll ;