Getting a link on the page ( to change it ) without getElementById

@CalimeroApr 04.2005

Hi guys (and gals),

This is the problem:

I have (let’s say) a link on the page like this:

<a href=’something_useful.php’> Click me </a>

So what I need is to use a function in JavaScript to that will take that href attribute of the link and modify it if needed.

All of that I managed and it works, but only if I add ID=’something’ in the link

My final QUESTION id:
can I do this without giving the ID to the link ( there are many links on the page and I want it to be as small as possible – in KB ) and without getElementById.

If possible, code would be greately appreciated ( tried it for several times – but havent had any success )

Also – I think it could be done by getting all elements by the same TAG and counting them – but if there is still way with-out that it would be exelent, if not any solution will be enoungh.

Thanks ahead ! ?

to post a comment

JavaScript

11 Comments(s) _↴

@David_HarrisonApr 04.2005 — #Well, you can reference all of the links on your page like this:var theLinks = document.getElementsByTagName("a");Then you've got every link on the page in an array. Now depending on what you to do the rest of the code will vary.

@7studApr 04.2005 — #It should be pretty obvious that if you don't use document.getElementById(), then the only way to distinguish the link you are interested in from the other links on the page is by it's position on the page, i.e by counting the links. Were you thinking js would be able to read your mind? ?

Besides getElementsByTagName():

document.getElementsByTagName("a").item(9).href = "somepage.htm"

here is another way to count the links:

document.links[9].href="somepage.htm";

Both of those are 0 based, so the first link is at index 0, and the tenth link is at index 9.

@KorApr 04.2005 — #I think it could be done by getting all elements by the same TAG and counting them - but if there is still way with-out that it would be exelent[/quote]

If not by id (or name), if not by tag... now which other way do you you suppose you can find an element? ?

Well if you wanna restrain the counting, you may combine the reference. If your design allows it, nest the elements you wanna refere in a DIV or Span (or maybe they are already nested in a table, a row or a cell...

<div id="mydiv">

<a href ="bla0.html">foo0</a>

<a href ="bla1.html">foo1</a>

<a href ="bla2.html">foo2</a>

<a href ="bla3.html">foo3</a>

...

</div>

Thus u may avoid circle through all the a tags, you have to circle through

document.getElementById('mydiv').getElementsByTagName('a')

is a collection with all the elements with tag <a> whithin the element with id "mydiv"

@CharlesApr 04.2005 — #In the DOM level 0 the document has a links array. You can address any given link by number.

&lt;script type="text/javascript"&gt;
 &lt;!--
 onload = function () {document.links[document.links.length-1].href = 'http://javascript-version-of-the-page.html'}
 // --&gt;
 &lt;/script&gt;

@KorApr 04.2005 — #document.links

and

document.getElementsByTagName('a')

they look the same for me...

@CharlesApr 04.2005 — #document.links

and

document.getElementsByTagName('a')

they look the same for me...[/QUOTE]But they are not. The first is from the old Netscape document object model, adopted by the W3C as DOM level 0 and more widely supported. The second is from the W3C DOM level 1. And they mean different things, [font=monospace]document.getElementsByTagName('a')[/font] returns a list of A elements, both links and anchors.

And note, in HTML it's [font=monospace]document.getElementsByTagName('A')[/font], in XHTML [font=monospace]document.getElementsByTagName('a')[/font]. JavaScript is case sensitive. XHTML is case sensitive and lower case. HTML is case insensitive but uppercase nonetheless.

@CalimeroauthorApr 04.2005 — #wow.... thaks for all the replies.

they gave me an idea - made it idioticly simple ? ?

use onClick element on the link and trigger a function with URL as parameter - just edit it and window.location.href ... ?

Did this - because if I must use JS - then why not use other built-in functions.

Never the less, your replies gave me a new "ideas" ? to play with ( and make something that works ).

Thaks all.

P.S. Is there a way for marking this post SOLVED or similar.

@CharlesApr 04.2005 — #P.S. Is there a way for marking this post SOLVED or similar.[/QUOTE]Yes, but then you would miss things like this: it's "onclick" and not "onClick". HTML is case insensitive but there are time when you will need to get it right.<a href="http://JavaScript-free-default.html" onclick="this.href = 'http://JavaScript-using-version.html'">

@nusenseApr 04.2005 — #name it and refer to it using the document.whatEverYouCalledYourAnchorName.href

and charles... onClick="" <-- someone should tell Macromedia then...

@KorApr 04.2005 — #
name it and refer to it
[/quote]
What's the use?

Name it... give it an id... That the same thing and that is exactly what Calimero wants to avoid. He want's no [b]denomination[/b]. No ids. No names.

@nusenseApr 05.2005 — #its faster than using the getElement or any of those DHTML codeing.

When I got time I will dig up an online demo that gives you various speed figures, directly naming ing refering is the fastest method and getElemnt is the slowest and depending on how big your table or page is or elements you have, can take several seconds to do something that direct referencing would do im milliseconds.

Thats the point.

Also in #JavaScript _↴

I want to modify this code would anyone please help me ..?Tools to convert VBScript to Javascript?How is this effect done?

Success!

Help @Calimero spread the word by sharing this article on Twitter...

Tweet This

Getting a link on the page ( to change it ) without getElementById

11 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Getting a link on the page ( to change it ) without getElementById

11 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

11 Comments(s) _↴

Also in #JavaScript _↴