NA VRH
DOMOV HTML CSS JavaScript jQuery AngularJS PHP MySQL Python C# Sass WordPress
glave/headings

JavaScript: JavaScript načini Sintaksa Spremenljivke Števila Objekti Funkcije Pogoji Zanke Nizi Datum in čas DOM: - kaj je DOM? - kaj je HTML DOM? - vmesniki za DOM programiranje - primeri - request animation Array AJAX Knjižnica

DOM

DOM (Document Object Model) je objektivni modul, s pomočjo, katerega JavaScript zgradi dinamično HTML spletno stran. Je standard, ki je definiran po World Wide Web standardu, in je splošni standard do dostopa dokumentov.

DOM (Document Object Model)

S pomočjo DOM, JavaScript dobi pravo moč, ki jo potrebuje za izvajanje in ustvarjanje dinamičnega HTML dokumenta.

  1. JavaScript lahko spremeni vse HTML elemente na strani
  2. JavaScript lahko spremeni vse HTML atribute na strani
  3. JavaScript lahko spremeni vse CSS sloge na strani
  4. JavaScript lahko odstrani obstoječe HTML atribute in elemente
  5. JavaScript lahko doda nove HTML atribute in elemente
  6. JavaScript lahko reagira na vse obstoječe HTML dogodke, ki se izvajajo na strani
  7. JavaScript lahko ustvari nove HTML dogodke na strani

DOM je W3C (World Wide Web Consortium) standard, in določa standard za dostop do HTML dokumentov. DOM (Document Object Model) je platforma, in jezikovno nevtralen vmesnik, ki programom in skriptom omogoča dinamičen dostop, in posodobitev vsebine, strukture in sloga HTML dokumenta. W3C DOM standard delimo na tri kategorije:

Core DOM je standardni model, za vse vrste HTML dokumentov.
XML DOM je standardni model, za HTML dokumente, vrednosti XML.
HTML DOM je standardni model za HTML dokumente, vrednosti HTML.

HTML DOM je standardi objekt modelov, in programski vmesnik za HTML dokument, ki določa naslednje lastnosti.

  1. HTML element določi kot predmet
  2. določi lastnosti vseh HTML elementov.
  3. določi način za dostop do vseh HTML elementov
  4. določi dogodke za vse HTML elemente

HTML DOM je standard za pridobivanje, spreminjanje, dodajanje ali brisanje HTML elementov.

V DOM lahko do stopamo s pomočjo JavaScript, ali drugimi programskimi jeziki. Vsi HTML elementi so v DOM definirani kot predmeti. Programski vmesniki so lastnosti in metode vsakega predmeta, kjer je lastnost vrednost, ki jo dobimo ali nastavimo, s spreminjanjem vsebine HTML elementa. Metode so dejanja, ki jih lahko izvedemo za dodajanje ali brisanje HTML elementa.

  1. Programski vmesnik
  2. Dokument objekta
  3. GetElementById()
  4. GetElementsByTagName()
  5. GetElementsByClassName()
  6. Iskanja s pomočjo CSS

Ogledamo si lahko še nekaj atributov, ki se jih uporablja za pomoč v DOM-u. V seznamu najdemo primere z opisi.

  1. nth-child()
  2. removeChild()
  3. appendChild()
  4. createElement

Naredili bomo nekaj primerov s priljubljeni JavaScript DOM, ki nam vsebino posreduje na spletno stran. Prvi primer nam prikazuje kako DOM uporabimo za vpis v glavo naše spletne strani. Najprej si poglejmo, kako izdelati zunanjo datoteko s končnico js.

Odpremo naš privzeti IDE, ustvarimo HTML datoteko, in zraven še JavaScript datoteko, in jo, kar poimenujemo dom1.js. V to datoteko vpišemo console.log('hello world') in še v HTML dokument dodamo pot do te JavaScript datoteke, ki smo jo ustvarili. To storimo z ukazom <script type="text/javascript" src="dom1.js"></script> in ko sedaj HTML dokument zaženemo, se nam po v konzoli izpisalo hello world oziroma, kar smo vpisali v log.

