[JS]GetElementsByClass

[Evertt_IA]

Ik heb een functie geschreven om elementen met class te vinden, die functie ziet er zo uit:

code:

function GetElementsByClass(Tag, Class)  {
    var Elements = new Array();
    var All = document.getElementsByTagName(Tag);
    for (var i = 0; i < All.length; i++) {
        if (All[i].className == Class) {Elements[Elements.length] = All.[i];}
    }
    
    return (Elements);
}

Volgens mij was die code gewoon goed, maar als ik hem gebruik krijg ik 2 errors.
Eerste error zegt die op dit regeltje:

code:

for (var i = 0; i < All.length; i++) {

fout: Id wordt verwacht

En de 2e error is nog vreemder, dan verwijst die naar een regel in de html, waar alleen maar dit staat:

code:

</div>

en dan is de fout: Object wordt verwacht


Ziet iemand wat er in hemelsnaam fout is aan mijn code?

[ Voor 4% gewijzigd door Evertt_IA op 01-05-2008 16:46 ]

[DanielG]

All.[i] lijkt mij niet te kloppen. De foutmeldingen zijn wel vaag.

[_Thanatos_]

Gebruik gewoon cssQuery, of beter nog, jQuery.

JavaScript:

//Voorbeeldje in cssQuery:
var elements = cssQuery("div.footer");
for (var i = 0; i < elements.length; i++)
  elements[i].style.display = "none";

//En nu hetzelfde in jQuery:
$("div.footer").hide();

jQuery verdient mijn voorkeur.

[ Voor 51% gewijzigd door _Thanatos_ op 01-05-2008 17:21 ]

[Evertt_IA]

DanielG schreef op donderdag 01 mei 2008 @ 17:02:
All.[i] lijkt mij niet te kloppen. De foutmeldingen zijn wel vaag.

oeps, shit, de hele tijd overheen gelezen. XD

_Thanatos_ schreef op donderdag 01 mei 2008 @ 17:18:
Gebruik gewoon cssQuery, of beter nog, jQuery.

JavaScript:

//Voorbeeldje in cssQuery:
var elements = cssQuery("div.footer");
for (var i = 0; i < elements.length; i++)
  elements[i].style.display = "none";

//En nu hetzelfde in jQuery:
$("div.footer").hide();

jQuery verdient mijn voorkeur.

Daar begin ik wel een keer mee als ik wat gevorderder ben in js


Nog 1 laatste vraag, wat ik wel stom vind van js, is dat ik dit moet doen om me code te implementeren:
in de head:

code:

<script type="text/javascript" src="test.js"></script>

en dan onderaan me htmlpagina:

code:

<script type="text/javascript">DoIt();</script>

Ik weet dat dat moet zodat die de code pas uitvoert wanneer de hele pagina geladen is, want anders werkt die niet. Maar kan het echt niet gewoon in 1 regeltje?
Ik heb al dit geprobeerd:

code:

<script type="text/javascript" src="test.js">window.onload="DoIt();";</script>

maar dat had geen zin.
Heeft iemand suggesties?

[ Voor 127% gewijzigd door Evertt_IA op 01-05-2008 17:48 ]

[user109731]

In test.js of tussen <script>-tags:

JavaScript:

window.onload = DoIt;

[Verwijderd]

_Thanatos_ schreef op donderdag 01 mei 2008 @ 17:18:
Gebruik gewoon cssQuery, of beter nog, jQuery.

JavaScript:

//Voorbeeldje in cssQuery:
var elements = cssQuery("div.footer");
for (var i = 0; i < elements.length; i++)
  elements[i].style.display = "none";

//En nu hetzelfde in jQuery:
$("div.footer").hide();

jQuery verdient mijn voorkeur.

Je plukt toch ook geen madeliefjes met een kettingzaag?

Korte code is niet per definitie beter, makkelijker, onderhoudbaarder of sneller. Voor iets simpels direct een library van stal halen is echt enorme onzin.

[Evertt_IA]

JanDM schreef op donderdag 01 mei 2008 @ 18:22:
In test.js of tussen <script>-tags:

JavaScript:

window.onload = DoIt;

Dat had ik dus al geprobeerd en dat werkt niet
En ja ik heb ook geprobeerd zonder die "" en dat werkt ook niet dus

[ Voor 12% gewijzigd door Evertt_IA op 01-05-2008 18:45 ]

[Borizz]

Evertt_IA schreef op donderdag 01 mei 2008 @ 18:28:
[...]

Dat had ik dus al geprobeerd en dat werkt niet
En ja ik heb ook geprobeerd zonder die "" en dat werkt ook niet dus

Dat moet toch echt werken. Bestaat je functie DoIt wel? Anders wordt het onload event misschien ergens overschreven?

[crisp]

Verwijderd schreef op donderdag 01 mei 2008 @ 18:22:
[...]

Je plukt toch ook geen madeliefjes met een kettingzaag?

Korte code is niet per definitie beter, makkelijker, onderhoudbaarder of sneller. Voor iets simpels direct een library van stal halen is echt enorme onzin.

Ben ik het mee eens, maar als je naast madeliefjes ook eens krokussen wil kunnen plukken dan is een snoeischaar misschien wel handiger.

De functie van topicstarter is behoorlijk specifiek; je kan bijvoorbeeld niet alle tags doorzoeken en elementen waarbij meerdere classes op zijn opgegeven (class="foo bar") worden niet gevonden. Daarbij is de functie ook niet erg efficient (kijkt niet of er een native getElementsByClassName method beschikbaar is, kijkt ook niet of XPath wellicht beschikbaar is en evalueert de length property van de nodeList elke iteratie). Met iets meer code kan je de performance behoorlijk verbeteren, heb je meer flexibiliteit en is de uitkomst wel altijd correct. Daar heb je dan alsnog geen hele library voor nodig

[Verwijderd]

JavaScript:

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}
addLoadEvent(function() {
  DoIt(); 
});

