querySelectorAll alternativ som virker før IE8

[scootergrisen]

Jeg har denne HTML kode flere steder på en side :

<span class="noget"></span>

Også køre jeg denne Javascript kode for at skrive noget ved alle
class="noget" :

if (document.querySelectorAll) {

elementer = document.querySelectorAll('.noget');

for (i = 0, storrelse = elementer.length; i < storrelse; i++) {

elementer[i].innerHTML = 'noget tekst';

}

}

Det virker så bare ikke før IE8.

Ikke fordi jeg går så meget op i ældre browsere men er der en alternativ
måde så jeg kan få det til at virke også før IE8 ?

Det er min e-mail adresse jeg skal skrive en eller måske flere stedet på
samme side.

[Birger Sørensen]

Post by scootergrisen
<span class="noget"></span>
Også køre jeg denne Javascript kode for at skrive noget ved alle
if (document.querySelectorAll) {
elementer = document.querySelectorAll('.noget');
for (i = 0, storrelse = elementer.length; i < storrelse; i++) {
elementer[i].innerHTML = 'noget tekst';
}
}
Det virker så bare ikke før IE8.
Ikke fordi jeg går så meget op i ældre browsere men er der en alternativ måde
så jeg kan få det til at virke også før IE8 ?
Det er min e-mail adresse jeg skal skrive en eller måske flere stedet på
samme side.

Det hurtige svar er nej.
Du er nødt til at gå hele DOM igennem, og finde de elementer der har
elementer[i].className.indexOf('noget') > -1

Hvis du ved hvilket tag elementerne er, kan du nøjes med at at søge i
dem.
elementer = document.getElementsByTagName('SPAN');
og gennemgå den collection og finde elementerne med ovenstående.

Birger

[scootergrisen]

Post by Birger Sørensen
Du er nødt til at gå hele DOM igennem, og finde de elementer der har
elementer[i].className.indexOf('noget') > -1
Hvis du ved hvilket tag elementerne er, kan du nøjes med at at søge i dem.
elementer = document.getElementsByTagName('SPAN');
og gennemgå den collection og finde elementerne med ovenstående.

Ok denne kode ser ud til at virker. Kan det optimeres/gøres bedre eller
er dette den optimale måde at gøre det på ?

if (document.querySelectorAll) {

// kode til browsere som forstår querySelectorAll

} else {

elementer = document.getElementsByTagName('span');

for (i = 0, storrelse = elementer.length; i < storrelse; i++) {

if (elementer[i].className == 'noget') {

elementer[i].innerHTML = tekst;

}

}

}

[Birger Sørensen]

Post by scootergrisen

Post by Birger Sørensen
Du er nødt til at gå hele DOM igennem, og finde de elementer der har
elementer[i].className.indexOf('noget') > -1
Hvis du ved hvilket tag elementerne er, kan du nøjes med at at søge i dem.
elementer = document.getElementsByTagName('SPAN');
og gennemgå den collection og finde elementerne med ovenstående.

Ok denne kode ser ud til at virker. Kan det optimeres/gøres bedre eller
er dette den optimale måde at gøre det på ?
if (document.querySelectorAll) {
// kode til browsere som forstår querySelectorAll
} else {
elementer = document.getElementsByTagName('span');
for (i = 0, storrelse = elementer.length; i < storrelse; i++) {
if (elementer[i].className == 'noget') {
elementer[i].innerHTML = tekst;
}
}
}

(Så lykkedes det vist for dig... :-Z)

Der er to ting:
Den ene er at du bruger variable uden at deklarere dem først.
Den anden at sammenligninger der involverer elementers attributter, i
nogle browsere (nogle versioner af IE), har en tendens til at gå galt,
hvis den aktuelle attribut ikke er defineret (brugt) for det aktuelle
element. Derfor bruger jeg omskrivningen med indexOf().
[Det skal forstås sådan, at hvis du har en span, hvor du ikke har sat
class, vil className returnere en tom streng, men sammenligningen
className == 'noget' vil returnere sand. Jeg har oplevet det et par
gange.)
Man kan også sige, at eftersom du kan definere flere class (f.eks.
class="menu lvl1") for et element, er en direkte sammenligning ikke
korrekt, fordi className ikke vil give dig nøjagtigt det du leder
efter, men elementet kan godt have klassen. querySelectorAll vil svjv
også finde de elementer.
Men det kommer selvfølgelig an på, hvad man bruger funktionen til og
hvordan.
En generel funktion, kunne se sådan ud:

