getElementsbyClass vs querySelectorAll

Någon som vet vad skillnaden är? Jag har försökt göra ett enkelt skript där alla element i en klass ska skrivas ut på dokumentet. Det funkar med querySelectorAll, men inte getElementsbyClass, och jag förstår inte varför. Detta är koden som inte funkar med "getElementsbyClass"

function getStuff(){
var list = document.getElementById("tuna");
for(var i=0; i<list.length; i++){
document.write(list[i].innerHTML);
}
}
window.onload=getStuff;

Du använder ju inte ens getElementsByCLASS...

getElementsByClassName heter det.

/p

Oj, förlåt. Jag kopierade från fel fönster där jag hade testat att byta till klass istället. Pinsamt. Koden jag skulle kopierat var:

function getStuff(){
var list = document.getElementsByClassName("tuna");
for(var i=0; i<list.length; i++){
document.write(list[i].innerHTML);
}
}
window.onload=getStuff;

Ber om ursäkt. Kan tillägga också att jag håller på att lär mig javaskript, och är verkligen inte duktig på det.

Vilken webläsare prövar du i?

Man skall typiskt sett inte använda document.write efter att sidan laddats. Gör man det så skrivs allt dess innehåll över. Det brukar bli en blank sida med just bara det man skrev ut högst upp. Ingen CSS, ingenting. Det är inte så ofta det är vad man vill, men det kan kanske hända.

I det här fallet blir det lite extra lustigt eftersom getElementsByClassName("tuna") returnerar en "levande" NodeList. Säg att du får ut tre element i den, och försöker loopa och skriva ut dem..

Det första document.write blankar då ut dokumentet och skriver det första elementets innerHTML.

Efter det finns inga fler element i NodeListen kvar, eftersom den är "levande", och de element som nyss fanns i den finns inte längre i dokumentet - det skrevs ju över. Därför blir det bara en ynka utskrift.


Skillnaden mot querySelectorAll(".tuna") är att då får man en "non-live" NodeList. När man loopar över den så "försvinner" inte element två och tre ur den efter den första document.write(), och innerHTML för alla i listan kommer att skrivas ut.

Se här: https://developer.mozilla.org/en-US/docs/Web/API/NodeList#Description

/p

Tack så mycket för svaret. Mycket hjälpsamt, hade inte kunnat lista/googla ut det själv. Hade ingen aning om att document.write inte är att föredra, förstår det nu bättre när jag läst vidare. Jag följer en youtube-skola om HTML5 och jag börjar inse att snubben kanske inte är expert.

Vad rekommenderas istället för document.write? Som i det här exemplet, hur kan jag få sidan att skriva ut alla elementen i en klass om de nu lagrats med querySelectorAll?

dw har ju den för- och nackdelen (så att säga) att den skriver ut text precis där den körs i dokumentet. Skriver man något i ett färdigladdat dokument så blankas det som sagt ut först, vilket blir det givna resultatet om man kör dw i en window.onload.

Om du istället gör det innan dokumentet laddats klart och stängts, så skriver du helt enkelt ut data i dokumentet, vilket kommer att gå fint. Dokumentet stängs sedan automatiskt när DOMen laddats klart (eventet DOMContentLoaded).

Så om du, precis innan </body> (stängningen) kör funktionen borde det gå bra (bara du definierat den innan såklart):

[PHP]<script>
getStuff();
</script>
</body>[/PHP]

Om du vill lägga till data på sidan efter att dokumentet laddats klart kan du använda några alla härliga metoder för manipulation av strukturen som finns.

[PHP]
<script>

// Skicka in ett klassnamn och ett mål för där info skall läggas
function printElementsWithClassName(className, target) {
var elements = document.getElementsByClassName(className), elem
, doc = document, item
, list = doc.createElement("ul"); // Skapa ul
for (var idx=0, len=elements.length; idx<len; ++idx) {
elem = elements[idx];
item = doc.createElement("li"); // Skapa li
// sätt li:ns innehåll till info om nodens namn och dess html
item.innerHTML = "tag: " + elem.nodeName +", html: " + elem.innerHTML;
list.appendChild(item); // Lägg till li till skapad ul
}
if (!target) {target = doc.body;} // Om man inte angav någon target, använd body
target.appendChild(list); // Lägg till skapade ul sist i ett element (target)
}

printElementsWithClassName("tuna");
</script>
</body>
[/PHP]

Den här kan man helt klart även köra efter onload och dylikt.

Dessa två funktioner för att skapa och lägga in noder användes här, men det finns ju många fler:
createElement: https://developer.mozilla.org/en-US/docs/Web/API/document.createElement
appendChild: https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild


/p