Solved

determine all defined image object attributes

Posted on 2008-10-11
4
852 Views
Last Modified: 2008-10-11
Is there a way to enumerate all attributes associated with an image, or for that matter the attributes associated with any other element in a web page?  I know I can access attributes if I specify them, eg. the source of an image as  document.images[0].src, or the width as document.images[0].width, but what if I want to list every attribute?  Have attached a little code below where I loop through every image in a page, and identify each of four attributes.  But rather than explicitly naming the attributes I want (which in some cases finds attributes undefined, like useMap for image 2), is there a way to write an inner loop, from attribute = 0 to (number of defined attributes), similar to the way the outer loop is from 0 to (number of images)?  That way the code could generically be applied to any object, without naming the specific attributes.

<html>
<head>
<title>Enumerate Image Attributes</title>
</head>
 
<body >
<img src="image1.jpg" usemap="#Map1" name="Image1" width="400" height="240" border="0" id="Image1" />
<img src="image2.jpg" name="Image2" width="200" height="120" border="0" id="Image2" />
 
<SCRIPT LANGUAGE="JavaScript">
for(i=0;i<document.images.length;i++) 
{
alert("image "+ i + " source is "+document.images[i].src);
alert("image "+ i + " id is "+document.images[i].id);
alert("image "+ i + " width is "+document.images[i].width);
alert("image "+ i + " map is "+document.images[i].useMap);
}
</SCRIPT>
</body>
</html>

Open in new window

0
Comment
Question by:yessirnosir
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 7

Accepted Solution

by:
bluV11t earned 500 total points
ID: 22695458
Something like this would do the trick, I think.
<SCRIPT LANGUAGE="JavaScript">
for(i=0;i<document.images.length;i++) 
{
    for(j=0;j<document.images[i].attributes.length;j++)
    {alert("image "+ i + " element "+document.images[i].attributes[j].name + ', value: ' +document.images[i].attributes[j].value);}
}
</SCRIPT>

Open in new window

0
 
LVL 14

Author Comment

by:yessirnosir
ID: 22695476
Thanks bluV11t, that's perfect.  Quick follow-up if you don't mind -- can you direct me to any reference info that would have helped me figure that out for myself?  Before I posted I studied this Document Object Model reference page (http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-642250288) and googled things like "document images attributes" but didn't manage to find that critical "attributes.length" property that you have just shown me.
0
 
LVL 7

Expert Comment

by:bluV11t
ID: 22695520
I used to have a dom inspector plugin for IE that was a lot of help some versions back but it stopped working in IE 6. Tried a few javascript debuggers but havent really found one that suits me yet. Usually I just code what I think will work and then test it. If it doesn't work I fiddle with it till it works ;-)

In regards to "attributes.length" I guess any collection (images, elements...) has this property but I could of course be mistaken.
0
 
LVL 14

Author Comment

by:yessirnosir
ID: 22695928
Thanks again bluV11t... now that you've set me on the right track I was more successful googling and did find some documentation, eg. http://developer.mozilla.org/en/DOM/element.attributes 
Then I also discovered that the attributes "collection" is handled very differently in IE vs other browsers.  In IE6 all the undefined values are included in the attributes array as nulls, so while my test code under Firefox, Safari, or Opera only generates only 7 alerts for the first image, under IE6 it generates 99!  
Anyway, thanks for helping me along my learning curve.
0

Featured Post

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!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

751 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question