July 22, 2023

DOM

1 ELEMENTLARNI TANLASH

let wrapper = document.querySelector('.wrapper')

// agar .querySelector methodi dan fouydalansak va wrapper nomi classi bor elementlar soni bittadan kup bulsa quyidagi method birinchi bulib kurgan wrapper nomli classi bor elemntni olib keladi

let wrapper = document.querySelectorAll('wrapper')

// agar biz .querySelectorAll methodidan foydalansak u bizga NodeList qaytaradi,

NodeList uzi nima -tugunlar to'plamidir yani arrayga uhshagan lekin array bulmagan to`plamlarga biz NodeList deb ataymiz. NodeList arraay bulmasada lekin array methodlari yordamida nodelist ustida bazi amallarni bajarsak buladi masalan FOREACH() methodi orqali biz sikl hosil qilib NodeList elementlarini birma bir aylanib chiqishimiz mumkin. yana NodeListni biz arrayga Array.from() methodi orqali konvertatsiya qilishimiz mumkin. lekin bazi eski brauserlar yuqoridagi ikki methodni qullab quvatlamaydi oddiy til bilan aytganda bu brauserlar orqali bu methodlarni ishlata olmaysiz lekin bu degani ummuan iloji yuq degani emas bu methodlar urniga biz Array.prototype.forEach() methodidan foydalanib siklga sola olamiz

Xususiyatlari

length() NodeListdagi elementlar soni.

va bir nechta methodlari bor

2 ELEMENTLARGA CONTENT JOYLASH (innierHTML, textContent, innertText)

3 ELAMENTLARGA STYLE YOZISH(CSSStyleDeecloration)

let wrapper = document.querySelectorAll('wrapper')
wrapper[0].style.cssText="background:green; padding:40px;"

4 ELEMENTLAR ATRIBUTELAR (getAttribute, setAttribute, hasAttribute)

5 ELEMENT ClassList va uni method lari (.add(), .remove(), .toogle(), .contains())

6 EVENTS (MOUSE, KEYBOARD, DOCUMENT)

7 LOCAL STORAGE-> localStorage, SessionStorage, Cookie va ularni methodlari.setItem(), .getItem(), .RemoveItem(), .clear() )

8 JSON-> va uni methodlari JSON.Stringify(obj) (yani object to JSON ) ,

JSON.parse(JSON) (yani JSON to object)

9 DYNAMIC ELEMENTS -> creatreElement(<HtmlElement>), append(), .prepend(), .after(), .before()

10 EVANT DELEGATION ->