getElementById - How to ignore meta tags ?

M

MNF

Hi everyone,
I am using document.getElementById function in JavaScript to find a
control within an html body, but instead I get back META item, because
incidently the name of one meta tags is the same as the name of my
control. It seems that it is by design, because getElementById returns
the FIRST object with the same ID.

What is the best general workaround to search control only within
body?
I prefer to allow control IDs be the same as meta tag names.

Thanks,
Michael Freidgeim

Please find the sample page to illustrate the issue.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<meta content="Functional Solutions"
name="keywords">
</HEAD>
<body >
<form name="Form1" method="post" action="" id="Form1">
<input type="text" id="Keywords" >


<script type='text/javascript'>
<!--
SetFocus('Keywords');
function SetFocus(strID, bFindCtrl)
{
ctl = document.getElementById(strID);
// If not found, exit
if(ctl == null || typeof(ctl) == "undefined")
return false;
ctl.focus();//causes error
}
//-->
</script>
</form>
</body>
</HTML>
 
I

Ivo

Hi everyone,
I am using document.getElementById function in JavaScript to find a
control within an html body, but instead I get back META item, because
incidently the name of one meta tags is the same as the name of my
control. It seems that it is by design, because getElementById returns
the FIRST object with the same ID.

What is the best general workaround to search control only within
body?

I prefer to allow control IDs be the same as meta tag names.
Click to expand...

I prefer to see two and two equal five, but have come to accept that it
doesn't work like that. The easiest and simplest as well as the only legal
and valid solution is to make your ID's unique.
HTH
Ivo.
 
M

Michael Freidgeim

Ivo,

Thank you for your reply.
But META tag has name attribute, not ID and even formally should not be
considered by getElementById. META names and body control IDs are quite
different entities and should not be used in the same namespace.

However let's re-phrase my question: which function should I use/create
for the equivalent of getElementById on the
document.body level?

Michael Freidgeim
Add ".com.au" to my e-mail address to reach me by e-mail
 
M

Michael Winter

But META tag has name attribute, not ID and even formally shouldnot be
considered by getElementById. META names and body controlIDs are quite
different entities and should not be used in the samenamespace.
Click to expand...

We all know that, but Microsoft, in its infinite wisdom, thinks otherwise.
However let's re-phrase my question: which function should Iuse/create
for the equivalent of getElementById on the
document.body level?
Click to expand...

There is no pre-existing equivalent, and I don't think that writing one
would be wise; it'll be large and slow. Instead, simply change the id
attribute to something unique, like "key-words".

Mike
 
G

Grant Wagner

Michael said:
Ivo,

Thank you for your reply.
But META tag has name attribute, not ID and even formally should not be
considered by getElementById. META names and body control IDs are quite
different entities and should not be used in the same namespace.

However let's re-phrase my question: which function should I use/create
for the equivalent of getElementById on the
document.body level?
Click to expand...

The problem is that Internet Explorer will use NAME attributes for
getElementById() lookups, which you've discovered. Ultimately the solution
would be to try to avoid conflicts and ensure that all NAMEs and IDs on the
page are unique. If this is not an option, then the following code will
produce the correctly IDed <DIV> on the <BODY> (even if there are multiple
items with the same name that are not DIVs):

<html>
<head>
<title>Test</title>
<meta name="keywords" content="This is a test META" />
</head>
<body onload="test('keywords');">
<div id="keywords">This is a test DIV</div>
<script type="text/javascript">
function test(theId) {
// retrieve the element
var el = document.getElementById(theId);
// test to ensure it's the kind of tag you want
if (el.tagName.toUpperCase() != 'DIV') {
// if it is not the kind of tag you want, retrieve
// all the tags of the type you want
var divs = document.getElementsByTagName('DIV');
// loop through all the tags of the type you
// want until you find the id you want
for (var i = 0; i < divs.length; i++) {
if (divs.id == theId) {
// you found the id you want, assign
// it to "el" and stop looking
el = divs;
break;
}
}
}

if (el) {
// if you've successfully retrieve "el", use it
alert(el.firstChild.nodeValue);
}
}
</script>
</body>
</html>

The code could be made less complex by always retrieving
getElementsByTagName(), but I think the getElementById().tagName test is
worth the trouble, considering many browsers will correctly identify the
tagName you want and bypass the loop. Also, if you don't want to identify a
DIV, it should be easy enough to change the code to retrieve the tagName
you do want (or better yet, make it a parameter you can pass to the
function), like:

function getElementByIdOrNameAndTagName(idOrName, tagName) { ...

and call it with:

var el = getElementByIdOrNameAndTagName('keywords', 'DIV');
 
G

Grant Wagner

Michael said:
We all know that, but Microsoft, in its infinite wisdom, thinks otherwise.


There is no pre-existing equivalent, and I don't think that writing one
would be wise; it'll be large and slow. Instead, simply change the id
attribute to something unique, like "key-words".

Mike
Click to expand...

Not that large, but possibly slow depending how many elements of the tagName
you want are on the current document:

function getElementByIdOrNameAndTagName(idOrName, tagName) {
var el = document.getElementById(idOrName);
if (el.tagName.toUpperCase() != tagName.toUpperCase()) {
var els = document.getElementsByTagName(tagName);
for (var i = 0; i < els.length; i++) {
if (els.id == theId) {
el = els;
break;
}
}
}
return el;
}

Called using:

var el = getElementByIdOrNameAndTagName('keywords', 'div');

Even in the unlikely event you don't know what tagName you want, you can still
call it with:

var el = getElementByIdOrNameAndTagName('keywords', '*');

although that removes the advantage browsers that correctly identify the right
element to begin with have. If you end up calling the function with '*' a lot,
it might better to remove the getElementById().tagName test entirely.
 
M

Michael Freidgeim

Thank you guys for your quick responses.
Because my purpose was just to exclude mega tags, I've choosen the
solution based on Grant's getElementByIdOrNameAndTagName.

function getNonMetaElementById(theId) {
var el = document.getElementById(theId);
if (el.tagName.toUpperCase() == "META")
{
var els = document.getElementsByTagName("*");
for (var i = 0; i < els.length; i++) {
if (els.id == theId) {
el = els;
break;
}
}
} return el;
}

Michael Freidgeim
Add ".com.au" to my e-mail address to reach me by e-mail
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Using CSS ID Tags to 2
Script stops working when using variables to save time typing... 4
About as basic "Newbie-Question" that you can get. 3
I'm about to get in trouble with the HTML <body></body> tags 10
How to position the *tooltip* comment on these buttons? 9
How to have two html audio players on one page? 0
How do I output this recursive function correctly to a web browser? 2
How to check the validation of js files or html files including js? 6

Members online

No members online now.
Total: 27 (members: 0, guests: 27)
Robots: 129

Forum statistics

Threads
473,774
Messages
2,569,599
Members
45,175
Latest member
Vinay Kumar_ Nevatia

Latest Threads

Top