Ebben a leckében a dokumentumobjektum azon metódusait tekintjük meg, amelyek egy csomópont vagy csomópontgyűjtemény keresésére szolgálnak egy teljes dokumentumban. Valamint a csomópont objektum (node) metódusai, amelyek hasonló műveleteket hajtanak végre, de már gyermekcsomópontjaik között.

Módszerek egy csomópont vagy csomópontgyűjtemény megtalálására egy fában

Az előző leckében megnéztük azokat a tulajdonságokat, amelyekkel navigálhatunk a fában, és megtalálhatjuk a szükséges csomópontokat. De a csomópontok keresése tulajdonságaik alapján nagyon nehéz és nem hatékony. Ezért a webfejlesztők a fában lévő csomópontok megtalálásához általában kifejezetten erre a célra tervezett módszereket használnak a dokumentumon vagy csomópont objektumon.

getElementById() metódus

A getElementById(elementID) metódus csomópontobjektumként adja vissza a dokumentumban azt az elemet, amely a megadott azonosítóval (id="elemID") rendelkezik. Ha a megadott azonosítójú elem nem létezik, akkor ez a módszer null értéket ad vissza.

A szabvány szerint egy dokumentumban nem lehet több elem azonos id attribútum értékkel, pl. az azonosító értéknek egyedinek kell lennie ugyanazon a dokumentumon belül. Ha azonban a dokumentumban több elem is van a megadott azonosítóval, a getElementById() metódus az első talált elemet adja vissza.

document.getElementById(elemID)

Ennek a metódusnak van egy kötelező paramétere (elementID), amely egy karakterlánc, amely a lekérni kívánt elem id attribútumának értékét tartalmazza.

Például módosítsa az id="nameArticie" elemet tartalmazó elem szövegszínét.

Cikk címe

• 1 pont
• 2 pont
• 3 pont

//Az id="nameArticle" var nameArticle = document.getElementById("nameArticle") elem (node) lekérése; //a nameArticle.style.color = "blue" elem szövegszínének módosítása;

getElementsByClassName() metódus

A getElementsByClassName(className) metódus visszaadja az összes talált elemet a dokumentumban (a dokumentumhoz) vagy a gyermek csomópontok között (csomóponthoz), amelyek a megadott osztálynévvel (class="className") rendelkeznek NodeList objektumként (csomópontok gyűjteménye). Más szóval, ez a metódus egy NodeList objektumot ad vissza, amely olyan elemek (csomópontok) gyűjteménye, amelyek a metódus paraméterében megadott osztálynévvel rendelkeznek.

A talált csomópontok számának meghatározásához a NodeList objektum hossz tulajdonságát kell használni. A gyűjtemény összes csomópontja közötti iterációhoz pedig a következő ciklust használhatja:

Var elementsList = document.getElementsByClassName("lista"); for (var i=0; i

Most adjuk ki modális ablak tömbelemértékek leszármazottaival, pl. img címkék:

var myDiv=document.getElementById("div_for_img"); // szülőtároló elérése var childMas=myDiv.childNodes; // gyermektömb a következőhöz: (var i =0; i< childMas.length;i++){ alert(childMas[i].src); }

Ne feledje, hogy kényelmes ciklust használni egy gyermektömb elemei közötti iterációhoz. Azok. példánkban egy ciklust kapunk:

... for (var a in childMas) ( alert(childMas[ a] .src ) ; )

For (var a in childMas)( alert(childMas[a].src); )

Az elemek elérésének egyéb módjai

Nézzünk más módokat egy példán keresztül:

1 3 4

1 3 4

Hozzáférés:

... // nem kívánt és elavult elemelfogadók: alert(document.forms [ 0 ] .name ) ; // f alert(document.forms [ 0 ] .elements [ 0 ] .type ) ; // szöveges figyelmeztetés(document.forms [ 0 ] .elements [ 2 ] .options [ 1 ] .id ) ; // o2 alert(document.f .b .type ) ; // gomb alert(document.f .s .name ) ; // ss alert(document.f .s .options [ 1 ] .id ); // o2 // preferált elem-elfogadók alert(document.getElementById ("t" ) .type ) ; // szöveges figyelmeztetés(document.getElementById("s" ) .name ) ; // ss alert(document.getElementById ("s" ) .options [ 1 ] .id ) ; // 02 alert(document.getElementById("o3" ) .text ) ; // 4 ...

... // nem kívánt és elavult elemelfogadók: alert(document.forms.name); // f alert(document.forms.elements.type); // szöveges figyelmeztetés(document.forms.elements.options.id); // o2 alert(document.f.b.type); // gomb figyelmeztetés(document.f.s.name); // ss alert(document.f.s.options.id); // o2 // preferált elem-elfogadók alert(document.getElementById("t").type); // szöveges figyelmeztetés(document.getElementById("s").name); // ss alert(document.getElementById("s").options.id); // 02 alert(document.getElementById("o3").text); // 4 ...

Példa: Hozzon létre egy gombot és egy szövegmezőt egy html dokumentumban. Egy szkript segítségével színezze ki a gomb hátterét (a gomb style.backgroundColor tulajdonsága), és jelenítsen meg egy feliratot "Helló!" a szövegmezőben (érték attribútum).

Html kód:

document.getElementById("t1").value = "Szia!"; document.getElementById("b1").style.backgroundColor = "red";!}

2. lehetőség:

document.getElementById ("t1" ) .setAttribute ("érték" , "Szia!" ) ; document.getElementById("b1" ) .style .backgroundColor = "piros" ;

document.getElementById("t1").setAttribute("value","Szia!"); document.getElementById("b1").style.backgroundColor = "piros";

Js8_2 feladat. Készítsen szövegmező címkéket az ábra képének megfelelően. Adja meg nekik a megfelelő (az ábrán látható) id attribútumértékeket. A szkript segítségével adja hozzá a "0" értéket az összes numerikus mezőhöz (numerikus értékeket feltételezve)

Űrlapadatok megadásának helyességének ellenőrzése

Üresen maradt a mező?

A felhasználó által megadott adatokban nem lehet megbízni. Ésszerűtlen azt feltételezni, hogy a felhasználók ellenőrizni fogják ezeket az adatok megadásakor. Tehát ehhez javascriptet kell használni.

Annak ellenőrzéséhez, hogy a szövegmező üresen maradt-e (például miután a felhasználó kitöltötte egy kérdőív adatait), az érték tulajdonságra kell hivatkozni. Ha az ingatlan értéke üres sor(""), ezért erről valahogy értesítenie kell a felhasználót.

if(document.getElementById("name").value=="") (egyes műveletek, például egy üzenet megjelenítése a mező kitöltésének követelményével );

Ezenkívül script nélkül is megteheti. A szövegmezők beviteli címkéje minta attribútumot tartalmaz. ahogy az értéke fel van tüntetve reguláris kifejezés a megadott űrlap szövegmezőjében lévő adatok érvényesítésére. Ha az attribútum jelen van minta, akkor az űrlapot addig nem küldi el, amíg a szövegmezőt megfelelően ki nem tölti.
Például annak ellenőrzéséhez, hogy egy mező üresen maradt-e:

Számérték helyett szöveg: az isNaN függvény

Ha a mezőben számértéket kell megadni, és helyette a felhasználó szöveget ír be, akkor az isNaN függvényt kell használni. – Nem szám?), amely ellenőrzi a bemenet típusát, és igaz értéket ad vissza, ha a bemenet numerikus helyett szöveg.

Hogy. ha true értéket ad vissza, akkor a felhasználót a megfelelő formátum megadására kell kérni, pl. szám.

if(isNaN(document.getElementById("percek").érték))( numerikus figyelmeztetés );

Adott egy oldal kitöltendő elemekkel:


