Bármely HTML-dokumentum megnyitásakor a böngésző először elemzi annak tartalmát, és ennek alapján létrehozza a HTML-dokumentum objektummodelljét, vagy rövidebben DOM-ot.
A DOM hierarchikusan egymásba ágyazott objektumokból, úgynevezett csomópontokból áll. A struktúra minden csomópontja a HTML oldal elem.
A DOM használatával interakcióba léphet ( olvasni, módosítani, törölni) szkriptekből származó HTML dokumentumok tartalmával.
Alább látható a dokumentum HTML-kódja és a DOM, amelyet a böngésző e kód alapján hozna létre:
HTML DOM HTML DOM.
Sziasztok.
A képen látható összes téglalap objektum (vagy csomópont). A különböző típusú csomók különböző színekkel vannak jelölve a képen.
A Dokumentum csomópont piros színnel van jelölve. Minden DOM-hívásnak ennek a csomópontnak a hívásával kell kezdődnie.
Az elem csomópontjai zölddel vannak jelölve. Az oldalon lévő minden HTML-elemhez a böngésző létrehoz egy megfelelő elemcsomópontot.
Az elemek tartalma szöveges csomópontokban tárolódik. A szöveges csomópontok az ábrán kékkel vannak jelölve.
Az egyes HTML attribútum elem, akkor egy attribútum csomópont jön létre. Az attribútum csomópont rózsaszínnel van jelölve a diagramon.
Ne feledje, hogy a szöveg mindig a szöveg csomópontjaiban van tárolva, és nem az elem tulajdonsága. Azok. egy HTML-elem tartalmának eléréséhez hozzá kell férnie annak szövegcsomópontjának tulajdonságához.
Csomópontok közötti kapcsolatokAz objektumstruktúra csomópontjai kapcsolatban állnak egymással. Számos speciális kifejezés létezik a csomópontok közötti kapcsolatok leírására:
szülő csomópont ( szülő csomópont) - a szülőcsomópont a kérdéses objektumhoz képest az a csomópont, amelybe a kérdéses objektum be van ágyazva. Diagramunkban a csomópontok és a
szülő. Egy csomópont esetében a szülőcsomópont .
Gyermek csomópontok ( gyermek csomópont) - a leszármazott csomópont a figyelembe vett objektumhoz képest olyan csomópont, amely a vizsgált objektumba van beágyazva. Sémánkban a csomóponthoz és a
Ők leszármazottak. Csomópont esetében a gyermek .
Testvér csomópontok ( testvér csomópont) - olyan csomópontok, amelyek azonos beágyazási szinten vannak a szülőcsomópontjukhoz képest. Az ábránkon a testvér csomópontok és ,
A DOM legfelső csomópontját gyökérnek nevezzük. A diagramunkban a gyökér az (mivel a dokumentum objektum nem része a DOM-nak).
A HTML-t beágyazott dobozok halmazának tekintheti. A címkék kedvelik és magukban foglalják az egyéb címkéket, amelyek viszont címkéket vagy szöveget tartalmaznak. Íme egy példa dokumentum az előző fejezetből:
Kezdőlapom Kezdőlapom
Helló, Mariin vagyok, és ez a honlapom.
És könyvet is írtam! Olvassa el itt.
Ennek az oldalnak a szerkezete a következő:
A böngésző által a dokumentum ábrázolására használt adatstruktúra tükrözi annak alakját. Minden dobozhoz tartozik egy objektum, amellyel interakcióba léphetünk és különböző adatokat tudhatunk meg róla – milyen címkét képvisel, milyen dobozokat és szöveget tartalmaz. Ezt az ábrázolást Document Object Model-nek, vagy röviden DOM-nak nevezik.
Ezeket az objektumokat a dokumentum globális változóján keresztül érhetjük el. A documentElement tulajdonsága a címkét képviselő objektumra vonatkozik. Megadja a fej és a test tulajdonságait is, amelyek az adott elemekhez objektumokat tartalmaznak.
Fák A 11. fejezet szintaxisfák előhívása. Felépítésük rendkívül hasonlít egy böngésző dokumentuméhoz. Minden csomópont kapcsolódhat más csomópontokhoz, minden ágnak lehet saját ága. Ez a struktúra tipikus példája a beágyazott struktúráknak, ahol az elemek magukhoz hasonló részelemeket tartalmaznak.Egy adatstruktúrát fának nevezünk, ha elágazik, nincsenek ciklusai (egy csomópont nem tudja magában foglalni magát), és egyetlen különálló "gyökere" van. A DOM esetében a document.documentElement a gyökér.
A fák gyakran megtalálhatók a számítástechnikában. A rekurzív struktúrák, például HTML-dokumentumok vagy programok megjelenítése mellett gyakran használják őket rendezett adatkészletekkel való munkára, mivel az elemeket általában könnyebb megtalálni vagy beilleszteni egy rendezett fába, mint egy rendezett egydimenziós tömbbe.
Egy tipikus fának különböző csomópontjai vannak. Az Egg nyelv szintaxisfája változókat, értékeket és alkalmazásokat tartalmazott. Az alkalmazásoknak mindig voltak gyermekágai, a változók és értékek pedig „levelek”, azaz olyan csomópontok, amelyekben nem voltak gyermekágak.
Ugyanez vonatkozik a DOM-ra is. Csomópontok a normál elemek reprezentációjához HTML címkék, határozza meg a dokumentum szerkezetét. Gyermekcsomópontjaik lehetnek. Ilyen csomópont például a document.body. Néhány alárendelt csomópont levélnek bizonyulhat, például szöveg vagy megjegyzés (in HTML megjegyzések karakterek közé írva).
Minden DOM csomópont objektum rendelkezik egy nodeType tulajdonsággal, amely egy numerikus kódot tartalmaz, amely meghatározza a csomópont típusát. Normál elemek esetén ez 1, amely a document.ELEMENT_NODE konstans tulajdonságként is definiálható. A szövegrészeket képviselő szövegcsomópontok esetében ez a 3 (document.TEXT_NODE). A megjegyzésekhez 8 tartozik (document.COMMENT_NODE).
Vagyis itt van egy másik módja a dokumentumfa grafikus ábrázolásának:
A levelek a szöveges csomópontok, a nyilak pedig a csomópontok közötti apa-gyermek kapcsolatot mutatják.
Szabványos A rejtélyes számok használata egy csomóponttípus ábrázolására nem JavaScript stílusú megközelítés. Később találkozunk a DOM felület más, szintén idegennek és kínosnak tűnő részeivel. Ennek az az oka, hogy a DOM-ot nem csak JavaScriptre tervezték. Nyelvfüggetlen felületet próbál definiálni, amely más rendszerekben is használható - nem csak HTML-ben, hanem XML-ben is, ami egy adatformátum. Általános rendeltetésű HTML-re emlékeztető szintaxissal.Kényelmetlennek bizonyul. Bár a szabványok nagyon hasznosak, esetünkben a nyelvi függetlenség előnye nem annyira hasznos. Jobb, ha olyan felülettel rendelkezik, amely jól illeszkedik az Ön által használt nyelvhez, mint egy olyan interfészhez, amely több nyelven is ismerős lesz.
A kényelmetlen nyelvi integráció megjelenítéséhez vegye figyelembe a DOM csomópontok gyermekNodes tulajdonságát. Tartalmaz egy tömbszerű objektumot hossz tulajdonsággal és számozott tulajdonságokkal az utódcsomópontok elérésére. De ez egy NodeList típusú példány, nem egy igazi tömb, ezért nem rendelkezik olyan metódusokkal, mint a forEach.
Problémák is vannak a rendszer rossz kialakításával. Például nem hozhat létre új csomópontot, és nem adhat hozzá azonnal tulajdonságokat vagy gyermekcsomópontokat. Először létre kell hozni, majd egyesével hozzá kell adni a gyerekeket, végül egyenként hozzá kell rendelni a tulajdonságokat, mellékhatások segítségével. A DOM-mal szorosan együttműködő kód hosszú, csúnya és ismétlődő.
De ezek a problémák nem végzetesek. A JavaScript lehetővé teszi absztrakciók létrehozását. Könnyű írni másodlagos funkciókat, amely lehetővé teszi a műveletek egyértelműbb és tömörebb kifejezését. Általában az ilyen eszközök számos könyvtárat biztosítanak a böngésző programozására.
A fa bejárási DOM csomópontjai sok hivatkozást tartalmaznak a szomszédaikra. Ez látható a diagramon:
Bár itt minden típusból csak egy hivatkozás látható, minden csomópont rendelkezik egy parentNode tulajdonsággal, amely a szülőcsomópontra mutat. Ezenkívül minden elemcsomópont (1. típusú) rendelkezik egy childNodes tulajdonsággal, amely a gyermek csomópontokat tartalmazó tömbszerű objektumra mutat.
Elméletileg a fa bármely részére ugorhat csak ezekkel a hivatkozásokkal. De a JavaScript számos további segítő hivatkozást biztosít számunkra. A firstChild és lastChild tulajdonságok az első és az utolsó gyermekre mutatnak, vagy nullák olyan csomópontok esetében, amelyeknek nincs gyermekük. Az előzőTestvér és a következőTestvér szomszédos csomópontokra mutatnak – olyan csomópontokra, amelyeknek ugyanaz a szülője, mint az aktuális csomópont, de közvetlenül az aktuális csomópont előtt vagy után találhatók a listában. Az első csomópont előző Sibling tulajdonsága null lesz, az utolsó csomópont nextSibling tulajdonsága pedig null.
Ilyen beágyazott struktúrák kezelésekor a rekurzív függvények jól jönnek. A következő az adott karakterláncot tartalmazó szöveges csomópontokat keresi a dokumentumban, és megtalálásakor true értéket ad vissza:
Function talksAbout(node, string) ( if (node.nodeType == document.ELEMENT_NODE) ( for (var i = 0; i< node.childNodes.length; i++) { if (talksAbout(node.childNodes[i], string)) return true; } return false; } else if (node.nodeType == document.TEXT_NODE) { return node.nodeValue.indexOf(string) >-1; ) ) console.log(talksAbout(document.body, "books")); // → igaz
Szövegcsomópont tulajdonságai A nodeValue egy szöveges karakterláncot tartalmaz.
Elemek keresése Gyakran hasznos navigálni a szülők, gyerekek és testvérek közötti kapcsolatokban, és végigjárni a teljes dokumentumot. Ha azonban egy adott csomópontra van szükségünk a dokumentumban, akkor nagyon kényelmetlen végigmenni rajta, a document.body-ból kiindulva, és hülyén végigmenni a kódban keményen kódolt útvonalon. Ennek során feltételezéseket teszünk a programban szereplő dokumentum pontos szerkezetére vonatkozóan - amin később esetleg változtatni szeretnénk. Egy másik bonyolító tényező, hogy a szöveges csomópontok még a csomópontok közötti szóközök számára is létrejönnek. A példadokumentumban a body tagnek nem három gyermeke van (h1 és két p), hanem akár hét is: ez a három plusz szóköz előttük, utánuk és közöttük.var link = document.body.getElementsByTagName("a"); console.log(link.href);
Minden elemcsomópont rendelkezik egy getElementsByTagName metódussal, amely összegyűjti az adott címkével rendelkező összes olyan elemet, amely ennek a csomópontnak a leszármazottja (közvetlen vagy nem közvetlen leszármazottja), és tömbszerű objektumként adja vissza.
Egy adott csomópont megkereséséhez megadhat egy id attribútumot, és használhatja a document.getElementById metódust.
Az én struccom, Gertrude:
A harmadik metódus a getElementsByClassName , amely a getElementsByTagName-hez hasonlóan az elem csomópont tartalmában keres, és minden olyan elemet visszaad, amely az adott karakterláncot tartalmazza az osztályában.
A dokumentum módosítása A DOM-struktúrában szinte minden módosítható. Az elemcsomópontoknak van egy sor metódusa, amelyet a módosításukra használnak. A removeChild metódus eltávolítja a megadott gyermekcsomópontot. Csomópont hozzáadásához használhatja az appendChild-et, amely hozzáadja a csomópontot a lista végéhez, vagy az insertBefore-t, amely hozzáadja az első argumentumban átadott csomópontot a második argumentumban átadott csomópont elé.var paragrafusok = document.body.getElementsByTagName("p"); document.body.insertBefore(bekezdések, bekezdések);
Egy csomópont csak egy helyen létezhet a dokumentumban. Tehát a "Három" bekezdés beszúrásával az "Egy" bekezdés elé valójában eltávolítjuk a lista végéről, és beillesztjük az elejére, és megkapjuk a "Három/Egy/Kettő" szöveget. A csomópont beillesztésére irányuló minden művelet hatására az eltűnik jelenlegi pozíciójából (ha volt ilyen).
A csereChild metódus az egyik utódcsomópont másikkal való helyettesítésére szolgál. Két csomópontot fogad: egy újat és egyet, amelyet cserélni kell. A lecserélendő csomópontnak annak az elemnek a gyermekcsomópontjának kell lennie, amelynek metódusát hívjuk. Mind a changeChild, mind az insertBefore elvárja, hogy új csomópontot kapjon első argumentumként.
Csomópontok létrehozása A következő példában olyan szkriptet kell készítenünk, amely a dokumentumban lévő összes képet (címkét) lecseréli az "alt" attribútumban szereplő szövegre, amely a kép alternatív szöveges megjelenítését adja meg.Ehhez nem csak képeket kell törölni, hanem új szöveges csomópontokat is fel kell venni a helyükre. Ehhez a document.createTextNode metódust használjuk.
Ez 
V 
.
Cserélje ki
függvény csereImages() ( var images = document.body.getElementsByTagName("img"); for (var i = images.length - 1; i >= 0; i--) ( var kép = képek[i]; if ( image.alt) ( var text = document.createTextNode(image.alt); image.parentNode.replaceChild(szöveg, kép); ) ) )Adott egy karakterlánc, a createTextNode egy 3-as típusú DOM-csomópontot (szöveg) ad nekünk, amelyet beilleszthetünk a képernyőn megjelenítendő dokumentumba.
A képhurok a csomópontok listájának végén kezdődik. Ennek az az oka, hogy a getElementsByTagName metódus (vagy a childNodes tulajdonság) által visszaadott csomópontok listája folyamatosan frissül, ahogy a dokumentum változik. Ha az elején kezdenénk, az első kép eltávolításával a lista elveszítené az első elemét, és a ciklus második menetében, amikor i egyenlő 1, akkor leállna, mert a lista hossza is 1 lenne. .
Ha a csomópontok rögzített listájával kell dolgoznia az "élő" helyett, akkor azt a slice módszerrel valódi tömbbé konvertálhatja.
var arrayish = (0: "egy", 1: "kettő", hossza: 2); var real = Array.prototype.slice.call(arrayish, 0); real.forEach(function(elt) ( console.log(elt); )); // → egy // kettő
A document.createElement segítségével elemcsomópontokat hozhat létre (1. típus). A metódus felvesz egy címkenevet, és egy új, az adott típusú üres csomópontot ad vissza. A következő példa egy elt eszközt határoz meg, amely létrehoz egy elemcsomópontot, és a fennmaradó argumentumokat gyermekeiként használja. Ez a funkció ezután további információk hozzáadására szolgál az árajánlathoz.
Egyetlen könyvet sem lehet befejezni. Miközben dolgozunk rajta, eleget tanulunk ahhoz, hogy éretlennek találjuk, amint elvesszük a gondolatainkat. függvény elt(type) ( var node = document.createElement(type); for (var i = 1; i< arguments.length; i++) { var child = arguments[i]; if (typeof child == "string") child = document.createTextNode(child); node.appendChild(child); } return node; } document.getElementById("quote").appendChild(elt("footer", "-", elt("strong", "Карл Поппер"), ", предисловие ко второму изданию ", elt("em", "Открытое общество и его враги "), ", 1950"));
Attribútumok Egyes attribútumelemek, például a hivatkozások href, az azonos nevű objektumtulajdonságon keresztül érhetők el. Ez korlátozott számú általánosan használt szabványos attribútum esetén lehetséges.De a HTML lehetővé teszi bármilyen attribútum hozzárendelését a csomópontokhoz. Ez azért hasznos, mert tárolását teszi lehetővé További információ a dokumentumban. Ha saját attribútumneveket talál ki, akkor azok nem lesznek az elem csomópont tulajdonságai között. Ehelyett a getAttribute és setAttribute metódusokat kell használnia a velük való munkához.
Kezdőkód: 00000000.
A macskának négy lába van.
var paras = document.body.getElementsByTagName("p"); Array.prototype.forEach.call(paras, function(para) ( if (para.getAttribute("data-classified") == "titkos") para.parentNode.removeChild(para); ));Azt javaslom, hogy a kitalált attribútumok neve elé tegye a "data-" kifejezést, hogy megbizonyosodjon arról, hogy nem ütközik másokkal. Egyszerű példaként írunk szintaktikai kiemelést, amely címkéket keres ("előformázott", előre formázott - kódhoz és egyszerű szöveg) a data-language (language) attribútummal, és meglehetősen nyersen próbálja kiemelni a nyelv kulcsszavait.
Függvény highlightCode(node, kulcsszavak) ( var text = node.textContent; node.textContent = ""; // A var match, pos = 0 csomópont törlése; while (match = kulcsszavak.exec(szöveg)) ( var before = szöveg . slice(pos, match.index); node.appendChild(document.createTextNode(before)); var strong = document.createElement("strong"); strong.appendChild(document.createTextNode(match)); node.appendChild( strong ); pos = kulcsszavak.lastIndex; ) var after = text.slice(pos); node.appendChild(document.createTextNode(after)); )
A highlightCode függvény elfogad egy csomópontot ÉS egy reguláris kifejezést (engedélyezett globális beállítás mellett), amely megfelel az elemet tartalmazó programozási nyelv kulcsszónak.
A textContent tulajdonság a csomópont teljes szövegének lekérésére szolgál, majd az üres karakterláncra állítja be, amely törli a csomópontot. A kulcsszókifejezés összes előfordulását végigfutjuk, egyszerű szövegcsomópontok formájában szöveget adunk közéjük, és az egyező szöveget (kulcsszavakat) elemekbe zárva (félkövér) adjuk hozzá.
Automatikusan kiemelhetjük az oldal teljes kódját, ha végighurkoljuk az összes adatnyelv attribútumot tartalmazó elemet, és mindegyiken a highlightCode-ot hívjuk a megfelelő reguláris kifejezéssel.
Var languages = ( javascript: /\b(function|return|var)\b/g /* … etc */ ); függvény highlightAllCode() ( var pres = document.body.getElementsByTagName("pre"); for (var i = 0; i< pres.length; i++) { var pre = pres[i]; var lang = pre.getAttribute("data-language"); if (languages.hasOwnProperty(lang)) highlightCode(pre, languages); } }
Íme egy példa:
És itt van, az azonosítási funkció:
Függvényazonosító(x) (x visszatérés; ) highlightAllCode();Van egy gyakran használt attribútum, az osztály, amelynek neve egy kulcsszó a JavaScriptben. Történelmi okokból, amikor a JavaScript régebbi megvalósításai nem tudták kezelni az egyező tulajdonságneveket kulcsszavakat, ez az attribútum a className nevű tulajdonságon keresztül érhető el. A getAttribute és a setAttribute metódusokon keresztül a valódi nevén "class" is elérheti.
Elemek elrendezése (elrendezés) Talán észrevetted különböző típusok az elemek eltérően vannak elrendezve. Vannak, akik szeretik a bekezdéseketA fejlécek pedig a dokumentum teljes szélességére kiterjednek, és külön sorokban jelennek meg. Az ilyen elemeket blokkelemeknek nevezzük. Mások linkként vagy félkövér szöveg a környező szöveggel egy sorban jelenik meg. Beépítettnek (inline) hívják őket. A böngészők bármely dokumentumhoz létrehozhatják az elemek elrendezését, olyan elrendezést, amelyben mindegyiknek típusa és tartalma alapján megvan a mérete és elhelyezkedése. Ezt a szórást használjuk fel a dokumentum megjelenésének létrehozására. Egy elem mérete és pozíciója a JavaScript segítségével érhető el. Az offsetWidth és offsetHeight tulajdonságok megadják az elem méretét pixelben. A pixel az alapvető mértékegység a böngészőkben, és általában a legkisebb képernyőpixel méretének felel meg. Hasonlóképpen, a clientWidth és a clientHeight megadja az elem belsejének méretét, nem számítva a szegélyt (vagy ahogy egyesek mondják, a szegélyt). egy dobozban vagyok
A leghatékonyabban a getBoundingClientRect módszerrel lehet megtudni egy elem pontos pozícióját a képernyőn. Egy objektumot ad vissza felső, alsó, bal és jobb oldali tulajdonságokkal, amelyek pixelben tartalmazzák az elem helyzetét a képernyő bal felső sarkához képest. Ha ezeket az adatokat a teljes dokumentumra szeretné megkapni, akkor hozzá kell adnia az aktuális görgetési pozíciót, amelyet a pageXOffset és a pageYOffset globális változók tartalmaznak.
Egy dokumentum elemzése nehéz feladat. Gyorsasági okokból a böngészőmotorok nem építik újra a dokumentumot minden alkalommal, amikor megváltozik, hanem várnak annyit. hogyan lehetséges ez. Amikor a dokumentumot módosító JavaScript program kilép, a böngészőnek ki kell számítania az új oldalelrendezést, hogy a módosított dokumentumot megjelenítse a képernyőn. Amikor egy program rákérdez valaminek a helyzetére vagy méretére olyan tulajdonságok beolvasásával, mint az offsetHeight vagy a getBoundingClientRect meghívásával, akkor az elrendezést is ki kell számítani, hogy a megfelelő információkat biztosítsa.
A DOM-elrendezést időnként beolvasó és a DOM-ot módosító program miatt a böngésző sokszor újraszámolja az elrendezést, ezért lassú lesz. A következő példában két különböző program található, amelyek 2000 pixel széles X karakterből álló vonalat rajzolnak, és mérik a futási időt.
function time(name, action) ( var start = Date.now(); // Aktuális idő ezredmásodpercben action(); console.log(name, "taok", Date.now() - start, "ms"); ) time("hülye", function() ( var target = document.getElementById("one"); while (target.offsetWidth< 2000) target.appendChild(document.createTextNode("X")); }); // → тупо заняло 32 ms time("умно", function() { var target = document.getElementById("two"); target.appendChild(document.createTextNode("XXXXX")); var total = Math.ceil(2000 / (target.offsetWidth / 5)); for (var i = 5; i < total; i++) target.appendChild(document.createTextNode("X")); }); // → умно заняло 1 ms Stílusok Láttuk, hogy a különböző HTML elemek eltérően viselkednek. Némelyik blokkként jelenik meg, mások soron belül vannak. Néhányan vizuális stílust adnak hozzá, például félkövérre, aláhúzottra és kékre teszik a szöveget.
Egy kép megjelenése a címkében vagy az a tény, hogy a címkében lévő hivatkozás új oldalt nyit meg, ha rákattint, az elemtípushoz kapcsolódik. De az elemhez társított alapvető stílusokat, például a szöveg színét vagy aláhúzását mi módosíthatjuk. Íme egy példa a style tulajdonság használatára:
Zöld link
A style attribútum egy vagy több tulajdonságdeklarációt (színt) tartalmazhat, amelyet kettőspont és egy érték követ. Több deklaráció esetén pontosvessző választja el őket: „szín: piros; határ: nincs".
A stílusokkal sok mindent meg lehet változtatni. Például a display tulajdonság szabályozza, hogy egy elem blokk vagy soron belüli formában jelenjen-e meg.
A szöveg soron belül, blokkként jelenik meg, és egyáltalán nem látható.
A blokk elem külön blokkban jelenik meg, utóbbi pedig egyáltalán nem látható - display: none letiltja az elemek megjelenítését. Így elrejtheti az elemeket. Általában ezt részesítik előnyben teljes eltávolítása a dokumentumból, mert szükség esetén később könnyebben meg lehet őket mutatni.
A JavaScript kód közvetlenül befolyásolhatja egy elem stílusát a csomópont stílustulajdonságán keresztül. Olyan objektumot tartalmaz, amely minden stílustulajdonsághoz rendelkezik tulajdonságokkal. Értékeik olyan karakterláncok, amelyekbe írhatunk, hogy megváltoztassuk az elem stílusának bizonyos aspektusait.
Szépség
var para = document.getElementById("para"); console.log(para.style.color); para.style.color = "bíbor";Egyes stílustulajdonságok nevei kötőjeleket tartalmaznak, például a font-family. Mivel kényelmetlen lenne velük dolgozni JavaScriptben (stílus["font-family"]-t kell írni), a styles objektum tulajdonságainak neve kötőjel nélkül kerül kiírásra, helyette nagybetűk jelennek meg bennük: style .betűtípus család
Lépcsőzetes stílusok A HTML stílusrendszerét CSS-nek (Cascading Style Sheets, Cascading Style Sheets) hívják. A stíluslap stílusok halmaza egy dokumentumban. A címke belsejébe írható:Az erős címke szövege most dőlt és szürke.
A "lépcsőzetes" azt jelenti, hogy több szabályt kombinálnak a végleges dokumentumstílus létrehozásához. A példában a(z) alapértelmezett stílusa, amely félkövérré teszi a szöveget, a címke szabályával fedi, amely betűstílust és színt ad hozzá.
Ha egy ingatlan értékét egynél több szabály határozza meg, a későbbi szabályok élveznek elsőbbséget. Ha a szövegstílus tartalmaz egy font-weight: normál szabályt, amely ütközik az alapértelmezett stílussal, akkor a szöveg félkövér helyett normál lesz. A stílus attribútumon keresztül egy csomópontra alkalmazott stílusok a legmagasabb prioritásúak.
A CSS-ben nem csak a címkék nevét lehet beállítani. Az .abc szabály minden olyan elemre vonatkozik, amelynél az „abc” osztály van megadva. Az #xyz szabálya olyan elemre vonatkozik, amelynek id attribútuma "xyz" (az azonosító attribútumokat egyedivé kell tenni a dokumentumon belül).
Finom ( szín: szürke; betűméret: 80%; ) #fejléc (háttér: kék; szín: fehér; ) /* p elemek a és b osztályokkal, és az azonosító beállítása fő */ p.a.b#main ( margó-alsó: 20 képpont ;)
A legújabb szabályprioritás akkor működik, ha a szabályok azonos részletességgel rendelkeznek. Ez annak mértéke, hogy mennyire pontosan írja le a megfelelő elemeket, amint azt a szükséges elemi szempontok száma és fajtája határozza meg. Például a p.a szabály részletesebb, mint a p vagy just.a szabály, és elsőbbséget élvez.
A p > a (…) jelölés minden olyan címkére vonatkozik, amely a címkén belül található, és annak közvetlen leszármazottja.
p a (…) az összes címkére is vonatkozik, függetlenül attól, hogy közvetlen gyermekről van szó, vagy sem.
A querySelectorAll metódus, amely mind a dokumentum objektumon, mind a csomópontelemeken létezik, vesz egy választókarakterláncot, és egy tömbszerű objektumot ad vissza, amely tartalmazza az összes megfelelő elemet.
Szeretem a május eleji vihart
Amikor az első tavaszi mennydörgés
Mintha hancúrozna és játszana
Dübörög a kék égen.
function count(selector) ( return document.querySelectorAll(selector).length; ) console.log(count("p")); // Minden elem// → 4 console.log(count(.animal")); // Állatosztály // → 2 console.log(count("p .animal")); // Az állatok osztálya belül
// → 2 console.log(count("p > .animal")); // Közvetlen gyermek
// → 1
A getElementsByTagName metódusokkal ellentétben a querySelectorAll által visszaadott objektum nem interaktív. Ez nem változik, ha módosítja a dokumentumot.
A querySelector metódus (Mind nélkül) hasonlóan működik. Szükség van rá, ha egy adott elemre van szüksége. Csak az első egyezést adja vissza, vagy nullát, ha nincs egyezés.
Pozícionálás és animáció A pozícióstílus tulajdonság nagymértékben befolyásolja az elemek elhelyezését. Alapértelmezés szerint statikus, ami azt jelenti, hogy az elem a normál helyén van a dokumentumban. Ha relatív, az elem továbbra is helyet foglal, de a felső és bal oldali tulajdonságok segítségével most már el lehet mozdulni normál helyzetéből. Abszolút érték esetén az elem kikerül a dokumentum normál "folyamából" - vagyis nem foglal helyet, és átfedhet másokat. Ezenkívül a bal és a felső tulajdonságai felhasználhatók a legközelebbi, nem statikus helyzetű burkolóelem bal felső sarkához viszonyított abszolút pozicionáláshoz. És ha nincs ilyen elem, akkor a dokumentumhoz viszonyítva helyezkedik el.Ezzel animációt készíthetünk. A következő dokumentum egy ellipszisben mozgó macska képe látható.
A kép az oldal közepére kerül, és a relatív pozícióba kerül. Folyamatosan frissítjük a kép felső és bal oldali tulajdonságait, hogy elmozduljon.
A szkript a requestAnimationFrame segítségével hívja meg az animációs függvényt minden alkalommal, amikor a böngésző készen áll a képernyő újrarajzolására. Maga az animációs függvény ismét meghívja a requestAnimationFrame-et a következő frissítés ütemezéséhez. Amikor a böngészőablak (vagy lap) aktív, ez körülbelül 60-szor másodpercenkénti frissítést eredményez, ami szép animációkat tesz lehetővé.
Ha csak egy ciklusban frissítenénk a DOM-ot, az oldal lefagyna, és semmi sem lenne látható. A böngészők nem frissítik az oldalt közben JavaScript működik, és jelenleg nem engedélyezi az oldallal való munkát. Ezért van szükségünk egy requestAnimationFrame-re – ez közli a böngészővel, hogy készen vagyunk, és meg tudja csinálni a saját böngésző dolgait, például frissíti a képernyőt és válaszol a felhasználói kérésekre.
Az animációs függvényünk argumentumként az aktuális időt adja át, amit összehasonlít az előző idővel (a lastTime változóval), így a macska mozgása egyenletes és az animáció zökkenőmentesen fut. Ha csak adott ideig mozgatnánk minden lépésnél, a mozgás megakadna, ha például egy másik feladat terhelné a számítógépet.
A körben történő mozgás a Math.cos és a Math.sin trigonometrikus függvényekkel történik. Röviden leírom azokat, akik nem ismerik őket, hiszen a jövőben szükségünk lesz rájuk.
A Math.cos és a Math.sin akkor hasznos, ha pontokat kell keresnie egy (0, 0) középpontú körön, amelynek sugara egy. Mindkét függvény a körön elfoglalt pozícióként értelmezi az argumentumát, ahol a 0 a kör jobb szélén lévő pontot jelöli, majd az óramutató járásával ellentétes irányban, amíg egy 2π (körülbelül 6,28) út körbe visz minket. A Math.cos kiszámítja annak a pontnak az x-koordinátáját, amely az aktuális helyzetünk a körön, és a Math.sin visszaadja az y-koordinátát. A 2π-nél nagyobb vagy 0-nál kisebb pozíciók (vagy szögek) is megengedettek - a forgatások ismétlődnek úgy, hogy az a+2π ugyanazt a szöget jelenti, mint a.
A stílusok általában mértékegységeket igényelnek. Esetünkben a képpontokat hozzá kell adnunk a számhoz, hogy elmagyarázzuk a böngészőnek, hogy pixelben (és nem centiméterben, ems-ben vagy más mértékegységben) számolunk. Könnyű elfelejteni. Mértékegység nélküli számok használata a stílus figyelmen kívül hagyását eredményezi – kivéve, ha a szám 0, ami egységfüggetlen.
Összegzés A JavaScript programok a DOM nevű struktúrán keresztül ellenőrizhetik és módosíthatják az aktuális böngésző által megjelenített dokumentumot. Ez az adatstruktúra a böngésző dokumentummodelljét reprezentálja, és egy JavaScript program módosíthatja a látható dokumentum módosítása érdekében. A DOM faként van megszervezve, amelyben az elemek a dokumentum szerkezetének megfelelően hierarchikusan vannak elrendezve. Az elemobjektumok parentNode és childNodes típusú tulajdonságokkal rendelkeznek, amelyek a fában való navigálásra szolgálnak.A dokumentum megjelenése stílusok segítségével módosítható, akár úgy, hogy stílusokat ad hozzá közvetlenül a csomópontokhoz, akár szabályokat határoz meg bármely csomóponthoz. A stílusoknak számos tulajdonsága van, például szín vagy megjelenítés. A JavaScript közvetlenül befolyásolhatja egy elem stílusát a stílustulajdonságán keresztül.
Gyakorlatok Táblázat készítése A 6. fejezetben egyszerű szövegből készítettünk táblázatokat. A HTML segítségével könnyen készíthetünk táblázatokat. A HTML-ben egy táblázat a következő címkék használatával készül:
| Kilimandzsáró | 5895 | Tanzánia |
Minden sorhoz egy címke tartalmaz egy címkét. Belül cellákat helyezhetünk el: akár fejléccellákat, akár szabályos cellákat.
Ugyanazok az adatok, amelyeket a 6. fejezetben használtunk, ismét elérhetők a MOUNTAINS változóban.
Írjon egy buildTable függvényt, amely azonos tulajdonságokkal rendelkező objektumok tömbje alapján létrehoz egy táblát reprezentáló DOM-struktúrát. A táblának rendelkeznie kell egy fejlécsorral, ahol a tulajdonságnevek elemekbe vannak csomagolva, és tömbobjektumonként egy sornak kell lennie, ahol a tulajdonságai elemekbe vannak csomagolva. Itt jön jól az Object.keys függvény, amely az objektum tulajdonságainak neveit tartalmazó tömböt ad vissza.
Miután megtanulta az alapokat, igazítsa jobbra a számcellákat a style.textAlign tulajdonságának "jobbra" módosításával.
/* Stílusokat határoz meg a szép táblázatokhoz */ table (szegély-összecsukás: összecsukás; ) td, th (szegély: 1px tömör fekete; kitöltés: 3px 8px; ) th (szöveg igazítása: balra; ) function buildTable(data) ( / / Az Ön kódja ) document.body.appendChild(buildTable(MOUNTAINS));
Elemek címkenév szerint A getElementsByTagName metódus az összes gyermekelemet a megadott címkenévvel adja vissza. Változtassa meg a metódus verzióját egy normál függvényré, amely egy csomópontot és egy karakterláncot (címkenév) vesz fel, és egy tömböt ad vissza, amely tartalmazza az összes csökkenő csomópontot a megadott címkenévvel.Egy elem címke nevének megtudásához használja a tagName tulajdonságot. Vegye figyelembe, hogy a címke nevét nagybetűvel adja vissza. Használja a toLowerCase vagy toUpperCase karakterlánc-metódusokat.
Cím egy span elemmel belül.
Egy, két fogású bekezdés.
function byTagName(node, tagName) ( // Az Ön kódja ) console.log(byTagName(document.body, "h1").length); // → 1 console.log(byTagName(document.body, "span").length); // → 3 var para = document.querySelector("p"); console.log(byTagName(para, "span").length); // → 2 Macskakalap Hosszabbítsa meg a macska animációját úgy, hogy a macska és a kalapja is az ellipszis ellentétes oldalán repüljön.Vagy hadd repüljön a kalap a macska körül. Vagy gondolj valami más érdekességre.
Sok objektum könnyebb pozicionálása érdekében érdemes abszolút pozicionálásra váltani. Ekkor a felső és a bal oldal a dokumentum bal felső sarkához viszonyítva lesz. A negatív koordináták használatának elkerülése érdekében adott számú képpontot adhat hozzá a pozícióértékekhez.
varcat = document.querySelector("#macska"); var hat = document.querySelector("#kalap"); // Itt a kódod.
innerHTML
vartext = element.innerHTML;
element.innerHTML = "";
Egy új innerHTML hozzárendelése felülírja a kódot, még akkor is, ha az új érték hozzáadódik az aktuálishoz (+=). Az így hozzáadott szkriptek nem hajtódnak végre.
külső HTML
A teljes elemet tartalmazza és nem módosítható. Technikailag ennek a tulajdonságnak írása egy új elemet hoz létre, amely felváltja a régit. A változókban a régi elemre való hivatkozások nem változnak.
adat
textNode.data - szöveges csomópontok és megjegyzések tartalma
textContent
element.textContent – szöveg az elemen belül címkék nélkül.
Van egy nem szabványos innerText tulajdonság is, amely sok hasonlóságot mutat a textContenttel.
rejtett
elem.rejtett = igaz
A rejtett attribútum nem támogatott az IE11-ben.
A legtöbb szabványos attribútum a DOM-ban az objektum tulajdonságaivá válik:
element.id = "id"
Nem szabványos attribútumok esetén nem jön létre tulajdonság (meghatározatlan)
Létrehozhatja saját DOM-tulajdonságait:
element.myData = (név:"János", vezetéknév:"Smith");
és módszerek:
element.myFunc = function()(figyelmeztesse ezt.csomópontnév);
Működik, mert DOM csomópontok normál JavaScript objektumok. Ezek a nem szabványos tulajdonságok és módszerek nem befolyásolják a címke megjelenítését, és csak JavaScriptben láthatók.
Címkeattribútumok elérése:
element.hasAttribute(name)
element.getAttribute(név)
element.setAttribute(név, érték)
element.removeAttribute(name)
Az elem.attributes attribútumok pszeudotömbje.
Az attribútumok megkülönböztetik a kis- és nagybetűket (html), a tulajdonságok pedig a kis- és nagybetűket (javaScript).
Az attribútum értéke mindig egy karakterlánc.
Attribútum: a.getAttribute("href") – pontosan azt jeleníti meg, ami a HTML-ben található
Tulajdonság: a.href – eltérhet az attribútum értékétől
Leggyakrabban egy tulajdonság függ egy attribútumtól, de nem fordítva. A tulajdonság megváltoztatása nincs hatással az attribútumra.
Az osztály attribútumnak két tulajdonsága van:
osztálynév - karakterlánc
classList - objektum
classList objektum metódusok:
element.classList.contains("class") - ellenőrizze, hogy egy objektum tartalmaz-e egy adott osztályt
element.classList.add("osztály")
element.classList.remove("osztály")
element.classList.toggle("osztály")
A classList egy pszeudotömb, végig lehet iterálni hurokhoz.
adatattribútumokAz egyéni adatattribútumok nem csak attribútumként, hanem az adatkészlet tulajdonságon keresztül is elérhetők
data-about = "valamilyen érték"
elem.adatkészlet.about
szülő.contains(child) - igaz vagy hamis
ellenőrzi, hogy a gyermek csomópont be van-e ágyazva a szülőbe
nodeA.compareDocumentPosition(nodeB) – Információt nyújt az elemek tartalmáról és egymáshoz viszonyított sorrendjéről. A visszatérési érték egy bitmaszk:
Csomópontok hozzáadása és eltávolításavardiv = document.createElement("div")
document.createTextNode("szöveg")
parent.appendChild(elem) - az elem a szülő végére kerül
parent.insertBefore(elem, nextSibling) - az elem a nextSibling elé kerül hozzáadásra
parent.insertBefore(elem, parent.firstChild) - hozzáadva az elejéhez
parent.insertBefore(elem, null) - úgy működik, mint az appendChild
Minden beszúrási módszer visszaadja a beillesztett csomópontot.
Egy elem mozgatásakor nem kell először eltávolítani a régi helyről, a beillesztési módszerek ezt automatikusan megteszik.
element.insertAdjacentHTML(ahol, html) - tetszőleges HTML kód beszúrása a dokumentumba bárhová. A Where megadja, hogy hova kell beszúrni a html-t az elemhez képest - beforeBegin, afterBegin, BeforeEnd, afterEnd.
element.insertAdjacentElement(hol, newElement)
element.insertAdjacentText(hol, szöveg)
az utolsó két módszert a Firefox nem támogatja
node.append(...nodes) - csomópontokat szúr be a csomópont végére,
node.prepend(...nodes) - csomópontokat szúr be a csomópont elejére,
node.after(...nodes) - csomópontokat szúr be a csomópont után,
node.before(...nodes) - csomópontokat szúr be a csomópont elé,
node.replaceWith(...nodes) - Csomópontokat szúr be a csomópont helyett.
itt a csomópontok csomópontok vagy karakterláncok, tetszőleges számban és kombinációban, vesszővel elválasztva.
var fragment = document.createDocumentFragment() - egy DOM-csomópontot szimulál, amely eltűnik, amikor beillesztik egy dokumentumba, és csak a gyermekei maradnak. BAN BEN modern böngészők Nem ajánlott.
element.cloneNode(true) - az elem mély másolata
element.cloneNode(false) - másolás gyermekek nélkül
parent.removeChild(elem)
parent.replaceChild(newElement, element)
element.remove() - közvetlenül eltávolítja az elemet, a szülőre való hivatkozás nélkül.
A metódusok visszaadják a távoli gazdagépet
Az oldalon végzett munka és dinamikus változtatások fő eszköze a DOM (Document Object Model) – egy XML/HTML dokumentumokhoz használt objektummodell.
A DOM modell szerint a dokumentum egy hierarchia.
Minden HTML címke külön csomópont-elemet alkot, minden szövegrész egy szövegelemet, és így tovább.
Egyszerűen fogalmazva, a DOM egy dokumentumot címkék faként ábrázol. Ezt a fát címkék és az oldal szövegrészletei egymásba ágyazott szerkezete alkotja, amelyek mindegyike külön csomópontot alkot.
A legegyszerűbb DOMKezdésként készítsük el a DOM-fát a következő dokumentumhoz.
Fejléc Gyönyörű dokumentum
A legkülső címke a , tehát a fa róla indul el.
Belül két csomópont van: és - ezek gyermekcsomópontjaivá válnak a számára.
Címkék formája elem csomópontok(elem csomópont). Szöveg elküldve szöveges csomópontok(szöveg csomópont). Mindkettő a DOM-fa peer csomópontja.
Bonyolultabb példaFontolja meg most egy fontosabb oldalt:
A jávorszarvasról Az igazság a jávorszarvasról.
A hierarchia gyökéreleme a html . Két leszármazottja van. Az első a fej, a második a test. És így tovább, minden beágyazott címke a fenti címke gyermeke:
Ezen az ábrán a csomópontok-elemek kék, a szöveges elemek feketével vannak jelölve.
A fát kék csomópont elemek - HTML címkék - alkotják.
És így néz ki a fa, ha közvetlenül a HTML oldalra rajzolja:
Az ábrán látható fa egyébként nem veszi figyelembe a csak szóköz karakterekből álló szöveget. Például egy ilyen szöveges csomópontnak közvetlenül a után kell lennie. Az ilyen "üres" csomópontokat nem tartalmazó DOM-ot hívják "normalizált".
Nézzünk egy kicsit összetettebb dokumentumot.
Adatdokumentum
A legfelső címke a html, fej és test gyermekei vannak, és így tovább. Az eredmény egy címkefa:
Attribútumok
Ebben a példában a csomópontok attribútumai: style , class , id . Általánosságban elmondható, hogy az attribútumok azon DOM csomópontjainak is számítanak, amelyek szülője DOM elem ahol szerepelnek.
A webes programozásban azonban ezeket a dzsungeleket általában nem mászik meg, és az attribútumokat egyszerűen a DOM csomópont tulajdonságainak tekintik, amelyek, mint később látni fogjuk, a programozó kérésére beállíthatók és módosíthatók.
Valójában ez titok, de a DOCTYPE egyben egy DOM-csomópont is, és a DOM-fában található a HTML-től balra (ez a tény az ábrán el van rejtve).
P.S. Ami a titkot illeti – persze vicc, de igazából nem mindenki tud róla. Nehéz elképzelni, hol lehet hasznos ez a tudás...
Normalizálás különböző böngészőkbenHTML elemzésekor internet böngésző azonnal létrehoz normalizálva DOM, amely nem hoz létre csomópontokat üres szövegből.
A Firefoxnak más a véleménye, minden szövegrészletből létrehoz egy DOM elemet.
Ezért a Firefoxban a dokumentum fája így néz ki:
Az ábrán a rövidség kedvéért a szöveg csomópontjait egyszerűen hash jelöli. szervezetnek 7 gyereke van 3 helyett.
Az Operának is van mivel dicsekednie. Hozzáadhat egy extra üres elemet „csak magától”.
Ennek megtekintéséhez nyissa meg a dokumentumot. Visszaadja a document.body gyermekcsomópontjainak számát, beleértve a szöveges csomópontokat is.
IE-re 3-at, Firefoxra 7-et, Operára 8-at (!?) kapok.
A gyakorlatban ez az összeférhetetlenség nem okoz nagy problémákat, de emlékezni kell rá. Például a különbség megnyilvánulhat a fa csomópontjainak felsorolása esetén.
A DOM erejeMiért van szükségünk a szép rajzok mellett hierarchikus DOM-modellre?
Nagyon egyszerű:
Minden DOM-elem egy objektum, és tulajdonságokkal rendelkezik a tartalom manipulálásához, a szülők és a gyermekek eléréséhez.
A dokumentum objektumot DOM-kezelésre használják.
A dokumentum segítségével megkaphatja a fa kívánt elemét, és módosíthatja annak tartalmát.
Például ez a kód veszi az első elemet az ol címkével, eltávolít két listaelemet egymás után, majd fordított sorrendben adja hozzá őket:
Var ol = document.getElementsByTagName("ol") var hiter = ol.removeChild(ol.firstChild) var kovaren = ol.removeChild(ol.firstChild) ol.appendChild(kovaren) ol.appendChild(hiter)
Egy ilyen szkript munkájának példájához kattintson a szövegre a jávorszarvas oldalon
A régebbi kézikönyvekben és szkriptekben előfordulhat, hogy az oldal HTML-kódja módosul a document.write közvetlen meghívásával.
A modern szkriptekben ezt a módszert szinte soha nem használják, annak esetei helyes alkalmazás ujjakon meg lehet számolni.
Kerülje a document.write-t. Hacsak nem igazán tudja, hogy mit csinál (és miért olvas oktatóanyagot – már guru vagy)
Nézzük meg közelebbről a hozzáférési módszereket és a DOM-elemek tulajdonságait.
Hozzáférés az elemekhezA DOM minden hozzáférése és módosítása a dokumentumobjektumból származik.
Kezdjük a fa tetején.
dokumentum.documentElementA legtöbb felső tag. Érvényes HTML oldal esetén ez a következő lenne.
dokumentumtörzsA címke, ha szerepel a dokumentumban (kell lennie).
A következő példa, amikor a gombra kattint, megjeleníti a document.documentElement és a document.body objektumok szöveges megjelenítését. Maga a karakterlánc böngészőfüggő, bár az objektumok mindenhol ugyanazok.
function go() ( alert(document.documentElement) alert(document.body) )
DOM elemtípusokA DOM minden elemének típusa van. Ennek számát az elem.nodeType attribútum tárolja
Összesen 12 típusú elem található a DOM-ban.
Általában csak egyet használnak: Node.ELEMENT_NODE , amelynek száma 1. A HTML címkék az ilyen típusú elemeknek felelnek meg.
Néha a Node.TEXT_NODE típus is hasznos, ami egyenlő 3-mal. Ezek szöveges elemek.
Más típusok be javascript programozás nem használják.
A következő példa, amikor a gombra kattint, kinyomtatja a document.documentElement típusát, majd a document.body csomópont utolsó gyermekének típusát. Ez egy szöveges csomópont.
function go() ( alert(document.documentElement.nodeType) alert(document.body.lastChild.nodeType) ) Szöveg
PéldaPéldául így nézne ki a fenti példa dokumentuma egy böngészőben, ha minden látható elemet a jobb felső sarokban egy nodeType szám keretezne.
... adatok
Itt csak a törzsön belüli elemek jelennek meg, mivel csak ezek jelennek meg az oldalon. Az 1-es típusú elemeknél (címkék) a megfelelő címke zárójelben van feltüntetve, szövegelemeknél (3-as típus) csak egy szám.
Gyermek elemekA következő példa végigfut a document.body összes gyermekén.
For(var i=0; i BODY
stílusEz a tulajdonság szabályozza a stílust. Hasonló a stílus beállításához a CSS-ben.
Például beállíthatja az elem.style.width értéket:
A gomb forráskódja:
Eszik Általános szabály helyettesítések - ha a CSS attribútum kötőjeleket tartalmaz, akkor a stílus beállításához le kell cserélni őket erre nagybetűs leveleket.
Például a z-index tulajdonság 1000-re állításához a következőket kell beállítani:
elem.stílus.zIndex = 1000
innerHTMLEzt a tulajdonságot egyszer csak az IE támogatta. Most már minden modern böngésző támogatja.
Tartalmazza az összes HTML-t a csomóponton belül, és módosítható.
Az innerHTML tulajdonság főként egy oldal tartalmának dinamikus megváltoztatására szolgál, például:
Document.getElementById("footer").innerHTML = "Viszlát!"
Talán az innerHTML az egyik leggyakrabban használt DOM elem tulajdonság.
osztály névEz a tulajdonság az elem osztályát adja meg. Teljesen analóg a html "class" attribútumával.
Elem.className = "új osztály"
onclick, onkeypress, onfocus...És más tulajdonságok, amelyek "on..."-val kezdődnek, tárolják a megfelelő eseménykezelő függvényeket. Például hozzárendelhet egy kezelőt onclick események.
Ha többet szeretne tudni ezekről a tulajdonságokról és eseménykezelőkről, lásd:
Ez a kiadvány egy cikksorozatot előz meg alternatív módokon dolgozni XML-lel. „Alternatív”, mivel az XML-lel való munkavégzés az 1C-ben általában korlátozott xml elemzése szekvenciális olvasás segítségével - a szövegtartalom soronkénti elemzése. És vannak más módok is.
Például az xPath XML lekérdezési nyelv vagy az XSL átalakítási minták használatával. Ezekről a lehetőségekről a következő cikkekben lesz szó. De mindegyik az XML dokumentumok mögöttes DOM-reprezentációjára támaszkodik. Arról, hogy mi az a DOM (dokumentumobjektum-modell vagy dokumentumobjektum-modell), és erről a kiadványban lesz szó.
A DOM alapja egy tetszőleges szerkezetű dokumentum csomópontok fa formájában történő ábrázolása, amelynek minden csomópontja (csomópontja) egy elem, egy elem attribútuma, egy elem szöveges értéke stb. csomópontok a "szülő - beosztottak" elvén épülnek fel. A dokumentumgyökérnek (DOM-fának) nincs szülője. Egy csonk elemnek nincs alárendelt eleme (az ilyen elemeket absztrakt módon a fa leveleinek nevezzük). Így a DOM modell nem csak XML-hez, hanem tulajdonképpen bármilyen strukturált dokumentumhoz (HTML, XHTML) elkészíthető. Így például a felhasználó böngészője, egy weboldal HTML kódját az internetről kapva, ennek az oldalnak a DOM-fáját építi fel a felhasználó számítógépének RAM-jában.
A DOM modell a lehetőségek széles skáláját nyitja meg a dokumentumadatok kezelésében. Létrehozhat új csomópontokat, beillesztheti őket a fa különböző szintjeire, másolhat csomópontokat, törölhet csomópontokat, kereshet csomópontokat különböző paraméterek alapján, és még sok más.
Egy XML-dokumentum DOM-ja az alábbi ábrán látható.
Minden modern programozási nyelv rendelkezik eszközökkel (elemzőkkel) az ilyen fákkal való munkavégzéshez. A karakterlánc-tartalmat bemenetként fogadva az XML-elemző csomópontfát épít a RAM-ban, és manipulációkat hajt végre a fa adataival. Ennek a megközelítésnek az előnye a soronkénti elemzéssel szemben nyilvánvaló: a fa egyetlen lekérdezésével kiválaszthatja a szükséges adatokat anélkül, hogy a teljes dokumentumot soronként végigmenne, mivel a RAM tartalmazza az elemek teljes reprezentációját minden összekapcsolások.
Az 1C platformon a DOM-modellt egy speciális DocumentDOM objektum képviseli, amely viszont a DOM Builder objektummal és annak Read metódusával épül fel. Ez a módszer általában egy XML-olvasó vagy egy HTML-olvasó objektumot használ bemenetként, amely közvetlenül használható fájlokból való olvasáshoz, vagy XML- vagy HTML-szöveges tartalomból tölthető be. Nos, akkor számos olyan struktúra létezik, amely lehetővé teszi adatok kinyerését az olvasott dokumentum objektummodelljéből.
Az összes lehetőség közül az én szemszögemből a legérdekesebb az 1. lehetőség az EvaluateXPath Expression metódus használatával. A következő cikk ennek lesz szentelve.
A soronkénti elemzés előnyei: kisebb az erőforrásigény. Hátrányok: sokáig tart az adatok beszerzése, soronként el kell olvasni a teljes fájlt, bonyolult szerkezetű XML dokumentumok elemzésénél a programkód bonyolultsága.
A DOM-on keresztüli mintavételezés előnye: az adatmintavételezés sebessége, a programkód egyszerűsége. Hátrányok: erőforrásigény, a DOM felépítése és lekérdezése el van költve RAMés feldolgozási teljesítmény.
