Hva er DOM i Selenium WebDriver: Struktur, Full Form
Hva er DOM i Selenium WebDriver?
DOM in Selenium WebDriver er en viktig komponent i webutvikling ved bruk av HTML5 og JavaManus. Den fullstendige formen for DOM er Document Object Model. DOM er ikke et datavitenskapelig konsept. Det er et enkelt sett med grensesnitt standardisert blant nettutviklere for å få tilgang til og manipulere dokumenter i HTML eller XML ved hjelp av JavaManus.
Disse standardene hjelper utviklere med å bygge en nettside uten å bekymre seg for implementeringsdetaljer. Noen av organisasjonene som er involvert i standardisering av disse grensesnittene er som Mozilla, Apple, Microsoft, Google, Adobe etc. Det er imidlertid W3C som formaliserer en standard og publiserer den – se her (https://dom.spec.whatwg.org/).
Denne opplæringen tar sikte på å dekke grunnleggende konsepter for HTML-dokumentstruktur og hvordan du kan manipulere den ved hjelp av JavaManus. Vi vil dekke følgende emner i denne opplæringen:
Forstå DOM-strukturen
Du må forstå DOM-strukturen hvis du bygger et nettsted som involverer skripting JavaManus. Å forstå DOM er enda viktigere hvis du gjør en eller alle de følgende kompliserte oppgavene på nettstedet ditt –
- Utvikle innhold som oppdaterer seg selv kontinuerlig uten å oppdatere hele siden – som gjeldende pris på alle aksjene i brukerens portefølje
- Utvikle avanserte brukerinteraksjoner som å legge til eller endre innhold dynamisk – som muligheten til å legge til flere aksjer i porteføljen din
- Utvikle innhold som kan tilpasses av brukeren – som muligheten til å endre oppsettet slik at aksjefondporteføljen vises før aksjeporteføljen
- Utvikle responsivt innhold på nettstedet ditt og dermed få nettstedet ditt til å tilpasse seg forskjellige medieskjermer, nemlig. iPhone, desktop, nettbrett etc. automatisk
En grunnleggende HTML-side
<!DOCTYPE html> <meta charset="UTF-8"> <html> <head> <title>my page title</title> </head> <body> <article> <p> my first article </p> </article> <aside>side bar content</aside> </body> </html>
Hvordan ser det ut for en nettlesers DOM PARSER?
html > head > title > body > aside > article > p
Hvordan får du tilgang til kroppselementet?
<script> var body = window.document.body; </script>
Hvordan sier du "Hello World"?
<script> var body = document.querySelector("body > article > p").innerHTML = "Hello World!"; </script>
Til slutt vil hele HTML-filen se ut
Åpen Windows Notisblokk og lim inn følgende innhold i den. Lagre deretter filen som "MyFileNewFile.html" (sørg for at filnavnet slutter med .html).
<!DOCTYPE html> <meta charset="UTF-8"> <html> <head> <title>my page title</title> </head> <body> <article><p>my first article</p></article> <aside>side bar content</aside> <script> var body = document.querySelector("body > article > p").innerHTML = "Hello World!"; </script> </body> </html>
Til slutt åpner du bare filen ved å bruke en av dine foretrukne nettlesere, og du vil se "Hello World!"
Komponenter av DOM i Selenium
Nedenfor er hovedkomponentene i DOM er Selenium WebDriver:
- Vindu
- Document
- Element
Vindu
Window er objektet som inneholder dokumentobjektet i en DOM. Den sitter på toppen av alt.
For å komme til et vindusobjekt fra et gitt dokument
<script> var window = document.defaultView; </script>
I et fanemiljø har hver fane sitt eget vindusobjekt. Men hvis man ønsker å fange opp og implementere hendelser som window.resizeTo og window.resizeBy, gjelder de for hele vinduet og ikke for fanen alene.
Egenskaper til Window Object i DOM
window.localStorage – gir tilgang til nettleserens lokale lagring. Den lokale lagringen kan brukes til å lagre og hente data fra en økt.
<script> window.localStorage.setItem('name','xyz'); var name = window.localStorage.getItem('name'); </script>
vindu.åpner - henter referansen til vindusobjektet som åpnet dette vinduet (enten ved å klikke på en lenke eller bruke window.open-metoden)
Nyttige metoder for vindusobjekt
window.alert() – viser en varseldialog med en melding.
<script> window.alert('say hello'); </script>
Det er mange nyttige hendelser som vindusobjektet viser. Vi vil diskutere dem i "Arrangementer"-delen under Advance Topics
Document
Dokument markerer begynnelsen på et DOM-tre. Dokument er den første noden i en DOM. Den har flere metoder og egenskaper, hvis omfang gjelder for hele dokumentet som URL, getElementById, querySelector etc.
Egenskaper for dokumentobjekt i DOM
Document.documentURI og Document.URL – Begge returnerer gjeldende plassering av dokumentet. Hvis dokumentet imidlertid ikke er av typen HTML, vil Document.URL ikke fungere.
Document.activeElement – Denne metoden returnerer elementet i DOM-en som er i fokus. Dette betyr at hvis en bruker skriver i en tekstboks, vil Document.activeElement returnere referanse til den tekstboksen.
Document.title – Dette brukes til å lese eller angi en tittel på et gitt dokument.
Nyttige metoder for dokumentobjekt
Document.getElementById(String id) – dette er den desidert mest relevante og nyttige metoden i DOM-manipulasjon. Den brukes til å slå opp et element i DOM-treet ved å bruke dens unike identifikator. Oppslaget skiller mellom store og små bokstaver, dvs. i følgende eksempel " element kan ikke slås opp ved hjelp av ord som IntroDiv eller introdiv eller introdiv osv.
<!DOCTYPE html> <meta charset="UTF-8"> <html> <head></head> <body> <div id='introDiv'></div> <script> var label = Document.getElementById('introDiv'); label.setInnerHTML('say hello again'); </script> </body> </html>
Document.querySelectorAll(strengvelger) – dette er en annen mye brukt metode for å velge ett element til basert på regler for CSS-velger (hvis du er kjent med jQuerys $-notasjon, bruker den selv denne metoden). Vi vil ikke fordype oss mye i CSS-velgere. CSS-velger er et sett med regler som du kan få en liste over lignende elementer etter (basert på velgerregelen). Vi har brukt denne metoden før i delen "Hello World".
Element
Element er ethvert objekt representert av en node i et DOM-tre i et dokument. Som alltid er Element-objektet i seg selv bare en kontrakt av egenskaper, metoder og hendelser mellom en nettleser og et HTML-dokument. Det er spesielle typer elementer som HTMLElement, SVGElement, XULElement osv. Vi vil kun fokusere på HTMLElement i denne opplæringen.
Egenskaper for elementobjekt i DOM
Element.id – Denne egenskapen kan brukes til å angi eller lese "ID" (en unik identifikator) for et HTML-element. ID må være unik blant elementene i et DOM-tre. Som nevnt før, brukes ID også av Document.getElementById-metoden for å velge et bestemt Element-objekt i et DOM-tre.
HTMLElement.contentEditable – contentEditable-egenskapen til et element bestemmer om innholdet er av det elementet er redigerbart/modifiserbart. Denne egenskapen kan settes som vist i skriptet nedenfor. Denne egenskapen kan også brukes til å bestemme om et gitt element er redigerbart eller ikke. Prøv følgende skript i hvilken som helst HTML-tekst, og du vil legge merke til at du kan redigere innholdet i brødteksten.
<script> document.body.contentEditable = true; </script>
Element.innerHTML – innerHTML er en annen viktig egenskap som vi bruker for å få tilgang til HTML-innhold i et element. Den brukes også til å angi nytt HTML-innhold for elementet. Det er mye brukt for å sette/endre innholdet i datafelt. Si for eksempel at du vil at nettsiden din skal oppdatere temperaturen i Mumbai City hver time, du kan kjøre skriptet i følgende eksempel hver time.
<!DOCTYPE html> <meta charset="UTF-8"> <html> <head> <title>my page title</title> </head> <body> <section> <h1>Mumbai</h1> <h2>Temperature</h2> <span id='tempValue'></span><sup>o</sup>C </section> <script> document.getElementById('tempValue').innerHTML = '26'; </script> </body> </html>
Nyttige metoder for elementobjekt
HTMLElement.blur() & HTMLElement.focus() – uskarphet og fokusmetoder brukes til å fjerne fokus fra henholdsvis eller gi fokus til et HTML-element. Disse metodene er mest brukt for å flytte fokuset til en markør mellom tekstbokser på en nettside for dataregistrering.
Element.querySelectorAll – Denne metoden ligner den allerede diskuterte querySelector-metoden for dokumentobjektet. Denne metoden vil imidlertid begrense søket innenfor etterkommerne av selve elementet.
Feilsøking i DOM
Utviklerverktøy av Google Chrome, Mozilla Firefox, Internet Explorer (10 eller høyere) eller Safari tillater enkel feilsøking rett inne i nettleseren. Noen ganger tolker forskjellige nettlesere samme HTML-oppmerking forskjellig, og det er når feilsøking hjelper deg å inspisere DOM slik det har blitt tolket av den aktuelle nettleserens DOM-motor.
La oss nå si at du vil endre temperaturverdien fra 26oC til 32oC i ditt siste eksempel. Vi vil ta noen enkle trinn for å gjøre det. Skjermbilder som vises her er fra Mozilla's Firefox– trinnene er imidlertid de samme i alle andre nettlesere.
- Åpne MyFileNewFile.html (eller hvilket navn du ga til HTML-filen i veiledningene ovenfor) ved å bruke nettleseren din
-
Bruk musen og høyreklikk på temperaturverdien 26oC og klikk på "Inspiser element"
-
Legg merke til at elementet der du valgte å "Inspisere element" vises uthevet i nettleseren din (feilsøkingsvinduet vises vanligvis nederst på skjermen)
-
Åpne elementet ved å klikke på den skråstilte trekanten ved siden av det
-
Velg hva du vil redigere og dobbeltklikk på det. Du vil få en mulighet til å endre teksten. Gjør som anvist i det animerte bildet nedenfor.
-
Legg merke til endringen i innholdet på HTML-siden din. Du kan lukke feilsøkingsvinduet nå.
Vær oppmerksom på at endringene dine bare vil fortsette for denne økten. Så snart du laster inn eller oppdaterer (trykk F5) vil siden endres tilbake. Dette indikerer at du ikke endret den faktiske HTML-kilden, men bare den lokale tolkningen av nettleseren din.
Prøv å gjøre følgende som en morsom øvelse. Åpne www.facebook.com i nettleseren din og bruk feilsøkingsverktøyet for å følge resultatet – legg merke til hvordan det står «Jeg har hacket Facebook».
DOM-hendelser
Hva er hendelser i DOM?
Hendelser er en programmeringsmodell der brukerutløste (eller nettlesersidens livssyklusutløste) hendelser kringkastes som meldinger. For eksempel, når en side er ferdig lastet, utløser den window.load-hendelsen og på lignende måte når brukeren klikker på en knapp som elementets klikkhendelse utløses.
Disse meldingene kan fanges opp av alle JavaScript kode og deretter en utviklerdefinert handling kan utføres. Si for eksempel at du vil at tallene på nettsiden din bare skal oppdateres når brukeren klikker på en knapp. Du kan oppnå det ved hjelp av en av følgende metoder -
- Tilordne handling til onclick-hendelsen til HTML-elementet
- Tilordne handling til klikkhendelsen ved å bruke addEventListener-metoden
Metode 1
<!DOCTYPE html> <html> <head> <title>my page title</title> </head> <body> <section> <h1>Mumbai<h1> <h2>Temperature</h2> <span id='tempValue'></span><sup>o</sup>C <br/> <br/> <button onclick='onRefreshClick()'>Refresh</button> </section> <script> document.getElementById('tempValue').innerHTML = '26'; function onRefreshClick(e) { document.getElementById('tempValue').innerHTML = '32'; } </script> </body> </html>
Metode 2
<!DOCTYPE html> <html> <head> <title>my page title</title> </head> <body> <section> <h1>Mumbai<h1> <h2>Temperature</h2> <span id='tempValue'></span><sup>o</sup>C <br/> <br/> <button id='btnRefresh'>Refresh</button> </section> <script> document.getElementById('tempValue').innerHTML = '26'; document.getElementById('btnRefresh').addEventListener('click', function(event) { document.getElementById('tempValue').innerHTML = '32' },false); </script> </body> </html>
Feilsøking i DOM
Sp. Hvordan vet jeg om et element eksisterer eller ikke?
A. Prøv å slå opp elementet ved å bruke en av velgerne og sjekk om elementet som returneres er en null. Se eksempel nedenfor -
if(document.getElementById("elementIDWhichIsNotPresentInDOM") === null) { //do something }
Q. Jeg får TypeError: document.getElementByID er ikke en funksjon...
A. Sørg for at metodenavnet samsvarer nøyaktig med API-metoden. Som i spørsmålet ovenfor - det er getElementById og ikke getElementByID.
Sp. Hva er forskjellen mellom barn og childNodes?
A. Metoden barn får oss samlingen av alle elementene innenfor det kallende elementet. Samlingen som returneres er av typen HTMLCollection. Imidlertid gir metoden childNodes oss samlingen av alle nodene i det kallende elementet. Legg til følgende skript til vårt eksempel og se forskjellen –
childNodes-metoden returnerer 14 elementer
document.write("Using childNodes method") document.write("<br>"); document.write("<br>"); for(i=0;i<document.getElementsByTagName("section")[0].childNodes.length;i++) { document.write((i+1)+"."); document.write(document.getElementsByTagName("section")[0].childNodes[i].toString()); document.write("<br>"); } document.write("<br>"); document.write("Number of nodes in a section " + document.getElementsByTagName("section")[0].childNodes.length);
Mens barnemetoden returnerer bare 7 elementer
document.write("Using children method") document.write("<br>"); document.write("<br>"); for(i=0;i<document.getElementsByTagName("section")[0].children.length;i++) { document.write((i+1)+"."); document.write(document.getElementsByTagName("section")[0].children[i].toString()); document.write("<br>"); } document.write("<br>"); document.write("Number of nodes in a section " + document.getElementsByTagName("section")[0].children.length);
Q. Jeg får Uncaught TypeError: Kan ikke lese egenskapen 'innerHTML' til undefined...
A. Sørg for at forekomsten av HTMLElement du kaller egenskapen innerHTML på ble satt etter den første deklarasjonen. Denne feilen oppstår vanligvis i følgende scenario. Se hvordan feilen kan unngås i neste kodeblokk...
var element; if(false) //say condition was false { element = document.getElementById('tempValue1'); } element.innerHTML = '32';
var element = null; if(false) //say condition was false { element = document.getElementById('tempValue1'); } if(element != null) { element.innerHTML = '32'; }
Oppsummering
- I denne opplæringen lærte vi hva en DOM er og hvordan det er viktig konsept å forstå for å bygge dynamiske nettsider.
- Vi kom også inn på typer DOM-elementer som Window, Document og Element.
- Vi lærte noen nyttige DOM-metoder og egenskaper tilgjengelig innenfor hver type.
- Vi så hvordan de fleste nettlesere tilbyr utviklerverktøy for å spille med hvilken som helst nettside som er tilgjengelig på Internett – og dermed lære å feilsøke og løse problemer med vårt eget nettsted.
- Vi kom også kort inn på DOM-hendelsesmekanismer.
- Til slutt dekket vi noen feilsøkingselementer i DOM.
- Internett er fylt med ressurser på DOM. Et av de beste og oppdaterte referansematerialene er tilgjengelig på Mozillas utviklernettverk. Se – https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model