Töredék html kódot:

1 2 3 4 5 6 7 8 9 10 11 12

Név: A fánkok száma: Percek: Részösszeg: Adó: Eredmény: ...

Név:
A fánkok száma:
Percek:
Részösszeg:
Adó:
Eredmény:
...

Szükséges:
Töltse ki az üres mezőket az alábbi kódrészletben, amely ellenőrzi, hogy két szövegmező megfelelően van-e kitöltve: Név(id="név") és percek(id="perc"). Használjon pipát a mező üresen hagyásához ("") és a numerikus mező kitöltésének megfelelő formátumához (isNaN).

* Végezze el a munkát a szövegmezők minta attribútumával is a használatával.

Szkriptrészlet:

A kódot a korábban átadott összetett feltételek felépítésére használják.

Egy új koncepció az Ön számára, hogy egy függvényt gombesemény-kezelőként hív meg:
onclick="placeOrder();"
Ha a gombra kattintunk, a placeOrder() függvény meghívódik.

Amellett, hogy lehetővé tesszük a weboldalak számára az elemek azonosítójuk alapján történő kiválasztását, az osztály attribútumuk alapján is kiválaszthatunk elemeket.

A feladat is nagyon gyakori. Amikor a forgatókönyveimet írom, nagyon gyakran kell használnom ezt a választót.

Tegyük fel, hogy a következő kód van egy oldalon.

Tartalom letiltása.

A feladat egyszerű, ki kell választani egy class = "elem" osztályú elemet, és Javascript segítségével végre kell hajtani vele néhány műveletet.

Nézzünk meg néhány lehetőséget, hogyan lehet ezt megtenni.

1. lehetőség Használat Javascript módszer getElementsByClassName.

Ha nem használ további könyvtárakat, akkor az elemet a getElementsByClassName("class_name") metódussal érheti el.

Például azzal kapcsolatban forráskód, a következő kódsorokat adhatja hozzá.

Tartalom letiltása. alert(document.getElementsByClassName("elem").innerHTML);

Ennek eredményeként, ha minden megfelelően működik, egy felugró ablakot kapunk, amelyben a div blokkon belüli szöveg jelenik meg.

Kérjük, vegye figyelembe, hogy a getElementsByClassName metódus végrehajtásának eredménye egy elemtömb lesz. Az oldalon több elem is szerepelhet ugyanabban az osztályban.

Éppen ezért a document.getElementsByClassName("elem") konstrukció végén jelezni kell, hogy a tömb nulla eleme () jelenik meg. A Javascript számlálása nullától kezdődik, nem egytől.

A getElementsByClassName metódussal azonban az a probléma, hogy ezt a módszert a böngészők régebbi verziói nem támogatják.

Van néhány trükk ennek megkerülésére, de ez redundáns kód. Használhat például reguláris kifejezéseket:

If(document.getElementsByClassName == undefined) ( document.getElementsByClassName = function(cl) ( var retnode = ; var myclass = new RegExp("\\b"+cl+"\\b"); var elem = this.getElementsByTagName( "*"); for (var i = 0; i< elem.length; i++) { var classes = elem[i].className; if (myclass.test(classes)) { retnode.push(elem[i]); } } return retnode; } };

Ez a probléma megoldásának egyik módja. De, hogy őszinte legyek, nem túl elfogadható számomra, hogy felesleges kóddal eltömítse az oldalt, ezért leggyakrabban a második megoldást használom a probléma megoldására.

2. lehetőség: Használat jquery könyvtárak.

A Jquery könyvtár használata sokkal könnyebbé teszi az elemek osztályattribútum szerinti kiválasztásának problémáját. A konstrukciót kell használni:

$(".elem")

Itt az elem az elemhez rendelt osztálynév.

Nem szabad elfelejteni, hogy ahhoz, hogy ez működjön, először a Jquery könyvtárat kell tartalmaznia. Hozzáadjuk a szakaszhoz, ennek egyik módja a következő kódsor hozzáadása:

A könyvtár betöltéséhez internetkapcsolatnak kell lennie.

Nézzük meg, hogyan működik ez egy példán keresztül.

Tartalom letiltása. figyelmeztetés($(".elem").html());

Magának a szkriptnek, mint az előző példában, annak az elemnek a kódja alatt kell lennie, amellyel kapcsolatba kíván lépni.

Így kétféleképpen léphet kapcsolatba olyan elemekkel, amelyek rendelkeznek osztály attribútuma. Válassza ki az Önnek legmegfelelőbbet, és használja a gyakorlatban.

Ahhoz, hogy a szkript működjön az oldal valamely elemével, először ezt az elemet kell megtalálni. Ezt többféleképpen is megteheti JavaScriptben. A talált elemet általában hozzárendeljük egy változóhoz, és később ezen a változón keresztül a script hozzáfér az elemhez, és végrehajt vele néhány műveletet.

Keresés azonosító alapján

Ha az elemhez id attribútumot adunk az oldal kódjában, akkor az elem az id alapján található. Ez a legegyszerűbb módja. Az elem keresése a dokumentum globális objektum getElementById() metódusával történik.

document.getElementById(id)

Lehetőségek:

id - a keresendő elem azonosítója. Az id egy karakterlánc, ezért idézőjelben kell lennie.

Hozzunk létre egy oldalt, adjunk hozzá egy elemet és adjunk neki egy azonosítót , és keressük meg ezt az elemet a szkriptben:

HTML kód:

JavaScript:

var blokk = document.getElementById("blokk"); konzolnapló(blokk);

A blokkváltozóhoz rendeltük a talált elemet, és megjelenítettük a változót a konzolban. Nyissa meg a böngésző konzolt, annak tartalmaznia kell az elemet.

Mivel az azonosító szerinti keresés a legegyszerűbb és kényelmes módja, gyakran használja. Ha valamilyen elemmel kell dolgoznia egy szkriptben, akkor az id attribútum ehhez az elemhez lesz beállítva az oldal kódjában, még akkor is, ha korábban nem volt beállítva. És keresse meg az elemet azonosítóval.

Keresés osztály szerint

A getElementsByClassName() metódus lehetővé teszi egy adott osztályhoz tartozó összes elem megtalálását.

document.getElementsByClassName(osztály)

Lehetőségek:

osztály - a megtalálandó elemek osztálya

A metódus a talált elemeket tartalmazó pszeudotömböt ad vissza. Pszeudotömbnek hívják, mert sok tömbmódszer nem működik rá. De a fő tulajdonság megmarad - a tömb bármely elemére hivatkozhat. Még ha csak egy elemet találunk is, az továbbra is benne van a tömbben.

Adjunk hozzá elemeket az oldalhoz, és adjunk nekik osztályt. Egyes elemek a korábban létrehozott blokkon belül lesznek elhelyezve. A másik rész a blokkon kívül jön létre. Ennek jelentése kicsit később derül ki. Az oldal most így fog kinézni:

HTML kód:

JavaScript:

Most csak azok az elemek találhatók, amelyek a blokkban találhatók.

Keresés címke alapján

A getElementsByTagName() metódus megkeresi az összes elemet egy adott címkével. A talált elemekkel egy pszeudotömböt is ad vissza.

document.getElementsByTagName (címke)

Lehetőségek:

tag - a keresendő elemek címkéje

Keressük meg az oldalon található összes p címkét:

var p = document.getElementsByTagName("p"); konzolnapló(p);

Ez a módszer nem a teljes dokumentumra, hanem egy adott elemre alkalmazható. Keresse meg az összes p címkét a blokkban.

Keresés választóval

