Geeks With Blogs
Geekette Mai Blog

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 ;

 

Posted on Tuesday, February 16, 2010 12:10 PM | Back to top


Comments on this post: DOM: Adding Nodes, Deleting Nodes, Deleting specific Nodes, Inserting Nodes, Replacing Nodes

No comments posted yet.
Your comment:
 (will show your gravatar)


Copyright © Mai Nguyen | Powered by: GeeksWithBlogs.net