Identifying any element that has a title attribute

**lloydi** · Nov 17, 2003 08:49

Anyone know if there's a simple way of revealing all elements on a page that have a title attribute? I want to stick a script in a favelet to use as a development tool (highlight all titled elements with red border, etc)

I don't want it to be limited just to links or form elements.

If there's not something already out there, I'll probably have a hack at some existing favelets I have on my site, but no harm in asking if one's out there already, eh?

**awestmoreland** · Nov 17, 2003 09:36

This is kind of what you wanted, but it relies on you specifying what type of tag you want to check: DEMO

Code:

<html>
  <head>
	<title>Show Tags (Specified) with Title</title>
	<script language="JavaScript" type="text/javascript">
	<!--
	  function ShowTags(){
	 // Must specify tag-name here
		tagName = 'div';
		numTags = document.getElementsByTagName(tagName).length;
		tagArray = document.getElementsByTagName('div');
		
		for (i=0;i<numTags;i++) {
		  if (tagArray.item(i).title !== ""){
			tagArray.item(i).style.border="1px solid red";
		  }
		 }
	  }
	//-->
	</script>
  </head>
  <body onLoad="ShowTags();">
	<div>No title</div>
	<div>No title</div>
	<div title="blah">Title</div>
	<div>No title</div>
  </body>
</html>

However if there's no way of finding ALL tags (not saying that there isn't, just that I'm not aware of it) then you could probably make an array of all tags to be checked and run it through a loop.

Andy

**MikeFoster** · Nov 17, 2003 10:50

Andy beat me to the punch

but here's what I had...

Code:

/* Node Traversal Demo  
   Traverse all Element nodes and set a red border on
   all elements whose title attribute has a value.
*/

window.onload = function()
{
  /* First we see if the browser supports the
     methods and properties we will use.
     Then we walk the tree starting at document.body
     and visit each element with the highlight function.
  */
  var b = document.body;
  if (b.getAttribute && b.nodeType && b.firstChild) {
    xWalkTree(document.body, highlight);
  }
}

function highlight(node)
{
  var t = node.getAttribute('title');
  if (t && t.length) {
    node.style.border = '1px solid red';
  }
}

/* xWalkTree()
   Traverse the subtree starting at oNode
   and pass each Element node to fnVisit.
*/
function xWalkTree(oNode, fnVisit)
{
  if (oNode) {
    if (oNode.nodeType == 1) {fnVisit(oNode);}
    for (var c = oNode.firstChild; c; c = c.nextSibling) {
      xWalkTree(c, fnVisit);
    }
  }
}

**vgarcia** · Nov 17, 2003 11:13

Originally Posted by awestmoreland

However if there's no way of finding ALL tags (not saying that there isn't, just that I'm not aware of it)

document.getElementsByTagName(*) should work I believe

.

**MikeFoster** · Nov 17, 2003 13:34

What Andy and Vinnie have suggested may be more efficient than mine since I use a recursive function - I'm not sure.

At any rate, here's a demo of my code above: Node Traversal Demo

**xDev** · Nov 17, 2003 13:47

Originally Posted by lloydi

Anyone know if there's a simple way of revealing all elements on a page that have a title attribute?

I made a simple function that does what you want:

Code:

function getTitles()
{
 var _t=document.getElementsByTagName('*');
for(var i=0;i<_t.length;i++){
 if(_t[i].getAttribute('title'))
 void(_t[i].style.border='1px solid red');
 }
}

Originally Posted by lloydi

I want to stick a script in a favelet to use as a development tool (highlight all titled elements with red border, etc)

Here's an example inline inside an href for easy bookmarking:
http://www.xdevdesign.com/getTitleAttributes.htm

Thanks for the inquiry by the way. I'm going to use it myself

... great idea!

-xDev

**MikeFoster** · Nov 17, 2003 14:39

xDev's is short and sweet - just right for a bookmark

Nice

**awestmoreland** · Nov 17, 2003 17:28

Originally Posted by vgarcia

document.getElementsByTagName(*) should work I believe

.

You know, I didn't even try that because it seemed so simple

Cheers,

Andy

**MikeFoster** · Nov 18, 2003 13:00

This thread got me to experimenting with bookmarklets. But... should I replace all ' ' (space chars) with %20 ? Opera doesn't like it.

**xDev** · Nov 18, 2003 14:00

That's just IE that does that when you bookmark it. Opera and Mozilla don't use the escape sequences. I think you may have been copying the bookmark url property from ie. If you right-click the link (add link to bookmarks) while in Opera a window pops up to show you the address and stuff before you commit the action... don't see any %20's.

Cool bookmark by the way. Could be very useful in debugging.
I get an error in IE6 upon clicking evaluate:
Error: 'this.form.xDebugTA.value' is null or not an object

Not sure, but I thought you had to have uppercase arguments for ie to create, append elements or do anything with the DOM:
document.createElement('FORM');

