DOM

JavaScriptda DOM (Document Object Model) veb-sahifalar bilan o’zaro aloqada bo’lish uchun muhim vositadir. DOM HTML yoki XML hujjatlarini obyektlar daraxti ko’rinishida tasvirlaydi. Har bir element hujjatning br qismi sifatida ifodalanadi, bu esa JavaS…


This content originally appeared on DEV Community and was authored by BekmuhammadDev

JavaScriptda DOM (Document Object Model) veb-sahifalar bilan o'zaro aloqada bo'lish uchun muhim vositadir. DOM HTML yoki XML hujjatlarini obyektlar daraxti ko'rinishida tasvirlaydi. Har bir element hujjatning br qismi sifatida ifodalanadi, bu esa JavaScript yordamida hujjat tuzilishini o'zgartirish, qo'shish yoki olib tashlash imkonini beradi.

Image description

DOMGA kirish:

// ID orqali elementni olish
let elementById = document.getElementById("myElement");

// Klass orqali elementlarni olish
let elementsByClassName = document.getElementsByClassName("myClass");

// Teg orqali elementlarni olish
let elementsByTagName = document.getElementsByTagName("div");

// CSS selektor orqali elementni olish
let elementByQuerySelector = document.querySelector(".myClass");

// CSS selektor orqali barcha mos elementlarni olish
let elementsByQuerySelectorAll = document.querySelectorAll(".myClass");


// Yangi element yaratish
let newElement = document.createElement("div");
newElement.textContent = "Yangi element";

// Yaratilgan elementni mavjud elementga qo'shish
document.body.appendChild(newElement);

// Mavjud elementni olib tashlash
let elementToRemove = document.getElementById("oldElement");
document.body.removeChild(elementToRemove);

// Mavjud elementni almashtirish
let newElementToReplace = document.createElement("span");
newElementToReplace.textContent = "Yangi element";
let oldElement = document.getElementById("oldElement");
document.body.replaceChild(newElementToReplace, oldElement);

DOM bilan ishlash JavaScriptda veb-sahifalarni dinamik tarzda o'zgartirishga, foydalanuvchi bilan o'zaro aloqada bo'lishga imkon beradi va bu veb-dasturlashning muhim qismidir.

  • HTMLCollection
  • NodeList

HTMLCollection va NodeList JavaScriptda DOM elementlarini guruhlash va ularga kirish uchun ishlatiladigan ikkita asosiy turdir. Ular ko'p jihatdan o'xshash bo'lsa-da, ularning muhim farqlari mavjud.

HTMLCollection

HTMLCollection HTML elementlarining yig'indisini ifodalaydi.HTMLCollection dinamik bo'lib, DOMdagi o'zgarishlarni avtomatik ravishda aks ettiradi. Ya'ni, agar siz DOMga yangi element qo'shsangiz yoki olib tashlasangiz, HTMLCollection avtomatik ravishda yangilanadi. HTMLCollection indeks yoki elementning id yoki name atributi orqali elementlarga kirishga imkon beradi.HTMLCollection o'ziga xos metodlarga ega emas, ammo massivlarga o'xshash length xususiyati va indekslash yordamida elementlarga kirish imkoniyatini beradi.

HTMLCollection(methods)

  • getElementById(id): ID bo'yicha elementni qaytaradi.
  • getElementsByClassName(className): Berilgan klassga ega bo'lgan barcha elementlarni qaytaradi.
  • getElementsByTagName(tagName): Berilgan tegga ega bo'lgan barcha elementlarni qaytaradi.
  • querySelector(cssSelector): CSS selektoriga mos keladigan birinchi elementni qaytaradi.
  • querySelectorAll(cssSelector): CSS selektoriga mos keladigan barcha elementlarni qaytaradi.

NodeList

NodeList DOMdagi barcha nodelarning yig'indisini ifodalaydi. Bu nodelar elementlar, matn nodelari va boshqalar bo'lishi mumkin. NodeList statik yoki jonli bo'lishi mumkin. querySelectorAll() metodi statik NodeListni qaytaradi, bu NodeList yaratilgandan keyin DOMdagi o'zgarishlarni aks ettirmaydi. Boshqa tomondan, childNodes dinamik NodeListni qaytaradi.NodeList indeks orqali elementlarga kirishga imkon beradi.NodeListda forEach() metodi mavjud, bu metod yordamida elementlar bo'yicha iteratsiya qilish osonroq.

NodeList(methods)

  • document.querySelectorAll()
  • Node.childNodes
  • document.getElementsByTagNameNS()

Image description

Bu farqlarni bilish, DOM bilan ishlashda to'g'ri tanlov qilishga yordam beradi. HTMLCollection asosan faqat HTML elementlar bilan ishlash uchun mo'ljallangan, NodeList esa ko'proq universal va har qanday DOM tugunlari bilan ishlash uchun qulay.


This content originally appeared on DEV Community and was authored by BekmuhammadDev


Print Share Comment Cite Upload Translate Updates
APA

BekmuhammadDev | Sciencx (2024-06-21T13:30:38+00:00) DOM. Retrieved from https://www.scien.cx/2024/06/21/dom-2/

MLA
" » DOM." BekmuhammadDev | Sciencx - Friday June 21, 2024, https://www.scien.cx/2024/06/21/dom-2/
HARVARD
BekmuhammadDev | Sciencx Friday June 21, 2024 » DOM., viewed ,<https://www.scien.cx/2024/06/21/dom-2/>
VANCOUVER
BekmuhammadDev | Sciencx - » DOM. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/06/21/dom-2/
CHICAGO
" » DOM." BekmuhammadDev | Sciencx - Accessed . https://www.scien.cx/2024/06/21/dom-2/
IEEE
" » DOM." BekmuhammadDev | Sciencx [Online]. Available: https://www.scien.cx/2024/06/21/dom-2/. [Accessed: ]
rf:citation
» DOM | BekmuhammadDev | Sciencx | https://www.scien.cx/2024/06/21/dom-2/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts