Az elemek tulajdonságai és tulajdonságai dom

Az oldal létrehozásakor a böngésző információt kap az elemek attribútumairól. Ezenkívül az oldal összes eleme tulajdonságokkal rendelkező objektum, amelyet szintén figyelembe veszünk az elemek megjelenítésekor. A DOM felület lehetővé teszi az elemek tulajdonságainak és tulajdonságainak kezelését. Szükséges megérteni a köztük lévő különbséget, hogy tudják, mit és hol használják.

Elemek tulajdonságai

A HTML-dokumentumokban a címkék bizonyos attribútumokkal rendelkezhetnek adott értékekkel. Az attribútumok befolyásolhatják egy elem megjelenítését egy oldalon vagy megváltoztathatják a célt. Ezért az oldal elemeinek manipulálásához lehetőséget kell adni a HTML-címkék tulajdonságainak kezelésére.

A DOM felület az elemek attribútumaival való együttmûködés módjainak halmazát jelenti.

hasAttribute (attribútum) Ellenőrzi egy attribútum jelenlétét. getAttribute (attribútum) Visszaad egy karakterláncot egy attribútumértékkel. setAttribute (attribútum, érték) Hozzon létre egy attribútumot vagy hozzárendel egy új értéket. removeAttribute (attribútum) Törli az attribútumot.

Ezek a módszerek kifejezetten a HTML-attribútumokkal dolgoznak, ahogyan a dokumentumban vannak. Valójában megváltoztatják az oldal kódját. Ezért számukra tisztességes:

• Az attribútumértékek mindig húrok.
• Minden esetben meg lehet adni az attribútum nevét, mivel a HTML nem igényel karakterkódot a kódban.

Elem tulajdonságai

Az attribútumokkal ellentétben:

• Az ingatlan értéke bármilyen típusú lehet.
• Az ingatlannevek kis- és nagybetűket érzékelnek.

A tulajdonságok összekapcsolása az attribútumokkal

A DOM felületen a HTML attribútumok és a DOM elemek fogalma szorosan összefügg. Oldalmodell létrehozásakor minden egyes elemhez azonos attribútumú attribútum tulajdonságokat hoz létre, és ugyanazokat az értékeket rendelik hozzá. Ez azonban nem minden attribútumra érvényes, ami bizonyos zavart okoz, de gyakrabban hasznos.

Böngészőablakban történő megjelenítéskor az elem paraméterei a tulajdonságaitól függenek. Az oldalon található elemek további vezérlése e tulajdonságok megváltoztatásával valósul meg. Ezért általában az elemek tulajdonságaival kell foglalkozni, és nem az artibutokkal. Az attribútumokat általában az információk tárolására használják.

Például szövegbeviteli mező rendelkezik az érték attribútummal. Dokumentum létrehozásakor létrejön egy elem, amely az érték tulajdonsággal rendelkezik. amely az oldal HTML-kódjában megadott értékkel rendelkezik. A mezőben megjelenő szöveg az érték tulajdonságából származik. Ha a felhasználó beírja a szöveget a mezőbe, a tulajdonság automatikusan új értéket vesz fel. Az oldal kódja azonban nem változik, így az attribútum eredeti értéke továbbra is elérhető.

A példa azt mutatja, hogy az érték tulajdonság megváltoztatása nem befolyásolja az érték attribútum értékét. Így az attribútum és a tulajdonságok értékeinek összehasonlításával megértheti, hogy a mezőben lévő szöveg megváltozott-e.

Elemek esetén a tulajdonságok nem csak a kódban megadott attribútumokból, hanem általában az összes elemhez rendelkezésre állnak, még akkor is, ha azok nem szerepelnek a kódban. Globális attribútumok és esemény attribútumok szerepelnek. Ezek a tulajdonságok az alapértelmezett értékeket veszi figyelembe.

Dokumentum elkészítésekor az azonos név és tulajdonságok tulajdonságai nem mindig ugyanolyan jelentéssel bírnak.

A leggyakoribb példa a href attribútum.

A Boolean attribútum (hidden.autofocus.checked.less) esetében ugyanaz a Boolean tulajdonság jön létre, azaz az érték igaz vagy hamis. De a HTML-kódban ezek az attribútumok általában nem rendelkeznek értékekkel.

Ha az attribútum nem szabványos attribútumot ad meg a HTML-kód adott elemének, akkor ugyanaz a tulajdonság nem kerül létrehozásra.

És ez logikus, ha az attribútumot nem írja le a szabványban. így nem befolyásolhatja az elem paramétereit.

Az ilyen funkcióval kapcsolatos problémák általában nem merülnek fel, mivel a nem szabványos attribútumokat szinte nem használják (az oldal nem adja át az érvényesítést).

Az adat-

A HTML-ben lévő információk átadásához az előtagadatokkal rendelkező attribútumokat kell megadni. Ezekkel az attribútumokkal dolgozhat az adatkészlet tulajdonságán. Tartalmazza az elem összes adat-attribútumának listáját.

Az osztály attribútum

Ez a tulajdonság akkor hasznos, ha egy elemhez csak egy osztályt rendel. De ha több van közülük, akkor nehezebb dolgozni ezzel a tulajdonsággal. Ilyen esetekben a DOM további tulajdonságokat vezetett be az osztályok - classList.

Az osztálylista tulajdonsága tartalmazza az elemosztályok listáját (pseudomain). A tömb használatához hurok vagy beépített módszerek használhatók:

classList.add (class) Hozzáad egy osztályt. classList.remove (osztály) Eltávolítja az osztályt. classList.contains (class) Ellenőrzi, van-e osztály. classList.toggle (class) Hozzáad egy osztályt, ha nem létezik, vagy törli, ha már létezik.

A stílus attribútum

A stílus tulajdonság az összes CSS elem tulajdonságainak gyűjteményét tartalmazza. Ebben az esetben csak azok a tulajdonságok vannak megadva, amelyeket a stílusattribútum határoz meg. A többi tulajdonság értéke üres sor.

Ennek a tulajdonságnak a használata nagyon kényelmes, mert az általa meghatározott elem CSS tulajdonságai szinte a legmagasabb prioritás (és a stílus attribútum).

Másik előnye, hogy minden CSS-tulajdonságnál külön dolgozhat. A stílus tulajdonság egy objektumot képvisel, amelyben minden tulajdonságnak van egy adott CSS-stílusa.

Ezenkívül a stílustípus stílusokat is hozzárendelhet karakterláncként, ahogyan a stílus attribútummal. Ehhez az írható style.cssText tulajdonságot használja. Ne feledje azonban, hogy egy új érték hozzárendelése a style.cssText tulajdonsághoz teljesen felülírja a stílus attribútum értékét.

A stílus tulajdonság nagyon hasznos, ha módosítani kell egy elem CSS tulajdonságát. De nem alkalmas az alkalmazott stílusok értékének megszerzésére. Ennek az az oka, hogy a stílus tulajdonság a stílustől a stílus értékeket kapja. amelyet ritkán használnak (leggyakrabban a CSS-stílusokat külön fájlban veszik fel).

Az elemre alkalmazott összes CSS tulajdonság értékének megadásához az ablakot.getComputedStyle () metódust kell használnod.

getComputedStyle ()

Az ablakobjektum getComputedStyle () metódusa ugyanazt az objektumot adja vissza, mint a stílus tulajdonság. De tartalmazza az összes olyan stílus értékeit, amelyek jelenleg az elemre vonatkoznak (figyelembe véve a külső stílusokat és címkék fájlokat