HTML DOM

Html DOM- HTML Document Object Model

Bu model web səhifəsində html elementlərinin bütün xüsusiyətlərinə çata bilər və dəyişdirə bilər.Məsələn istifədaçi qeydiyyatı səhifəsi var əlimizdə,bu qeydiyyatda müxtəlif məlumatlar alırıq və bu məlumatları hər hansı kriteriyalara görə olmalıdır.Ona görədə DOM(Document Object Model) köməyimizə çatır.DOM ilə sadəcə bir formda deyil müxtəlif yerlərdə istifadə etmək olar hətta css-ni belə dəyişdirə bilərik. DOM bir W3C (Web Wide Consortium) standartıdır. W3C DOM standartı üç hissəyə ayrılır.

• Core DOM: Document tipləri üçün standart bir modeldir.
• XML DOM: XML səhifələri üçün standart bir modeldir.
• HTML DOM: HTML səhifələri üçün standart bir modeldir.

Elementlərə çatmağın müxtəlif cür yolu var.Bunlardan hər hansı birini istifadə edə bilərsiz mən aşağıda bir neçə üsulu sizinlə paylaşacam.HTML elementlərinə çatdıqdan sonra bu elementdəki dəyəri .value açar sözü ilə əldə edilir.Hər hansı bir text hissəsində alınan dəyəri .value ilə götürə bilərik.Əsasən istifadəçinin daxil etdiyi məlumatı götürməkdə çox işimizə yarayır.

getElementById()

getElementById bir funksiyadır və bu funksiyanın köməyi ilə hər hansı bir html elementinin id’sini istifadə edərək bu elementin xüsusiyətlərini əldə edib , dəyişə bilərik gəlin baxaq nümunəyə.

Burada inputumuza hansı texti daxil etsək onu ekrana yazdıracaq.Nümunəni özünüzdə yoxlaya bilərsiniz.

Burada istifadəçinin qeydiyatını yoxladıq və bir neçə kriteriyalar yerləştirdik.

getElementsByTagName()

getElementsByTagName() bir funksiyadır oda tagların adına görə html elementlərinə çata bilərik.Burda xüsusi bir qeyd demək istərdimki əgər seçdiyimiz html elementi səhifədə bir neçə dənədirsə onda hamısına təsir edəcək yazdığımız funksiya.Buna görədə getElementsByTagName() array formasında saxlayır özündə dəyəri gəlin aşağıda baxaq.

Buraya qədər biz sadəcə dəyərləri alıb səhifəyə yazdırırdıq.Bundan sonrakı nümunələri elementləri dəyişdirərək irəliyəcik.

Bu nümunəmizdə ilk inputa yazdığımız datanı 2ci də çap edirik.

Bu nümunəmizdə də 2ci inputumaza html5 ilə gələn readonly sözündən istifadə etdik burda heç bir element daxil edə bilmirik 2ci inputa.

Bu nümunəmizdə isə innerHTML -dən istifadə etdik innerHTML html elementinin dəyərini dəyiştirmək üçün istifadə olunur. 2 button yerləştirdik və hər biri bir funksiyanı yerinə yetirir.

Burda isə neçə dəfə azaldılıb artırılmasını göstərdik və resetləmə butonu əlavə etdik.

İndi isə realtime olaraq işləyən inputa nə daxil etsək p tagınə ötürən bir algorithma quraq.

Tək mətn dəyişmək yox həmdə element css propertyləri əlavə edə bilər onları müxtəlif rəngdə yazdıra bilərik gəlin bir yerdə baxaq

Mətnimizi hər 3 rəngə çevirə bildik.

Oxuduğunuz üçün təşəkkürlər. Ümid varam bəyəndiniz və kiməsə yararı oldu :)