DOM Traversal of a container Element.

[Mahernoz]

Hi Friends,

I want to know how to achieve a dom traversal for a DIV element.

The DIV has a table in which there are textboxes and dropdowns. I want
to get the value of each textbox and dropdown and store it in some
kind of a string.

Regards,
Mahernoz

 

[Martin Honnen]

I want to know how to achieve a dom traversal for a DIV element.

The DIV has a table in which there are textboxes and dropdowns. I want
to get the value of each textbox and dropdown and store it in some
kind of a string.

Well getElementsByTagName is a method of each element object thus if you
have the div element object then
div.getElementsByTagName('input')
gives you a node list with all input elements and similarly
div.getElementsByTagName('select')
gives you a node list with all select (dropdown) elements.

 

[Doug Gunnoe]

Hi Friends,

I want to know how to achieve a dom traversal for a DIV element.

The DIV has a table in which there are textboxes and dropdowns. I want
to get the value of each textbox and dropdown and store it in some
kind of a string.

Regards,
Mahernoz

I wrote this script to traverse a branch of the DOM. In the doStuff
function you could do whatever processing you wish, which in your case
I suppose would be checking the node type to see if it is the
textboxes and dropdowns you are looking for.

full example here: http://polisick.com/domTraverseExample.html


<script>

var level;
var printSTR = "";
var outDIV;
var stopAT;


function parseDOMat(branchOfDOM){
level = 0;
stopAT = branchOfDOM;
doStuff(branchOfDOM);
walkThisBranch(branchOfDOM);
outDIV = document.getElementById('outPut');
outDIV.innerHTML = printSTR;
}


function walkThisBranch(branchOfDOM){

if(branchOfDOM.hasChildNodes()){
branchOfDOM = branchOfDOM.firstChild;
level++;
doStuff(branchOfDOM);
walkThisBranch(branchOfDOM);
}

else if(branchOfDOM.nextSibling != null){

branchOfDOM = branchOfDOM.nextSibling;
doStuff(branchOfDOM);

walkThisBranch(branchOfDOM);
}

else if(branchOfDOM != stopAT){
branchOfDOM = branchOfDOM.parentNode;
level--;
if(branchOfDOM.nextSibling != null){
branchOfDOM = branchOfDOM.nextSibling;
walkThisBranch(branchOfDOM);
}
}

}

function doStuff(nodex){
if(nodex.nodeName != null)
printSTR += makeTabs(level) + nodex.nodeName + " value: " +
nodex.value + "<br>";
}

function makeTabs(x){
tabs = ""

for(i=0;i<x;i++)
tabs += " ";


return tabs;

}


</script>

you can call the function something like this:
parseDOMat(document.getElementById('someElementID'))

Or, just as long as you are passing a node object to the function.