function SetElements(elm, cls, txt) {
var elementer = null, i = 0, storrelse = 0;
if (document.querySelectorAll) {
// kode til browsere som forst�ߥr querySelectorAll
}
else {
elementer = document.getElementsByTagName(elm);
if (elementer && (elementer.length > 0)) {
for (i = 0, storrelse = elementer.length; i < storrelse; i++)
{
if (elementer[i].className.indexOf(cls) > -1) {
elementer[i].innerHTML = txt;
}
}
}
}
}

men kræver stadig, at man ved hvilket tag, der er tale om...

Birger

[scootergrisen]

Her kommer hele koden med lidt rettelser.
Ser ud til at virke fint, også hvis jeg senere skulle have flere class
selvom regner ikke med det.

HTML :

<span class="noget"></span>

Javascript :

function visnoget() {

'use strict';

var
elementnavn = 'span'
,classnavn = 'noget'
,i = null
,storrelse = null
,elementer = null
,tekst = 'indholdet'
;

if (document.querySelectorAll) {

elementer = document.querySelectorAll('.' + classnavn);

if (elementer && (elementer.length > 0)) {

for (i = 0, storrelse = elementer.length; i < storrelse; i++) {

elementer[i].innerHTML = tekst;

}

}

} else {

elementer = document.getElementsByTagName(elementnavn);

if (elementer && (elementer.length > 0)) {

for (i = 0, storrelse = elementer.length; i < storrelse; i++) {

if (elementer[i].className.toLowerCase().indexOf(classnavn)

-1) {

elementer[i].innerHTML = tekst;

}

}

}

}

}



if (window.addEventListener) {

window.addEventListener('load', visnoget, false);

} else if (window.attachEvent) {

window.attachEvent('onload', visnoget);

}

[r***@hotmail.com]

Post by Birger Sørensen
Den ene er at du bruger variable uden at deklarere dem først.

Hvis man deklarerer sine variable først altid med var, så risikerer
man ikke at lave en global variabel ved et uheld. Og koden bliver
pænere og mere overskuelig.

Det er bare noget man skal lære, ligesom at kommentere sin kode og
lave korrekt indrykning (som Scootergrisen så også har gjort ganske
nydeligt).



MVH
Rune Jensen

[r***@hotmail.com]

