I denne artikkelen vil vi bli kjent med DOM-egenskaper og attributter, vurdere hvordan de skiller seg og hvordan du kan jobbe med dem riktig. La oss se på hvilke metoder JavaScript har for å utføre operasjoner på attributter.
Hva er forskjellen mellom et attributt og en DOM-egenskap?Attributter er HTML-enheter som vi kan legge til visse data til elementer i HTML-kode med.
Når en nettleser ber om en side, mottar den HTML-kildekoden. Etter det analyserer den denne koden og bygger en DOM basert på den. Under denne prosessen blir HTML-attributter til elementer oversatt til tilsvarende DOM-egenskaper.
For eksempel vil nettleseren, når den leser følgende linje med HTML-kode, opprette følgende DOM-egenskaper for dette elementet: id , className , src og alt .
Tilgang til disse eiendommene i JavaScript-kode utføres som for objektegenskaper. Objektet her er en DOM-node (element).
Et eksempel der vi får verdiene til DOM-egenskaper for elementet gitt ovenfor og sender ut verdiene deres til konsollen:
// få elementet var brandImg = document.querySelector("#brand"); // vis verdiene til elementets DOM-egenskaper til konsollen console.log(brandImg.id); // "merke" console.log(merkeImg.klassenavn); // "brand" console.log(brandImg.src); // "/logo.png" console.log(merkeImg.alt); // "sidelogo"
Noen DOM-egenskapsnavn samsvarer ikke med attributtnavn. En av disse er klasseattributtet. Dette attributtet tilsvarer DOM-egenskapen className. Denne forskjellen skyldes det faktum at klasse er et nøkkelord i JavaScript, det er reservert og kan ikke brukes. På grunn av dette bestemte utviklerne av standarden å bruke et annet navn for samsvar, som ble valgt som className .
En annen nyanse er knyttet til det faktum at oversettelsen av HTML-attributter spesifisert i kildekoden dokument, er DOM-egenskaper ikke alltid implementert én til én.
Hvis et element har et ikke-standard HTML-attributt, opprettes ikke en egenskap som tilsvarer det i DOM.
// få elementet mydiv = document.querySelector("#mydiv"); // få verdien av elementets alt-egenskap og utfør den til konsollen console.log(mydiv.alt); // undefined // hente verdien av elementets alt-attributt og sende det til konsollen console.log(mydiv.getAttribute("alt")); // "..."
En annen forskjell er at verdiene til visse HTML-attributter og deres tilsvarende DOM-egenskaper kan være forskjellige. De. et attributt kan ha én verdi, og en DOM-egenskap opprettet basert på den kan ha en annen.
En av disse attributtene er sjekket.
Verdien til det sjekkede HTML-attributtet i dette tilfellet er en tom streng. Men egenskapen som tilsvarer dette attributtet i DOM vil ha verdien true . Fordi i henhold til standardens regler, for å sette sann, er det nok bare å nevne dette attributtet i HTML-koden, og det spiller ingen rolle hvilken verdi det vil ha.
Dessuten, selv om vi ikke spesifiserer det sjekkede attributtet i HTML-koden for et input-element med type avkrysningsboks, vil det fortsatt opprettes en avkrysset egenskap for det i DOM, men det vil være lik false.
I tillegg lar JavaScript deg også jobbe med attributter. Det er spesielle metoder for dette i DOM API. Men det er lurt å bruke dem bare når du virkelig trenger å jobbe med data på denne måten.
Samtidig må du vite at når vi endrer DOM-egenskapen til et element, endres også den tilsvarende attributten, og omvendt. Men denne prosessen i nettlesere utføres ikke alltid én til én.
De viktigste forskjellene mellom DOM-egenskaper og attributter er:
- attributtverdien er alltid en streng, og DOM-egenskapsverdien er en bestemt datatype (ikke nødvendigvis en streng);
- Attributtnavnet skiller mellom store og små bokstaver, og DOM-egenskapene skiller mellom store og små bokstaver. De. i HTML-kode kan vi for eksempel skrive HTML id-attributtet som Id , ID , etc. Det samme gjelder attributtnavnet, som vi angir spesielt JavaScript-metoderå jobbe med det. Men vi kan bare få tilgang til den tilsvarende DOM-egenskapen med id og på ingen annen måte.
Arbeid med egenskapene til elementer i JavaScript, som nevnt ovenfor, utføres som med egenskapene til objekter.
Men for å få tilgang til egenskapen til et element, må den først skaffes. Du kan få et DOM-element i JavaScript, for eksempel ved å bruke den universelle querySelector-metoden, og en samling av DOM-elementer, for eksempel ved å bruke querySelectorAll .
Som et første eksempel kan du vurdere følgende HTML-element:
Informasjonsmeldingstekst... var alert = document.querySelector("#alert"); // få elementet
Basert på det vil vi analysere hvordan du får tak i DOM-egenskaper, endre dem og legge til nye.
Leser DOM-egenskapsverdier:
// få verdien av DOM-egenskapen id var alertId = alert.id; // "alert" // få verdien av DOM-egenskapen className var alertClass = alert.className; // "alert alert-info" // få verdien av DOM-egenskapstittelen var alertId = alert.title; // "Hjelpetekst..."
Endre DOM-egenskapsverdier:
// for å endre verdien til en DOM-egenskap, trenger du bare å tilordne en ny verdi til den alert.title = "Ny verktøytipstekst"; // присвоим DOM-свойству title элемента новое значение // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alertId = "Новый текст подсказки"; // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alert.className = "alert alert-warning"; !}
Legger til DOM-egenskaper:
Alert.lang = "ru"; // sett lang-egenskapen til "ru" alert.dir = "ltr"; // sett dir-egenskapen til "ltr"
Et eksempel der vi vil sende ut til konsollen alle klasseverdiene som p-elementene har på siden:
Var avsnitt = document.querySelectorAll("p"); for (var i = 0, lengde = avsnitt.lengde ; i< length; i++) { if (paragraphs[i].className) { console.log(paragraphs[i].className); }
Et eksempel der vi setter lang-egenskapen til alle elementer med innholdsklassen med verdien "ru":
Var contents = document.querySelectorAll(.content"); for (var i = 0, lengde = innhold.lengde; i< length; i++) { contents[i].lang = "ru"; }
Elementattributter og metoder for å arbeide med demAttributter settes i utgangspunktet i HTML-kode. Selv om de på en eller annen måte er forbundet med eiendommer, er de ikke det samme. I de fleste tilfeller bør du jobbe med egenskaper og bare få tilgang til attributter når du virkelig trenger det.
Attributtverdier, i motsetning til DOM-egenskaper, som nevnt ovenfor, er alltid en streng.
JavaScript har fire metoder for å utføre operasjoner relatert til attributter:
- .hasAttribute("attribute_name") – sjekker om elementet har det spesifiserte attributtet. Hvis elementet har attributtet som kontrolleres, da denne metoden returnerer sant, ellers usant.
- .getAttribute("attributt_name") – henter attributtverdien. Hvis elementet ikke har det spesifiserte attributtet, returnerer denne metoden en tom streng ("") eller null .
- .setAttribute("attributt_name", "attribute_value") – setter det spesifiserte attributtet med den angitte verdien til elementet. Hvis elementet har det spesifiserte attributtet, vil denne metoden ganske enkelt endre verdien.
- .removeAttribute("attribute_name") - fjerner det spesifiserte attributtet fra elementet.
La oss se på eksempler.
Et veldig interessant eksempel med verdi-attributtet.
Eksempel med verdiattributtet var name = document.querySelector("input"); // få elementetLa oss få verdien av value-attributtet og DOM-egenskapsverdien:
// få verdien av verdiattributtet til elementet name.getAttribute("verdi"); // "Bob" // få verdien av DOM-egenskapen verdi name.value; // "Bob" // oppdater verdien til verdiattributtet, sett den til en ny verdi name.setAttribute("verdi", "Tom"); // "Tom" // få verdien av DOM-egenskapen verdi name.value; // "Tom"
Dette eksemplet viser at når verdiattributtet endres, endrer nettleseren automatisk verdien DOM-egenskapen tilsvarende.
La oss nå gjøre det motsatte, nemlig endre verdien på DOM-egenskapen og sjekke om attributtverdien endres:
// angi en ny verdi for DOM-egenskapens verdi name.value = "John"; // получим значение атрибута value у элемента name.getAttribute("value"); // "Tom" !}
Dette eksemplet viser at endring av en DOM-egenskap ikke alltid fører til en tilsvarende endring i attributtet. De. i dette tilfellet endrer ikke verdien DOM-egenskapen dens tilsvarende attributt.
Det samme vil skje når brukeren skriver inn tekst i dette feltet. DOM-egenskapsverdien vil inneholde den faktiske verdien, og det tilsvarende attributtet vil inneholde den opprinnelige verdien eller den vi angir, for eksempel ved bruk av setAttribute-metoden.
Dette eksemplet viser at det er mer riktig å alltid jobbe med DOM-egenskaper, og du trenger kun å få tilgang til attributtet når det virkelig er nødvendig.
Selv i tilfellet der du trenger å få startverdien som vi angir i HTML, kan du bruke egenskapen. Egenskapen som inneholder startverdien til verdiattributtet kalles defaultValue .
Name.defaultValue; //Tom
Et annet veldig interessant eksempel, men nå med href-attributtet.
Eksempel med href-attributtEt eksempel der vi trenger å få verdien av lenken slik den ble satt i HTML-en.
var side2 = document.querySelector("#link"); page2.getAttribute("href"); // side2.html side2.href; // full URL, for eksempel: http://localhost/page2.html
I dette eksemplet inneholder href-attributtet og href DOM-egenskapen forskjellige verdier. Href-attributtet er det vi angir i koden, og DOM-egenskapen er den fullstendige URL-en. Denne forskjellen er diktert av standarden om at nettleseren må løse href-verdien til hele URL-en.
Derfor, hvis vi trenger å få det som er i attributtet, kan vi i dette tilfellet ikke klare oss uten getAttribute-metoden.
Til slutt, la oss se på det valgte attributtet.
Eksempel med valgt attributtEt eksempel som viser hvordan du kan få verdien av det valgte alternativet:
ingen vurdering 1 2 3 4 5 // få utvalgselementet var mark = document.querySelector("#mark"); // 1 vei mark.querySelector("opsjon:kontrollert").verdi; // Metode 2 mark.value;
Et eksempel som viser hvordan du kan få de valgte alternativverdiene i et utvalgt element:
ingen vurdering 1 2 3 4 5 // få utvalgselementet var mark = document.querySelector("#mark"); // Metode 1 (ved å lage en matrise og fylle den med verdiene til de valgte alternativene) var arr = ; for (var i = 0, lengde = mark.options.length; i< length; i++) { if (mark.options[i].selected) { arr.push(mark.options[i].value); } } // 2 способ (более современный, с использованием DOM-свойства selectedOptions) var arr = Array.from(mark.selectedOptions, option =>option.value)
En annen måte å jobbe med attributter på (attributes-egenskapen)I JavaScript har hvert element en attributt-egenskap, som kan brukes til å hente alle attributtene som et NamedNodeMap-objekt.
Denne metoden kan brukes når du for eksempel skal iterere gjennom alle attributtene til et element.
Et attributt i denne samlingen er tilgjengelig via indeksen eller ved å bruke elementmetoden. Attributter i denne samlingen regnes fra 0.
La oss for eksempel vise alle attributtene til et bestemt element til konsollen:
JEG ELSKER JAVASCRIPT
// få elementet ved identifikatormeldingen var message = document.querySelector("#melding"); // få sine attributter var attrs = message.attributes; // gå gjennom alle attributtene ved å bruke en loop (attrs.length – antall attributter) for (var i = 0, length = attrs.length; i< length; i++) { // attrs[i] или attrs.item(i) – обращение к атрибуту в коллекции по его порядковому номеру // attrs[i].name – имя атрибута // attrs[i].value – значение атрибута (с помощью него можно также изменить значение атрибута) console.log(attrs[i].name + " = " + attrs[i].value); // или с помощью метода item console.log(attrs.item(i).name + " = " + attrs.item(i).value); // пример как можно изменить значение через свойство value // if (attrs[i].name === "class") { // attr[i].value = "info"; // } } // в результате выполнения: // id = message // class = text // style = text-align: center;I tillegg kan du også jobbe med denne samlingen ved å bruke følgende metoder:
- .getNamedItem("attributt_name") – får verdien av det spesifiserte attributtet (hvis det spesifiserte attributtet ikke er til stede på elementet, vil resultatet være null).
- .setNamedItem("attribute_node") – legger til et nytt attributt til et element eller oppdaterer verdien til et eksisterende. For å opprette et attributt, må du bruke metoden document.createAttribute(), som må sendes attributtnavnet som en parameter. Det opprettede attributtet må da tildeles en verdi ved å bruke value-egenskapen.
- .removeNamedItem("attribute_name") – fjerner det spesifiserte attributtet fra et element (returnerer det fjernede attributtet som resultat).
Et eksempel på arbeid med attributter gjennom metodene getNamedItem, setNamedItem og removeNamedItem:
JEG ELSKER JAVASCRIPT
// få elementet ved identifikatormeldingen var message = document.querySelector("#melding");"; // устанавливаем атрибут элементу attrs.setNamedItem(attrStyle); // Задача №3. удалить атрибут class у элемента attrs.removeNamedItem("class"); !}// få sine attributter var attrs = message.attributes;- // Oppgave nr. 1. Hent verdien av id-attributtet console.log(attrs.getNamedItem("id"));
- // Oppgave nr. 2. Angi attributtet (hvis det finnes, endre verdien, ellers legg til en ny) // lag stilattributtet og lagre det i attrStyle-variabelen var attrStyle = document.createAttribute("style");
// tilordne en verdi til attributtet ved å bruke value-egenskapen attrStyle.value = "text-align: left; Oppgaver Skriv ut til konsollen alle dokumentelementer som har id-attributtet.
Legg til et tittelattributt til alle bildene på siden hvis de ikke har dette attributtet. Sett attributtverdien lik alt attributtverdien.
Du kan lage en egendefinert bindende binding, som vil sjekke verdien av en spesifikk observerbar boolean før du legger til eller ikke attributter. Se dette eksemplet:
Ko.bindingHandlers.attrIf = ( oppdatering: funksjon (element, valueAccessor, allBindingsAccessor) ( var h = ko.utils.unwrapObservable(valueAccessor()); var show = ko.utils.unwrapObservable(h._if); if (show) ( ko.bindingHandlers.attr.update(element, valueAccessor, allBindingsAccessor); ) else ( for (var k i h) ( if (h.hasOwnProperty(k) && k.indexOf("_") !== 0) ( $(element).fjernAttr(k); link
Jeg skulle ønske jeg bare kunne svare @gbs, men jeg kan ikke. Min løsning ville vært å ha to identiske HTML-element: en med attributtet, uten det og en knockout-betingelse for å legge til en av dem i henhold til elementet. Jeg er også klar over denne vanlige forventningen, men hvilken løsning er mer effektiv? Angir verdien til et attributt på det angitte elementet. Hvis attributtet allerede eksisterer, oppdateres verdien; ellers legges det til et nytt attributt med det angitte navnet og verdien., Syntaks ElementBoolske attributter anses å være sanne hvis de "er til stede på elementet i det hele tatt, uavhengig av deres faktiske verdi; som regel bør du spesifisere den tomme strengen ("") i verdi (noen bruker attributtnavnet; dette fungerer, men er ikke-standard). Se nedenfor for en praktisk demonstrasjon.
Siden den spesifiserte verdien blir konvertert til en streng, gjør ikke det å spesifisere null nødvendigvis det du forventer. I stedet for å fjerne attributtet eller sette verdien til null, setter det i stedet attributtets verdi til strengen "null". Hvis du ønsker å fjerne et attributt, kall removeAttribute() .
Returverdi Unntak InvalidCharacterError Det angitte attributtnavnet inneholder ett eller flere tegn som ikke er gyldige i attributtnavn. EksempelI følgende eksempel brukes setAttribute() til å angi attributter på en .
HTML Hello World JavaScript var b = document.querySelector("button"); b.setAttribute("navn", "helloButton"); b.setAttribute("deaktivert", "");Dette viser to ting:
- Det første kallet til setAttribute() ovenfor viser endring av navnattributts verdi til "helloButton". Du kan se dette ved å bruke nettleserens sideinspektør (Chrome, Edge, Firefox, Safari).
- For å angi verdien til et boolsk attributt, for eksempel deaktivert , kan du angi en hvilken som helst verdi. En tom streng eller navnet på attributtet er anbefalte verdier. Alt som betyr noe er at hvis attributtet er til stede i det hele tatt, uavhengig av dens faktiske verdi, anses verdien for å være sann. Fraværet av attributtet betyr at verdien er falsk. Ved å sette verdien av disabled-attributtet til den tomme strengen (""), setter vi deaktivert til true , noe som resulterer i at knappen deaktiveres.
DOM-metoder som omhandler elementets attributter:
| setAttribute(DOM 1) | setAttributeNS | setAttributeNode | setAttributeNodeNS |
| getAttribute(DOM 1) | getAttributeNS | getAttributeNode | getAttributeNodeNS |
| hasAttribute(DOM2) | hasAttributeNS | - | - |
| removeAttribute(DOM 1) | removeAttributeNS | removeAttributeNode | - |
- DOM Level 2 Core: setAttribute (introdusert i DOM Level 1 Core)
Kompatibilitetstabellen på denne siden er generert fra strukturerte data. Hvis du ønsker å bidra til dataene, vennligst sjekk ut https://github.com/mdn/browser-compat-data og send oss en pull-forespørsel.
Oppdater kompatibilitetsdata på GitHub
| Stasjonær mobil | |||||||||||
| Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari på iOS Samsung Internett | |||||||||||
| Chrome Full støtte Ja | Edge Full støtte 12 | Firefox Full støtte Ja | IE Full støtte 5 Notater Full støtte 5Notater Notater I Internet Explorer 7 og tidligere angir ikke setAttribute stiler og fjerner hendelser når du prøver å angi dem. | Opera Full støtte Ja | Safari Full støtte 6 | WebView Android Full støtte Ja | Chrome Android Full støtte Ja | Firefox Android Full støtte Ja | Opera Android Full støtte Ja | Safari iOS Full støtte Ja | Samsung Internett Android Full støtte Ja |
Å bruke setAttribute() for å endre visse attributter, spesielt verdi i XUL, fungerer inkonsekvent, ettersom attributtet spesifiserer standardverdien. For å få tilgang til eller endre gjeldende verdier, bør du bruke egenskapene. Bruk for eksempel Element.value i stedet for Element.setAttribute() .
Leksjonen vil dekke begynnelsen av emnet: dokumentobjektmodellen (javaScript DOM) er grunnlaget for dynamisk HTML, metoder for objekttilgang vil bli studert og metoder for å behandle javascript-hendelser vil bli vurdert.
- Generelt er objektet kompositt type data som kombinerer mange verdier til felles modul og lar deg lagre og hente verdier ved navn etter behov.
- I javascript er det noe slikt som DOM - Dokumentobjekt Modell— objektmodell av en nettside (html-side).
- Dokumentkoder eller, som de også sier, dokumentnoder er objektene.
Tidligere har vi allerede begynt å bli kjent med konseptet i javascript.
La oss se på diagrammet objekthierarki i JavaScript, og hvor i hierarkiet dokumentobjektet omtalt i dette emnet befinner seg.
Skriptelementet har følgende attributter:
Eksempel:
/* Gjør at js-filer kan lastes parallelt og kjøres umiddelbart etter lasting, uten å vente på at resten av siden skal behandles */ /* Lar nettleseren begynne å laste js-filer parallelt uten å stoppe videre behandling av siden. De blir henrettet etter full analyse dokumentobjektmodell */
Egenskaper og attributter til dokumentobjektet i JavaScriptDokumentobjektet representerer en nettside.
Viktig: For å få tilgang til egenskapene og metodene til et objekt i javaScript, som når du arbeider med andre objekter, brukes punktnotasjon:
de. først skrives selve objektet, deretter indikeres dets egenskap, attributt eller metode med en prikk og uten mellomrom
object.property object.attribute object.method()La oss se på et eksempel:
Eksempel: la det være en kode i et html-dokument
Mitt element
og spesifikt for ham css-stil(selv to stiler, den andre vil være nyttig for oppgaven):
| .small( farge : rød ; skriftstørrelse : liten ; ) .big( farge : blå ; skriftstørrelse : stor; ) |
.small( color:red; font-size:small; ) .big( color:blue; font-size:big; )
Nødvendig:
La oss fullføre oppgaven i rekkefølge:
✍ Løsning:
Siden dette javascript språk, så kan objektet oppfinnes og tildeles en hvilken som helst egenskap med hvilken som helst verdi. Men først, la oss få tilgang til objektet (tilgang til objektet vil bli diskutert i detalj senere i denne leksjonen):
// få tilgang til objektet med dets id var element = document.getElementById("MyElem"); element.myProperty = 5; // tilordne egenskapen alert(element.myProperty); // vises i en dialogboks
Den neste oppgaven er relatert til et objektattributt. Et objektattributt er taggens attributter. De. i vårt tilfelle er det to av dem: klasseattributtet med verdien small og id-attributtet. Vi skal jobbe med klasseattributtet.
La oss nå legge til javascript-kode for å vise attributtverdien til objektet vårt. Koden må være etter hovedmerker:
// få tilgang til objektet med dets id var element = document.getElementById("MyElem"); alert(element.getAttribute("klasse")); // vises i en dialogboks
Og den siste oppgaven: endre attributtverdien. Vi har en stil for dette. "stor". La oss erstatte verdien av klasseattributtet med denne stilen:
// få tilgang til objektet med dets id var element = document.getElementById("MyElem"); element.setAttribute("klasse","stor");
Som et resultat vil elementet vårt bli større og farget blått (klasse stor).
La oss nå se nærmere på metodene som er brukt i eksemplet for å jobbe med attributter.
Attributter kan legges til, slettes og endres. Det er spesielle metoder for dette:
- Legge til et attributt (angi en ny verdi for det):
- Sjekker for tilstedeværelsen av dette attributtet:
getAttribute(attr)
removeAttribute(attr)
Ulike måter å jobbe med attributter på
Eksempel: Skriv ut verdien til verdiattributtet til en tekstblokk.
✍ Løsning:
- La det være en tekstblokk:
- La oss se på flere måter å få attributtverdien på (bruk alert()-metoden for utdata):
var elem = document.getElementById("MyElem"); var x = "verdi";
| elem.getAttribute("verdi") |
elem.getAttribute("verdi")
2. punktnotasjon:
| elem.attributes.value |
elem.attributes.value
3. parentesnotasjon:
var element = document.getElementById("t1"); alert(...) element.setAttribute(...);
Du kan også angi attributtverdier på flere måter:
var x = "nøkkel"; // nøkkel - attributtnavn, val - verdi for attributtet // 1. elem.setAttribute("key", "val") // 2. elem.attributes.key = "val" // 3. elem.attributes[ " key"] = "val" // 4. elem.setAttribute(x, "val")
KroppselementegenskaperGjennom dokumentobjektet får du tilgang til hoveddelen av dokumentet – body-taggen – med noen nyttige egenskaper.
For eksempel har body-taggen to egenskaper: bredden og høyden på klientvinduet:
document.body.clientHeight — høyden på klientvinduet
document.body.clientWidth — bredden på klientvinduet
Men det viktigste, som vi allerede har lært, er at gjennom dokumentobjektet, gjennom spesielle metoder, gis tilgang til alle sideelementer, det vil si tagger.
Viktig: Når du får tilgang til sidetagger på denne måten, må skriptet være på slutten av elementtreet før du lukker brødteksten ! Siden når skriptet kjøres, skal alle elementene allerede være "tegnet" av nettleseren på skjermen
Jobb js8_1 . Vis en melding om størrelsen på nettleservinduet: for eksempel, "nettleservinduets dimensjoner 600 x 400"
Tilgang til dokumentelementer i JavaScriptDet er flere alternativer for å få tilgang til eller søke etter objekter:
La oss vurdere hvert av alternativene mer detaljert.
Syntaks: document.getElementById(id)
Metoden getElementById() returnerer selve elementet, som deretter kan brukes til å få tilgang til data
Eksempel: Siden har et tekstfelt med id="cake"-attributtet:
...
Nødvendig
✍ Løsning:
alert(document.getElementById("kake").verdi); // returnerer "antall kaker"
Du kan gjøre det samme ved å få tilgang til objektet gjennom en variabel:
var a=document.getElementById("kake"); alert(a.verdi); // vis verdien av verdiattributtet, dvs. tekst "antall kaker"
Viktig: Skriptet må være plassert etter taggen!
Syntaks:
document.getElementsByTagName(navn);
Eksempel: Siden har et tekstfelt (input tag) med et verdiattributt:
...
Obligatorisk: Vis verdien av verdiattributtet
GetElementsByTagName-metoden gir tilgang gjennom en variabel til alle input-elementer (dvs. en rekke input-elementer), selv om dette elementet er det eneste på siden. For å få tilgang til et spesifikt element, for eksempel det første, angir vi dets indeks (matrisen starter på indeks null).
✍ Løsning:
- Vi får tilgang til et spesifikt element etter indeks:
var a =document.getElementsByTagName("input"); alert(a.verdi); // returnerer "antall kaker"
Syntaks:
document.getElementsByName(navn);
Metoden getElementsByName("...") returnerer en rekke objekter hvis navneattributt er lik verdien spesifisert som en metodeparameter. Hvis det bare er ett slikt element på siden, returnerer metoden fortsatt en matrise (med bare ett enkelt element).
Eksempel: la oss si at det er et element i dokumentet:
var element = document.getElementsByName("MyElem"); alert(element.verdi);
I dette eksemplet er det ett element, men referansen er til null-elementet i matrisen.
Viktig: Metoden fungerer bare med de elementene som navneattributtet er eksplisitt angitt for i spesifikasjonen: disse er form , input , a , select , textarea og en rekke andre, mer sjeldne, tagger.
Document.getElementsByName-metoden vil ikke fungere med andre elementer som div , p , etc.
Barn er tilgjengelig i javascript gjennom childNodes-egenskapen. Eiendommen tilhører det overordnede objektet.
| document.getElementById(roditel).childNodes; |
document.getElementById(roditel).childNodes;
La oss se på et eksempel der bildekoder er plassert i en beholder kalt en div-tag. Dermed er div-taggen overordnet til bildedataene, og selve img-taggene er følgelig underordnede av div-taggen:
La oss nå sende ut til modalt vindu verdier av matriseelementer med etterkommere, dvs. img-tagger:
var myDiv=document.getElementById("div_for_img"); // få tilgang til den overordnede containeren var childMas=myDiv.childNodes; // rekke av etterkommere for (var i =0; i< childMas.length;i++){ alert(childMas[i].src); }
Legg merke til at det er praktisk å bruke en løkke for å iterere gjennom elementene i en etterkommer-array. De. i vårt eksempel får vi en syklus:
| ... for (var a i childMas) ( alert(childMas[ a].src ); ) |
For (var a i childMas)( alert(childMas[a].src); )
La oss se på andre metoder ved å bruke et eksempel:
| 1 3 4 |
1 3 4
Adgang:
| ... // uønskede og avviklede elementtilgangsmetoder: alert(document.forms [ 0 ] .name ); |
// f alert(dokument.skjemaer [ 0 ] .elementer [ 0 ] .type );
// tekstvarsling(dokument.skjemaer [0] .elementer [2] .alternativer [1] .id); // o2 alert(dokument.f .b .type ) ;// button alert(document.f .s .name ) ;
// ss alert(document.f .s .options [ 1 ] .id );
// o2 // foretrukne metoder for tilgang til elementer alert(document.getElementById ("t") .type );"; document.getElementById("b1").style.backgroundColor = "red";!}
// text alert(document.getElementById ("s") .name );
| // ss alert(document.getElementById ("s") .options [ 1 ] .id ); |
// 02 alert(document.getElementById ("o3") .tekst );
// 4 ... 
Eksempel: Lag en knapp og et tekstfelt i et HTML-dokument. Bruk et skript, fargelegg knappbakgrunnen (style.backgroundColor-egenskapen til knappen) og vis inskripsjonen
Brukerinndata kan ikke stoles på. Det er urimelig å anta at brukere vil sjekke data når de legger inn data. Så du må bruke javascript for dette.
For å sjekke om tekstfeltet er tomt (for eksempel etter at brukeren har fylt ut dataene til et spørreskjema), bør du referere til egenskapen value. Hvis egenskapsverdien er en tom streng (""), må du på en eller annen måte varsle brukeren om dette.
if(document.getElementById("navn").value=="") (noen handlinger, for eksempel visning av en melding som ber deg fylle ut et felt);
I tillegg kan du klare deg uten manus. Ved inngangskoden tekstfelt det er et mønsterattributt. verdien angir et regulært uttrykk for å kontrollere dataene i det gitte tekstfeltet i skjemaet. Hvis attributtet er til stede mønster, vil ikke skjemaet sendes inn før dette tekstfeltet er fylt ut riktig.
For eksempel, for å sjekke om et felt er tomt:
Tekst i stedet for numerisk verdi: isNaN-funksjon
Hvis et felt krever inntasting av en numerisk verdi, men brukeren i stedet skriver inn tekst, må isNaN-funksjonen brukes. "er ikke et tall?"), som sjekker typen inndata og returnerer sann hvis tekstdata legges inn i stedet for numeriske data.
At. hvis true returneres, må brukeren varsles om å angi riktig format, dvs. tall.
if(isNaN(document.getElementById("minutes").value))( varsel som krever at du oppgir numeriske data);
Gitt en side med elementer å fylle ut: 
Fragment html-kode:
| 1 2 3 4 5 6 7 8 9 10 11 12 | Navn: Antall smultringer: Minutter: Sammendrag: Avgift: Resultat: ... |
Navn:
Antall smultringer:
Minutter:
Sammendrag:
Avgift:
Resultat:
...
Nødvendig:
Fyll ut de tomme feltene i kodebiten nedenfor som kontrollerer at to tekstfelt er riktig fylt ut: Navn(id="navn") og minutter(id="minutter"). Bruk en hake for å sikre at feltet er tomt ("") og at det numeriske feltet er riktig fylt ut (isNaN).
* Utfør oppgaven også med mønsterattributtet til tekstfelt ved å bruke .
Skriptfragment:
Koden bruker tidligere lærte forhold for å bygge komplekse forhold.
Et nytt konsept for deg kaller en funksjon som en hendelsesbehandler for knapp:
onclick="placeOrder();"
Når knappen klikkes, vil placeOrder()-funksjonen bli kalt
Denne opplæringen handler om å lese og endre elementattributter i jQuery.
Attributter er et navn/verdi-par som er tilordnet elementer i en tag. Eksempler på attributter ( href, tittel, src, klasse):
Her er oppsummeringsteksten
- attr() for å lese, legge til og endre attributter
- removeAttr() for å fjerne attributter
Denne leksjonen dekker arbeid med metodene attr() og removeAttr().
Det er spesielle jQuery-metoder for å jobbe med CSS-klasser, som er beskrevet i en annen leksjon. Når du jobber med et prosjekt i jQuery, må du manipulere CSS-klasser mye, og klasseattributtet kan inneholde flere klassenavn, noe som gjør arbeidet med det mye mer komplekst enn andre attributter.
Hvis du skal jobbe med inndatafeltverdier, er det bedre å bruke val()-metoden, som ikke bare gir forenklet versjon fungerer med verdiattributtet, men kan også lese og sette verdier i de valgte elementene i utvalgslisten.
Leser attributtverdienDet er enkelt å lese verdien av et elements attributt. Du trenger bare å kalle attr()-metoden på jQuery-objektet som inneholder elementet, og gi det navnet på attributtet som skal leses. Metoden returnerer attributtverdien:
// Skriv ut verdien av "href"-attributtet til #myLink-elementvarselet ($("a#myLink").attr("href"));
Hvis jQuery-objektet ditt inneholder flere elementer, leser attr()-metoden attributtverdiene for bare det første elementet i settet.
Angi attributtverdierAttr()-metoden kan også brukes til å legge til eller endre attributtverdier:
- Hvis attributt eksisterer ikke i elementet, vil det være lagt til og den vil bli tildelt den angitte verdien.
- Hvis attributt eksisterer allerede, vil dens verdi være oppdatert gitt verdi.
Det er tre måter å bruke attr()-metoden for å legge til eller endre attributter:
For å angi eller endre et elements attributt, må du kalle opp attr()-metoden som spesifiserer attributtnavnet og -verdien. For eksempel:
// Endre verdien av "href"-attributtet til #myLink-elementet til verdien "http://www.example.com/" // (hvis "href"-attributtet ikke eksisterer, vil det bli opprettet automatisk) $("a#myLink") attr("href", "http://www.example.com/");
Det er også mulig å angi samme attributt for flere elementer:
Angi flere attributter ved hjelp av et kartDu kan angi flere attributter samtidig på ett eller flere elementer ved hjelp av et kart. Dette er en liste over navn/verdi-par som ser slik ut:
( navn1: verdi1, navn2: verdi2, ... )
Følgende eksempel setter to attributter på img-elementet samtidig:
// Angi attributtene "src" og "alt" for img-elementet #myPhoto $("img#myPhoto").attr(( "src": "mypic.jpg", "alt": "My Photo"))) ;
Du kan også angi attributter for flere elementer:
// Sett "src" og "alt" attributtene for alle img-elementer $("img").attr(( "src": "mypic.jpg", "alt": "My Photo" ));
Angi attributter ved hjelp av en tilbakeringingsfunksjonI stedet for å sende attributtverdier til attr()-metoden, kan du sende navnet på tilbakeringingsfunksjonen. På denne måten kan du dynamisk angi attributtverdier for flere elementer basert på elementets posisjon, en eksisterende attributtverdi eller andre egenskaper.
Returfunksjonen må ha to argumenter:
- Indeks for posisjonen til det valgte elementet i settet (starter på null)
- gammel attributtverdi for det valgte elementet
Verdien som returneres av funksjonen brukes til å erstatte attributtverdien.
I tillegg til elementets nåværende posisjon og attributtets gamle verdi, kan funksjonen din få tilgang til selve elementet ved hjelp av nøkkelord dette. På denne måten kan du få tilgang til enhver elementegenskap eller metode fra tilbakeringingsfunksjonen.
Eksemplet bruker en tilbakeringingsfunksjon for å legge til et alt-attributt til hvert bilde på siden basert på bildets posisjon og dets src-attributt:
$(init); function init() ( // Sett "alt"-attributtet for alle "img"-elementer $("img").attr("alt", setAltText); function setAltText(index, attributeValue) (return ("Figur " + (indeks +1) + ": " + this.src); 
Etter å ha kjørt koden, vil det første bildet ha et alt-attributt med verdien "Figur 1: myphoto.jpg" og det andre bildet vil ha et alt-attributt med verdien "Figur 2: yourphoto.jpg" .
Fjerner et attributtFor å fjerne et attributt fra et element, må du kalle metoden removeAttr() og gi den navnet på attributtet som skal fjernes. For eksempel:
// Fjern "title"-attributtet fra #myLink-elementet $("a#myLink").removeAttr("title");
Du kan også kalle removeAttr()-metoden på et jQuery-objekt som inneholder flere elementer. RemoveAttr()-metoden vil fjerne det spesifiserte attributtet fra alle elementene:
// Fjern "title"-attributtet fra alle lenker $("a").removeAttr("title");
GjenopptaDenne leksjonen dekket problemer med å jobbe med elementattributter i jQuery:
- Lese attributtverdier
- Sette ett attributt
- Angi flere forskjellige attributter samtidig
- Bruke en tilbakeringingsfunksjon for å dynamisk sette attributtverdier på et sett med elementer
- Fjerne attributter fra et element
