• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 850
  • Last Modified:

javascript functions

How can I get all elements in a document object of a web page and go through each of them to get their display values and their labels? I wrote some psuedo code like the following. I am not a good javascript coder.  Could anyone help me to write the actual javascript function?

function getCoversheetData(){
            var elements=document.getAllElements();
            for (var i=0;i<elements.size() ;i++ )
            {
                  var currentElement = elements[i];
                  var id = currentElement.getId();
                  alert("id ="+id);
                  var value=currentElement.innerHTML;
                  alert("value ="+value);
                                                               return id+"/"+value;

            }
      }
0
linlicao
Asked:
linlicao
1 Solution
 
TNameCommented:
  Hi, have a look at this:


function iterateElements() {  
         var elements=document.getElementsByTagName('*');
         for (var i=0; i<elements.length; i++ ) {
              var currentElement = elements[i];
                  var id = currentElement.id;
                  alert("id ="+id);
                  var value=currentElement.innerHTML;
                  alert("value ="+value);            
      }                  
}
0
 
linlicaoAuthor Commented:
I think this is a difficult question. Adding points
0
 
TNameCommented:
BTW, the reason why I took out
   return id+"/"+value;
from within the loop is that by specifying "return" inside a loop, you will leave the loop after only one loop cicle. I'm not sure what your intention is, but you could "collect" the ids and values in a string and return that string, e.g.


function iterateElements() {  
var elements=document.getElementsByTagName('*');
            var s='';
            for (var i=0;i<elements.length; i++ ) {
                  var currentElement = elements[i];
                  var id = currentElement.id;
                          alert("id ="+id);
                  var value=currentElement.innerHTML;
                  alert("value ="+value);
                         
                  s+=id+"/"+value;                               
                  }            
          return s;
}
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
NicksonKohCommented:
Hi linlicao,

Your objects include Div, td, tr, span, p, a, etc...?

Cheers,
NicksonKoh
0
 
linlicaoAuthor Commented:
Hi Nicksonkoh,

Not all objects.    Here is an example: on my web page, I have 3 input fields: one is an option, the second is a link to a popup window where the user can choose one entry and the selected value populats back to the field in the main window, the third one is a multi list where the user can pick up multiple entries from the left section and add them to the right window.  Before I submit the criteria, I would like to gather display value of all selected entries for these three input fields and hold it in another hidden input field before I submit the criteria page.  I would like the function we just discussed to serve this purpose.  Is it possible?  
0
 
TNameCommented:
By "display value" you mean the text/text value/content of an element, and not the value of the display property, correct?

If yes, then it's possible, at least in theory, but there would be some fine tuning and tweaking involved. The text/content isn't always expressed by the innerHTML value, and what should happen in case of nested elements (e.g. nested divs) where the innerHTML value will also include child elements...
Have a look at this (add element tags with their respective text value in the swicth statement if needed):


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
      div { border: 1px solid #ccc; width:300px; margin:20px; }
</style>
<script>
function iterateElements() {  
      var elements=document.body.getElementsByTagName('*');
    var s='';
      var value='';
    for (var i=0;i<elements.length; i++ ) {      
        var currentElement = elements[i];
            var tg=currentElement.tagName.toUpperCase();
            if ( tg==='TABLE' || tg==='TR' || tg==='TBODY'
             ) {continue;}
        var id = currentElement.id;
                        
            switch(tg)
            {
            case 'DIV':
                  value=currentElement.innerHTML;
                  break    
            case 'P':
                  value=currentElement.innerHTML;
                  break
            case 'SPAN':
                  value=currentElement.innerHTML;
                  break  
            case 'OPTION':
                  value=currentElement.value;
                  break  
            case 'INPUT':
                  value=currentElement.value;
                  break
            case 'SELECT':
                  continue;
            // Add other elements here...
            default:
                  value=currentElement.innerHTML;
            }      
            
            alert('tag='+tg+'\n'+
            'id='+id+'\n'+
            'value='+value);
            
        s+=id+"/"+value;      
    }            
    return s;
}
</script>
</head>
<body onLoad="alert(iterateElements());">

<div id="div1"> aaa </div>

<table id="tbl1" border="1">
  <tr id="row1">
      <td id="cell1">abc</td>
  </tr>
</table>
<div id="div2"  style="display:block;">zzz</div>

<select id="select1">
<option id="option1" value="Text for option 1">Text for option 1</option>
</select>

<div id="div3"  style="display:block;">div 3</div>

<a id="link1" href="http://www.google.com">A link</a>
<input type="button" id="btn1" value="Button 1" />
<input type="text" id="txt1" value="Text 1" />
</body>
</html>

0
 
Computer101Commented:
Forced accept.

Computer101
EE Admin
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now