Léteznek querySelector() és querySelectorAll() metódusok, amelyek megkeresik az adott szelektornak megfelelő elemeket. Ez azt jelenti, hogy a rendszer olyan elemeket fog találni, amelyekre a stílust alkalmazták volna, ha egy ilyen szelektorhoz adták volna meg. Ugyanakkor egy ilyen választó jelenléte az oldalstílusban egyáltalán nem szükséges. Ezeknek a módszereknek semmi közük a CSS-hez. A querySelectorAll() metódus megtalálja az összes olyan elemet, amely megfelel a választónak. És a querySelector() metódus talál egy elemet, amely az oldalkód első eleme. Ezek a módszerek helyettesíthetik a korábban tárgyalt elemek keresésének összes módját, mivel létezik azonosító-választó, címkeválasztó és sok más.

document.querySelector(selector)

document.querySelectorAll(választó)

A kijelölőket ugyanúgy írják, mint a CSS-ben, csak ne felejts el idézőjeleket tenni.

Adjunk hozzá egy listát az oldalhoz, és keressük meg a választó segítségével. Csak egy elemet keresünk, és biztosan tudjuk, hogy ez lesz az első, mert ez az egyetlen az oldalon. Ezért be ez az eset kényelmesebb a querySelector() metódus használata. Ennek a módszernek a használatakor azonban figyelembe kell vennie, hogy a jövőben ugyanazok az elemek hozzáadhatók az oldalhoz. Ez azonban a legtöbb módszerre vonatkozik.

HTML kód:

Ezek a módszerek nem a teljes dokumentumban, hanem egyetlen elemen belül is kereshetnek elemeket.

A példában csak címke szerinti szelektorokat használtunk. Próbáljon oldalelemeket keresni más választókkal.

Szomszédos elemek

A talált elemhez szomszédokat találhat. Minden elem egy objektum, és a szomszédos elemek az objektum tulajdonságain keresztül szerezhetők be. A previousElementSibling tulajdonság tartalmazza az előző elemet, a nextElementSibling tulajdonság pedig a következő elemet.

element.previousElementSibling

elem.nextElementSibling

Keresse meg az elemet a blokk után:

Gyermek elemek

A gyermekek birtokában egy sor gyermek található.

elem.gyerekek

Keresse meg a blokk gyermekelemeit.

A DOM szabvány számos eszközt biztosít egy elem megtalálására. Ezek a getElementById , getElementsByTagName és getElementsByName metódusok.

Hatékonyabb keresési módszereket kínálnak a javascript-könyvtárak.

Keresés azonosító alapján

A legkényelmesebb módja annak, hogy egy elemet a DOM-ban találjon meg, ha az id alapján szerezze be. Ez a document.getElementById(id) meghívásával történik

Például a következő kód kékre változtatja a szöveg színét az "e c id="dataKeeper" divben:

Document.getElementById("dataKeeper").style.color = "kék"

Keresés címke alapján

A következő módszer az, hogy minden elemet beszerez egy adott címkével, és megkeresi közöttük a kívántat. Ehhez a document.getElementsByTagName(tag) szolgál. Olyan elemek tömbjét adja vissza, amelyek rendelkeznek ezzel a címkével.

Például megkaphatja a második elemet (a tömb számozása nullától kezdődik) a li címkével:

Document.getElementsByTagName("LI")

Érdekes módon a getElementsByTagName nem csak a document -en hívható meg, hanem általában minden olyan elemen, amelyik rendelkezik címkével (nem szöveggel).

Ebben az esetben csak azok az objektumok találhatók, amelyek ezen elem alatt vannak.

Például a következő hívás az első div címkén belül található LI elemek listáját kapja meg:

Document.getElementsByTagName("DIV").getElementsByTagName("LI")

Szerezzen be minden gyereket

Az elem.getElementsByTagName("*") meghívása az elem csomópont összes gyermekének listáját adja vissza abban a sorrendben, ahogyan azok.

Például ezen a DOM-on:

Ilyen kód:

Var div = document.getElementById("d1") var elems = div.getElementsByTagName("*") for(var i=0; i