Overschrijft het onload event niet maar voegt toe

JavaScript:

if (All[i].className == Class) {Elements.push(All[i]);}

dan weet je zeker dat dubbele namen ook toegevoegd zullen worden... (en niet overschreven zoals met jou code)

[crisp]

Verwijderd schreef op donderdag 01 mei 2008 @ 22:59:
[...]
Overschrijft het onload event niet maar voegt toe

window.onload is in de meeste gevallen behoorlijk onpraktisch vanwege het feit dat het pas afgevuurd wordt nadat *alles* (dus ook externe objecten zoals plaatjes) volledig geladen is. Daarbij kan je beter gebruik maken van een bestaand event-model waarbij je zondermeer events kan toevoegen zonder andere events te overschrijven...

JavaScript:

if (All[i].className == Class) {Elements.push(All[i]);}

dan weet je zeker dat dubbele namen ook toegevoegd zullen worden... (en niet overschreven zoals met jou code)

Elements[Elements.length] = All[i] is volledig equivalent en zal ook zeker niets overschrijven, in sommige browsers is het opvragen van de length property zelfs sneller dan een method-call, maar dat is meestal onnodige optimalisatie (de push() method gebruiken is wel netter namelijk)

[ Voor 3% gewijzigd door crisp op 01-05-2008 23:08 ]

[Evertt_IA]

JanDM schreef op donderdag 01 mei 2008 @ 18:22:
In test.js of tussen <script>-tags:

JavaScript:

window.onload = DoIt;

Hier ben ik toch de mist in gegaan.
Ik had het idd geprobeerd tussen de <script>-tags, maar dat werkt niet.
Want zodra je een src aan de script-tag toevoegt negeert die voor de rest alles wat je er tussen zet.
Maar ik heb die code nu in m'n js-bestand staan en dat werkt wel.