javascript - Hvordan få elementer etter klassenavn?

Ved å bruke JavaScript kan vi hente et element etter id ved å bruke følgende syntaks:

var x=document.getElementById("by_id");

Jeg prøvde å bruke følgende for å få tak i elementet etter klasse:

var y=document.getElementByClass("by_class");

Men det resulterte i en feil:

getElementByClass is not function

Hvordan kan jeg hente et element etter klassen sin?

Svar #1

Navnet på DOM-funksjonen er faktisk getElementsByClassName, ikke getElementByClassName, rett og slett fordi mer enn ett element på siden kan ha samme klasse, derfor: Elements.

Returverdien av dette vil være en NodeList-instans, eller et supersett av NodeList (FF returnerer for eksempel en instans av HTMLCollection). Uansett: returverdien er et array-lignende objekt:

var y = document.getElementsByClassName('foo');
var aNode = y[0];

Hvis du av en eller annen grunn trenger returobjektet som et array, kan du gjøre det enkelt, på grunn av dets magiske length-egenskap:

var arrFromList = Array.prototype.slice.call(y);
//or as per AntonB's comment:
var arrFromList = [].slice.call(y);

Som yckart foreslo, ville querySelector('.foo') og querySelectorAll('.foo') være å foretrekke, ettersom de faktisk er bedre støttet (93,99 % mot 87,24 %), ifølge caniuse.com:

  • querySelector(all)
  • getElementsByClassName
  • Ikke bruk w3schools for å lære noe
  • Se MDN for nøyaktig informasjon

Svar #2

Et annet alternativ er å bruke querySelector('.foo') eller querySelectorAll('.foo') som har bredere nettleserstøtte enn getElementsByClassName.

http://caniuse.com/#feat=queryselector

http://caniuse.com/#feat=getelementsbyclassname

Svar #3

Du må bruke document.getElementsByClassName('class_name');

og ikke glem at den returnerte verdien er et array av elementer, så hvis du vil ha det første, bruk:

document.getElementsByClassName('class_name')[0]

OPPDATERING

Nå kan du bruke:

document.querySelector(".class_name") for å hente det første elementet med CSS-klassen class_name (null vil bli returnert hvis ingen av elementene på siden har dette klassenavnet)

eller document.querySelectorAll(".class_name") for å få en NodeList av elementer med css-klassen class_name (en tom NodeList vil bli returnert hvis ingen av elementene på siden har dette klassenavnet).

Svar #4

du kan bruke

getElementsByClassName

anta at du har noen elementer og har brukt et klassenavn 'test', så kan du hente elementer som følger

var tests = document.getElementsByClassName('test');

den returnerer en instans NodeList, eller dens supersett: HTMLCollection (FF).

Les mer

Relaterte artikler