DEV Community

BekmuhammadDev
BekmuhammadDev

Posted on

2 1 1 1 1

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 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");

Enter fullscreen mode Exit fullscreen mode
// 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);

Enter fullscreen mode Exit fullscreen mode

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.

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)

Image of AssemblyAI tool

Challenge Submission: SpeechCraft - AI-Powered Speech Analysis for Better Communication

SpeechCraft is an advanced real-time speech analytics platform that transforms spoken words into actionable insights. Using cutting-edge AI technology from AssemblyAI, it provides instant transcription while analyzing multiple dimensions of speech performance.

Read full post

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay