Millised on erinevad viisid JavaScriptis DOM-i elementide valimiseks?

See õpetus tutvustab erinevaid meetodeid DOM-i elementide valimiseks JavaScriptis.

Millised on erinevad viisid JavaScriptis DOM-i elementide valimiseks?

Kasutage JavaScriptis DOM-i elementide valimiseks järgmisi meetodeid.

• meetod getElementById().
• getElementsByClassName() meetod
• meetod getElementsByTagName().
• querySelector() meetod
• querySelectorAll() meetod

1. meetod: valige DOM-i elemendid, kasutades meetodit 'getElementById()'.

DOM-i elementide valimiseks kasutage ' getElementById() ” meetod, mis põhineb elemendile määratud ID-l. See meetod valib ühe elemendi selle ainulaadse ' id ” atribuut. See annab viite määratud ID-ga elemendile ja tagastab ' null ” kui sobivat elementi ei leitud.

Süntaks

Kasutage meetodi getElementById() jaoks alltoodud süntaksit:

Siin on ' idName ” on elemendile määratud id-atribuudi nimi.

Näide

Looge HTML-failis elemendis div kaks pealkirja, kasutades ' h4 ” silti. Määrake ID-d div elemendile ja pealkirjade 'h4' elementidele nimega ' div ” ja „ pealkiri ”, vastavalt. Lisage elemendile div stiiliatribuut, et joondada see keskele. Samuti määrake klass ' osa ” teise pealkirja, mis muudab selle värvi:

Nüüd saame ' div ' elementi kasutades sellele määratud ID-d, kasutades ' getElementById() ” meetod:

Prindi element ID vastu div ” konsoolil:

On näha, et vajalik HTML-element on edukalt alla laaditud:

2. meetod: valige DOM-i elemendid, kasutades meetodit 'getElementsByClassName()'

Samuti saate valida DOM-i elemendi, kasutades sellele määratud klassi, kasutades ' getElementsByClassName() ” meetod. See valib elementide loendi nende klassi nime järgi. See väljastab reaalajas HTMLCollectioni objekti, massiivilaadse objekti, mis sisaldab kõiki määratud klassinimega elemente.

Süntaks

Meetodi „getElementsByClassName()” jaoks kasutatakse järgmist süntaksit:

Näide

Siit saame elemendi, mis sisaldab klassi ' osa ” ja prindi konsoolile:

Nagu näete väljundis, tagastati massiiv pikkusega 1, mis sisaldab elementi ' h4 'kes kuulub klassi' osa ”:

3. meetod: valige DOM-i elemendid, kasutades meetodit 'getElementsByTagName()'

Kui elemendile pole ID-d või klassi määratud, kasutage ' getElementsByTagName() ” meetod, et saada element nende sildi nime järgi. Samuti tagastab see reaalajas HTMLCollectioni objekti, mis on massiivilaadne objekt, mis sisaldab kõiki elemente, millel on määratud sildi nimi.

Süntaks

Järgige sildi nime alusel elementide valimisel etteantud süntaksit:

Näide

Käivitage meetod 'getElementsByTagName()', edastades sildi nime ' h4 ”. Seejärel printige elementide loend, mis vastavad konsooli määratud sildi nimele:

Väljund

4. meetod: valige DOM-i elemendid, kasutades meetodit 'querySelector()'.

Kasuta ' querySelector() ” meetod DOM-elemendi hankimiseks. See valib ühe elemendi, mis vastab määratud CSS-valijale. Tagastab esimese dokumendist leitud sobiva elemendi. Kui ükski element ei sobi, annab see ' null ”.

Süntaks

Allpool nimetatud süntaksit kasutatakse meetodi 'querySelector()' jaoks:

Siin on atribuudiks CSS-i valija, näiteks ID või klass nagu ' #minuId '' .minu klass “.

Näide

Kutsuge meetod 'querySelector()' ja edastage ID ' #pealkiri ', et saada sama ID-d sisaldavad elemendid:

See annab väljundina esimese sobitatud elemendi:

5. meetod: valige DOM-i elemendid, kasutades meetodit 'querySelectorAll()'.

Kui soovite valida kõik elemendid, mis sisaldavad määratud atribuuti (id või klass), kasutage ' querySelectorAll() ” meetod. See valib elementide loendi, mis vastavad konkreetsele määratletud CSS-i valijale. See annab NodeListi objekti, mis sisaldab kõiki dokumendi elemente, mis vastasid konkreetsele CSS-i valijale.

Süntaks

Kasutage elementide loendi hankimiseks järgmist süntaksit:

Näide

ID-d sisaldava sobitatud elemendi loendi hankimiseks ' pealkiri ' koos ' querySelectorAll() ” meetodil ja printida konsooli elementidele:

Väljund

See kõik puudutab DOM-i elementide valimist JavaScriptis.

Järeldus

JavaScriptis DOM-i elementide valimiseks kasutage ' getElementById() ”, „ getElementsByClassName() ”, „ getElementsByTagName() ”, „ querySelector() ”, või „ querySelectorAll() ” meetod. Need meetodid pakuvad erinevaid viise elementide valimiseks DOM-ist nende kordumatute identifikaatorite, klassinimede, sildinimede või CSS-i valijate põhjal. See õpetus demonstreeris erinevaid meetodeid DOM-i elementide valimiseks JavaScriptis.