Tiesitkö, että voimme käyttää JavaScriptiä verkkosivun sisällön käsittelyyn? Tuntuu mielenkiintoiselta? Ymmärretään mikä on Document Object Model eli. DOM JavaScript-muodossa seuraavalla tavalla:
- Mikä on DOM JavaScriptissä?
- DOM: n toiminnot JavaScriptissä
- DOM: n kysely
- Tapahtumien kuuntelu
- Vuorovaikutus lomakkeiden kanssa
- HTML-elementtien luominen
- CSS: n lisääminen
Mikä on DOM JavaScriptissä?
Selain luo asiakirjaobjektimallin tai DOM: n, kun verkkosivua ladataan. Graafisessa muodossa se on kuin elementtien puu, jota kutsutaan myös solmuiksi, joita käytetään edustamaan jokaista sivun elementtiä.
Koko verkkosivumme DOM sijaitsee asiakirjaobjektin sisällä. Ohjelmallisesti tämä malli antaa meille mahdollisuuden lukea tai jopa muuttaa sivumme sisältöä . Eikö se ole siistiä?
lajittelufunktio c ++: ssa
DOM: n toiminnot JavaScriptissä
Joitakin toimintoja, jotka voimme suorittaa tällä mallilla, ovat:
Muuta / poista HTML-elementtejä sivun DOM / -sivulta.
Muuta ja lisää CSS-tyylejä elementteihin
Lue ja muuta määritteitä (href, src, alt) jne.
menetelmän ylikuormituksen edut Java-tilassa
Luo uusia elementtejä ja lisää ne DOM / -sivulle.
Liitä tapahtuman kuuntelijat elementteihin (napsauta, näppäile, lähetä)
DOM: n kysely JavaScriptissä
HTML-elementin nappaamista tai sen hallintaa lisätä / muuttaa tai sisältöä kutsutaan kyselyksi.
HTML-koodi:
Javascript ja DOM h1 {font-size: 60px}JavaScript-koodi:
var title = document.getElementById ('title') // cganginin väri punaiseksi title.style.color = 'punainen' var body = document.getElementById ('body') // taustavärin muuttaminen vaaleansiniseksi body.style. backgroundColor = 'vaaleansininen'Muutimme otsikon tekstin värin mustasta punaiseksi JavaScriptin avulla. Saavutimme tämän käyttämällä .tyyli ominaisuus muutti sitten arvon väri yhtä suureksi kuin netto .
Muuta nyt runkoelementin taustaväri vaaleansininen .
kuinka kirjoittaa singleton-luokkaa java
Tämän avulla olemme päässeet tämän DOM: n loppuun JavaScript-artikkelissa. Toivon, että sait käsityksen siitä, kuinka Document Object Models toimii ja kuinka sama DOM otetaan käyttöön JavaScriptissä.
Nyt kun tiedät DOM: sta JavaScriptissä, tutustu kirjoittanut Edureka. Verkkokehityksen sertifiointikoulutus auttaa sinua oppimaan luomaan vaikuttavia verkkosivustoja HTML5-, CSS3-, Twitter Bootstrap 3-, jQuery- ja Google-sovellusliittymien avulla ja asentamaan sen Amazon Simple Storage Service (S3) -palveluun.
Onko sinulla kysymys meille? Mainitse se 'DOM in JavaScript' -kommenttiosassa ja palaamme sinuun.