Post by Birger Sørensen
function SetElements(elm, cls, txt) {
   var elementer = null, i = 0, storrelse = 0;

For overskueligheden også, jeg mener, det er tilladt at bruge:

function SetElements(elm, cls, txt) {
var elementer = null,
i = 0,
storrelse = 0
if documentosv...


...og hvis man bruger tabs i stedet for spaces, så "misbruger" man kun
et enkelt tegn pr. variabel på den måde, men for mig i hvert fald, er
det en del nemmere at læse.

Det er måske ikke fuldt on-topic, men bare noget, som jeg synes, man
skal have i baghovedet.


MVH
Rune Jensen

[r***@hotmail.com]

Post by r***@hotmail.com
Det er måske ikke fuldt on-topic, men bare noget, som jeg synes, man
skal have i baghovedet.

Sorry... det er allerede brugt, ser jeg.

Undskyld forstyrrelsen.


MVH
Rune Jensen

[Birger Sørensen]

Post by Birger Sørensen

Post by Birger Sørensen
function SetElements(elm, cls, txt) {
   var elementer = null, i = 0, storrelse = 0;

function SetElements(elm, cls, txt) {
var elementer = null,
i = 0,
storrelse = 0
if documentosv...
...og hvis man bruger tabs i stedet for spaces, så "misbruger" man kun
et enkelt tegn pr. variabel på den måde, men for mig i hvert fald, er
det en del nemmere at læse.
Det er måske ikke fuldt on-topic, men bare noget, som jeg synes, man
skal have i baghovedet.
MVH
Rune Jensen

Det er nok hvad man er vant til.
Jeg foretrækker at have "var" som første ord i linier der deklarer
variable.
Og det er jo også tilladt, at skrive dem alle, med hver sin var:
var elementer = null;
var i = 0;
var storrelse = 0;
Det er så lidt somom der kommer for meget fokus på deklareringerne -
specielt dem man bare bruger - her "i", og der kan være andre, som ikke
har betydning for den egentlige funktionalitet.
Jeg bruger også ofte, at kæde første tildeling af værdi der skal bruges
til noget, sammen med deklareringen, f.eks. kunne den aktuelle have set
sådan ud:
function SetElements(elm, cls, txt) {
var i = 0, storrelse = 0;
var elementer = document.getElementsByTagName(elm);
if ()
...

Jeg forstår godt det med overskueligheden - er der mange, har jeg ofte
en linie med de ikke betydende (i og storrelse her), og en med dem der
er betydende (dem det egentlig handler om).

Hvordan man skriver dem er jo ligegyldigt - det vigtige er, at man
husker at deklarere dem, før de bruges.

Birger

[r***@hotmail.com]

Jeg forst r godt det med overskueligheden - er der mange, har jeg ofte
en linie med de ikke betydende (i og storrelse her), og en med dem der
er betydende (dem det egentlig handler om).

Ja, du har ret, det gør jeg faktisk også på den måde med
linjeadskillelse af betydende variable og sammenpresning af mindre
betydende.

Og tællere kan jeg godt finde på at koble deklarering på lige før for-
løkken osv. det er jo for så vidt bare dummy-variable.

Der er en gammel vittighed, som siger, at hvis ens program ikke
virker, så er det nok fordi man ikke har kommenteret koden. Det samme
kan siges om forkerte indryk og altfor sammenpresset kode eller hvis
der ikke er struktur i ens deklarering af variable. Fejl kan nemt
snige sig ind sådanne steder hvor der ikke er umiddelbart overblik.

Men det var mere ment som et PS (delvist fra egen erfaring) end et
egentligt svar på Scootergrisens spørgsmål, så håber han fik løst det.


MVH
Rune Jensen

[scootergrisen]

Post by Birger Sørensen
var elementer = null;
var i = 0;
var storrelse = 0;

Sådan har jeg også brugt var i det meste af min kode men fornylig er jeg
begyndt med kun at bruge var en gang :

var elementer = null
,i = 0
,storrelse = 0
;

Jeg tror grunden til at jeg begynder at skifte til kun én var er at det
blev anbefalet på http://jslint.com/ som skriver "Combine this with the
previous 'var' statement." hvis man har 2 eller flere var efter hinanden.

Er jeg også begyndt at bruge 'use strict' først i hver funktion for at
blive gjort opmærksom på flere ting der kunne forbedres.

[r***@hotmail.com]

Post by scootergrisen
Er jeg også begyndt at bruge 'use strict' først i hver funktion for at
blive gjort opmærksom på flere ting der kunne forbedres.

Har javascript en flag, som kan advare, hvis man bruger variable, som
ikke er defineret først?

På en måde tror jeg, den kunne være smart.

Men hvad laver strict så lidt nærmere? Den må da også give nogle
advarsler, hvis man gør et eller andet forkert?


MVH
Rune Jensen

[scootergrisen]

Post by r***@hotmail.com
Har javascript en flag, som kan advare, hvis man bruger variable, som
ikke er defineret først?

Det er vist netop en af de ting 'use strict'; kan bruges til.

"An attempt to assign foo = "bar"; where ‘foo’ hasn’t been defined will
fail. Previously it would assign the value to the foo property of the
global object (e.g. window.foo), now it just throws an exception. This
is definitely going to catch some annoying bugs." :
http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/

Post by r***@hotmail.com
Men hvad laver strict så lidt nærmere? Den må da også give nogle
advarsler, hvis man gør et eller andet forkert?

Du kan kigge på linket.

[r***@hotmail.com]

Post by scootergrisen

Post by r***@hotmail.com
Har javascript en flag, som kan advare, hvis man bruger variable, som
ikke er defineret f rst?

Det er vist netop en af de ting 'use strict'; kan bruges til.

Vi har haft den funktion i ASP siden 2001, den er skide smart, og som
citatet siger, den fanger masser af fejl. F.eks. hvis man definerer
var dummy, men senere i stedet ved en fejl kalder den dumy, så kommer
der en fejlmeddelelse, fordi dumy ikke er defineret.


MVH
Rune Jensen