Primeri 1
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>title</title>
    </head>
    <body>
    <script type="text/javascript" src="dom1.js"></script>
    </body>
    </html>
            

V prvem primeru smo samo izpisali Pozdravljen Svet, v drugem primeru pa bomo izpisali celoten HTML dokument. Namesto console.log bomo uporabili console.dir in v oklepaje zapisali document. Izpiše se nam celoten dokument, kar zadeva spletna strani, na kateri smo ta dokument zagnali. Vse o console.dir najdete na moji strani, v JavaScript Knjižnici.

Primeri 2
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>title</title>
    </head>
    <body>
    <script type="text/javascript" src="dom2.js"></script>
    </body>
    </html>
            

V js datoteko lahko vpišemo const dom1 = document.querySelector("h1") in potem še console.log(dom1). S tem se nam bo v konzoli izpisala vrednost h1 elementa. V primerih smo se naučili, kako naredimo js datoteko, zato gremo na primer, kjer bomo v JavaScript DOM vpisali vrednost glave.

Kot vidimo na primeru ni pomembno, kaj vpišemo v glavo HTML dokumenta, ker smo vpisali vse potrebno v JavaScript, in ni važno, če spremenimo glavo v HTML, ostane tako kot je zapisano v JavaScript. Primer sem dodal na Trinket tako, da se lahko malo poigravate. Dodatni primer o querySelector() si lahko ogledamo v JavaScript Knjižnici.

Naslednja metoda, ki si jo bomo ogledali je querySelectorAll(). Kot smo videli pri querySelector() nam izpiše vrednost prvega elementa, in če na hitro preverimo to trditev.

Primeri 3
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <script>
        const div = document.querySelector('div')
        console.log(div.textContent)
    </script>
    </body>
    </html>
            

Pri uporabi querySelectorAll() pa izpiše vrednost vseh elementov.

Primeri 4
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <script>
        const div = document.querySelectorAll('div')
        console.log(div)
    </script>
    </body>
    </html>
            

Če zadnjemu primeru dodamo še vrstico div.forEach dobimo vse tri div-e v vrsticah, enega za drugim.

Primeri 5
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <script>
        const div = document.querySelectorAll("div")
        div.forEach((div)=>{ //lahko dodamo (primer) poleg besede div v oklepajih .textContent in dobimo izpis vseh div elementov v besedi
          console.log(div)
        })
    </script>
    </body>
    </html>
            

V zadnji primer sem dal querySelector() in querySelectorAll() skupaj, in seveda dodajam na Trinket.

    <!DOCTYPE html>
    <html lang="si">
    <head>
        <meta charset="UTF-8">
        <title>querySelectorAll()</title>
    </head>
    <body>
    <h1>DEMO</h1>
    <div class="class">TEST1</div>
    <div id="id">TEST2</div>
    <div class="class">TEST3</div>

    <button onclick="queryAll()" style="margin-top: 10px; padding: 10px; border: 1px solid black; border-radius: 6px">PRITISNI</button>

    <script>
        function queryAll() {
            const div = document.querySelectorAll(".class")
            for (i = 0; i < div.length; i++) {
                div[i].style.backgroundColor = "greenyellow"
                div[i].style.padding = "10px"
            }
            const divID = document.querySelector("#id")
            divID.textContent = "Dobrodošli v moji JavaScript vadnici!"
            divID.style.padding = "10px"
            divID.style.marginTop = "6px"
            divID.style.marginBottom = "6px"
            divID.style.backgroundColor = "yellow"
        }
    </script>
    </body>
    </html>
            

Naredili bom manjšo animacijo s pomočjo JavaScript. Premikajoči element bomo lahko ustavili in zagnali, lahko mu bomo spremenili hitrost premikanja, in seveda izgled.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JS Request Animation</title>
    </head>
    <body>
    <div class="container">
        <div class="output"></div>
    </div>

    <script src="anima.js"></script>
    </body>
    </html>