TIP: Using getElementsByTagName in DOM... [Archive]

View Full Version : TIP: Using getElementsByTagName in DOM...

Dan

24.05.2001, 12:40

TIP: Using getElementsByTagName in DOM compatible browsers

Hi there, this is a cool tip that can be used in browsers that support the W3C DOM.
The function document.getElementsByTagName(tagName) returns an array of elements in the page that are tagNames.

This means that you can do things like

count links: document.getElementsByTagName('a').length

change the style of all paragraphs: for(i=0;i<document.getElementsByTagName('p').length;i++) document.getElementsByTagName('p')[i:j0x6i9gxxu].style.color = "red";

and much more.

To help you see the possiblites (I'm crap at describing them) I have made two examples.

This shows an article from the BBC with a summary that is created entirely at runtime. This is useful if you have HTML articles in a database or something that you want to summarise and don't want to do loads of nastly pattern matching in ASP, PERL or PHP. (the anchors on the headings are created at runtime too!)

http://www.pupius.net/x/link_summary.htm
http://www.pupius.net/x/link_summary2.htm (exactly the same but with no images, the script catches lack of information too).

This script could be reused with any text as long as it used H1 for the headings!

-------------------------
Dan
www.pupius.net
-------------------------

Edited by - Dan on 05/24/2001 11:41:59

Xanth

24.05.2001, 14:20

Yup getElementsByTagName() is REALLY powerful it's document.images[] only for every single tag! and another really great thing is you don't have to search the entire document you can selectively search an element i.e.

<div id="hasPs">










</div>







(8 in all)

and you use document.getElementById("hasPs").document.getElementsByTagName("P").length

it would return 5, so that is really cool to.

xanth = new Object();
xanth.name = "Mike";
xanth.mail = "[url:2nsk632vad]belgedin@earthlink.net[/url:2nsk632vad]";
xanth.age = 16;


Edited by - Xanth on 05/24/2001 13:36:18

Brian Nickel

24.05.2001, 14:21

That is amazing. I feel stupid for not realizing the power of it. I've just been using it to get the body tag :).
I also hadn't realized that getElementsByTagName() could be treated as an array. I've always used the item method.
This could come in very handy.

Thanks.

ScriptGuru={
getName:function(){return 'Brian Nickel';},
getEmail:function(){return '[url:5rwui12atn]scriptguru@f2s.com[/url:5rwui12atn]';},
getURL:function(){return '[url:5rwui12atn]http://www.scriptguru.f2s.com[/url:5rwui12atn]';}
};

Xanth

24.05.2001, 14:35

<BLOCKQUOTE id=quote>quote:<hr height=1 noshade id=quote>That is amazing. I feel stupid for not realizing the power of it. I've just been using it to get the body tag<hr height=1 noshade id=quote></BLOCKQUOTE id=quote>
Yeah it doesn't seem that great at first glance but it is really kick butt. When I found out you could do all this great stuff with it I was blown away then I tried searching a single element and that did it I was in love. LoL

<BLOCKQUOTE id=quote>quote:<hr height=1 noshade id=quote>I've always used the item method.<hr height=1 noshade id=quote></BLOCKQUOTE id=quote>
Yeah that works the same as the array just not as compact I suppose. Ofcourse think I know how much you love your shortcuts <img src=icon_smile_big.gif border=0 align=middle>

EDIT>>

Just found the example I had.. K this is it.. http://www.dhtmlnirvana.com/mike/scripts/selec2.htm


xanth = new Object();
xanth.name = "Mike";
xanth.mail = "[url:sdwpifyzcv]belgedin@earthlink.net[/url:sdwpifyzcv]";
xanth.age = 16;


Edited by - Xanth on 05/24/2001 13:39:37

Edited by - Xanth on 05/24/2001 13:41:57

Edited by - Xanth on 05/24/2001 13:45:55

Dan

24.05.2001, 18:40

What? no comments about the Dalai Lama <img src=icon_smile_wink.gif border=0 align=middle>

Do you think I should write this up as an actual article if I have time? Some of the DOM functions are VERY powerful and add lots of functionality to plain HTML articles at runtime... Would this be useful? It could go in the currently empty "Articles" section. (watch be get acused by Seyder for kissing ass <img src=icon_smile_wink.gif border=0 align=middle> ... lol)

-------------------------
Dan
www.pupius.net
-------------------------

Edited by - Dan on 05/24/2001 17:47:20

Brian Nickel

25.05.2001, 03:42

Yeah, what is with the Lama artical anyways?

Xanth, 3 edits on that post? can't make up your mind? I like the example.

ScriptGuru={
getName:function(){return 'Brian Nickel';},
getEmail:function(){return '[url:doq0j0akk4]scriptguru@f2s.com[/url:doq0j0akk4]';},
getURL:function(){return '[url:doq0j0akk4]http://www.scriptguru.f2s.com[/url:doq0j0akk4]';}
};

Xanth

25.05.2001, 14:16

LoL actually it was 5. I kept uploading the file that didn't work in NS6. It was actually the right file the first time I just thought it was wrong and I kept overwriting the file with the wrong one heheheh.

xanth = new Object();
xanth.name = "Mike";
xanth.mail = "[url:9cg63yk2yw]belgedin@earthlink.net[/url:9cg63yk2yw]";
xanth.age = 16;

Dan

25.05.2001, 15:20

Yeah, they phrased it quite well. I didn't want to go into that much depth in this post though (not enough time or patience). I thought the example demonstrated getElementsByTagName pretty well though... didn't you?

-------------------------
Dan
www.pupius.net
-------------------------

Shane

25.05.2001, 15:51

As a side note to this topic, this topic just came across the dom newsgroup....

IE Win does not support "*" as a wildcard with
getElementsByTagName. But there is a similar workaround:

document.all.tags("*");

Just fyi

//ShAnE

Brian Nickel

25.05.2001, 16:23

Sigh, I wish there were these explanation pages months ago. It would have saved me all that work going through the W3C's documentation.

ScriptGuru={
getName:function(){return 'Brian Nickel';},
getEmail:function(){return '[url:9r1ow4ng5l]scriptguru@f2s.com[/url:9r1ow4ng5l]';},
getURL:function(){return '[url:9r1ow4ng5l]http://www.scriptguru.f2s.com[/url:9r1ow4ng5l]';}
};