I have a convention when making them. I usually define a variable with an underscore before it, i.e. _i, _j or whatever. The reason is that if you go on someone's page and try and use the bookmark, there may be conflicts with the variables if there are any scripts on their page - vars like str, msg, i, a, b etc. and such could cause problems cause everyone uses the same name.

You might have known this before, IE6 only allows you to have a maximum of 480 characters. Mozilla you can have alot more, can't remember exactly.

-xDev

**xDev** · Nov 18, 2003 14:09

Great little tool for condensing js code:
http://www.brainjar.com/js/crunch/demo.html

**awestmoreland** · Nov 19, 2003 03:05

Favelet? Bookmarklet?
I thought that you were all talking of adding pages to your list of favourites, but I guess you're not.

Is this a bit of code that will work against the current page when selected from a toolbar or something?

Andy

**xDev** · Nov 19, 2003 07:54

Originally Posted by awestmoreland

Is this a bit of code that will work against the current page when selected from a toolbar or something?

Yep! The code is within a link and called by the javascript: protocol in the href. So if you drag the link, right-click and add to Favorites every time you go to a page you can open up your Favorites and click on it just like any other link. Except now you do a javascript on the current page because that's what was in the link to begin with. Try it out.

http://www.google.com/search?q=Bookmarklets

The code I made to highlight all the title attributes on the page is now a part of my favorites/bookmarks and I can surf to any page and call it just like a regular favorite.

-xDev

**lloydi** · Nov 19, 2003 10:02

Originally Posted by xDev

The code I made to highlight all the title attributes on the page is now a part of my favorites/bookmarks and I can surf to any page and call it just like a regular favorite.

-xDev

And it works like a dream - very useful!

Thanks for doing this - it was far more simple than I thought and can easily be tweaked to do a number of other useful things

**MikeFoster** · Nov 19, 2003 10:26

xDev, thanks for the tips. I made some changes per your suggestions, but I haven't had time to do much with it

fun stuff tho.

**xDev** · Nov 19, 2003 11:05

Thanks alot guys. It's good to be appreciated especially when I respect what both of you do so much. Both of your sites are wonderful contributions to web design/development and show us better ways to proceed into the future

Cheers,
-xDev

**MarcusJT** · Nov 19, 2003 20:37

FYI, "bookmarklets" are also often referred to as "favelets", so searching for that will yield yet more results (although some may be IE only).

**MikeFoster** · Nov 21, 2003 10:49

I've made quite a few changes to my bookmarklets experiment. :)

Originally Posted by xDev

Cool bookmark by the way. Could be very useful in debugging.
I get an error in IE6 upon clicking evaluate:
Error: 'this.form.xDebugTA.value' is null or not an object

I think I've fixed that now. At least, it works for me with IE6/Win2K.

Originally Posted by xDev

Not sure, but I thought you had to have uppercase arguments for ie to create, append elements or do anything with the DOM:
document.createElement('FORM');

Thanks, I made that change.

Originally Posted by xDev

I have a convention when making them. I usually define a variable with an underscore before it, i.e. _i, _j or whatever. The reason is that if you go on someone's page and try and use the bookmark, there may be conflicts with the variables if there are any scripts on their page - vars like str, msg, i, a, b etc. and such could cause problems cause everyone uses the same name.

Good advice. I had enclosed my variable declarations with curly braces, like this:

Code:

{
  var f = document.createElement('FORM');
  f.onsubmit = 'return false';
  var t = document.createElement('TEXTAREA');
  t.id='xDebugTA';
  t.name='xDebugTA';
  t.rows='20';
  t.cols='60';
  var b = document.createElement('INPUT');
  b.type = 'button';
  b.value = 'Evaluate';
  b.onclick = function() {eval(this.form.xDebugTA.value);};
  f.appendChild(t);
  f.appendChild(b);
  document.body.appendChild(f);
}

I was thinking that the braces defined a new 'local' scope and the variables would not be global. Of course, I was confusing javascript with C :) so now I just made a function out of it to minimize global variable conflicts. Still needs testing of course ;)

Code:

function xEvalTA_load()
{
  var f = document.createElement('FORM');
  f.onsubmit = 'return false';
  var t = document.createElement('TEXTAREA');
  t.id='xDebugTA';
  t.name='xDebugTA';
  t.rows='20';
  t.cols='60';
  var b = document.createElement('INPUT');
  b.type = 'button';
  b.value = 'Evaluate';
  b.onclick = function() {eval(this.form.xDebugTA.value);};
  f.appendChild(t);
  f.appendChild(b);
  document.body.appendChild(f);
}
xEvalTA_load();

Originally Posted by xDev

You might have known this before, IE6 only allows you to have a maximum of 480 characters. Mozilla you can have alot more, can't remember exactly.

I separated my functions into different bookmarklets. Thanks for the tip.

Thanks to everyone for their contributions to this thread. I think it turned out to be very informative (and fun) for all of us :)

User Tag List

Thread: Identifying any element that has a title attribute

Thread Tools

Display

Identifying any element that has a title attribute

Bookmarks

Bookmarks

Posting Permissions