Asosiy narsalar

Elementlarni yaratish

Yangi HTML elementini yaratish uchun siz document.createElement()usuldan foydalanishingiz kerak.

const el = hujjat . createElement ( "div" ) ;   

Usul element uchun teg nomi (avtomatik ravishda kichik harfga aylantiriladi) va ixtiyoriy parametrlar obyekti sifatida satrni oladi, bu faqat Web komponentlari uchun ahamiyatga ega.

Nom maydonlari

document.createElement()Bu faqat HTML elementlari uchun ishlashini bilishingiz kerak . Bu boshqa nom maydonidagi elementlar (asosan SVG -ones) to'g'ri ishlamasligini anglatadi.

Ushbu muammoni hal qilish uchun siz document.createElementNS()ko'rsatilgan nom maydoni URI bilan element yaratadigan usuldan foydalanishingiz kerak.

const svg = hujjat . createElementNS ( "<http://www.w3.org/2000/svg>" , "svg" ) ;    

Harakatlar

Endi yangi yaratilgan elementlar bilan ishlashda ularni DOM-ga qo'shish siz kutgandek ishlaydi. Ammo DOM ichida allaqachon mavjud bo'lgan elementlar bilan ishlashda narsalar o'zgaradi, masalan

/* HTML:
...
<tana>
	<div id="app"></div>
</body>
...
*/ const el = hujjat . querySelector ( "ilova" ) ;
   

Endi, biz bir soniya ichida bunday element haqida gaplashadigan usullardan birini qo'llaganingizda, u oddiygina yangi joyga ko'chirilmaydi , balki DOMga qo'shilmaydi.

Ilgari qaysi ota-onadan yoki ierarxiyada qanchalik chuqur bo'lishidan qat'i nazar, element o'chiriladi va tanlangan joyga yana qo'shiladi.

Qo'shish

AppendChild

DOM-ga element qo'shishning eng oddiy, eng mashhur usuli bu, albatta appendChild().

// ... hujjat . tanasi . appendChild ( el ) ;

Taqdim etilgan element ota-onaning bolalar ro'yxatining oxiriga qo'shiladi.

Qo'shish/old qo'shish

Endi appendChild()u uzoq vaqtdan beri mavjud va deyarli barcha ishlatiladigan brauzerlar tomonidan qo'llab-quvvatlanadi. Ammo, agar siz funksionallik uchun ba'zi yordamlardan voz kechishga tayyor bo'lsangiz , sizni yangiroq append()va prepend()usullar qiziqtirishi mumkin .

// ... hujjat . tanasi . ilova ( el ) ; hujjat . tanasi . old qo'shish ( el2 ) ; hujjat . tanasi . qo'shish ( "Matn" ) ; /* HTML:




<tana>
	<div></div> <- el2
	<div></div> <- el
	Matn
</body>
*/

append()elementni ota-onaning bolalar ro'yxatining oxirigaprepend() qo'shib, uni boshiga qo'shadi .

Ikkalasi ham append()DOM -ga to'g'ridan-to'g'ri satrlarniprepend() kiritish qobiliyatiga ega . Taqqoslash uchun, bilan bir xil effektga erishish uchun siz aniq yangisini yaratishingiz kerak bo'ladiappendChild()Matn tugun:

hujjat . appendChild ( hujjat . createTextNode ( "Matn" ) ) ;

Bunga qo'shimcha ravishda, ikkalasi ham bir nechta argumentlarni qabul qilishi append()va bir vaqtning o'zida bir nechta tugunlarni kiritishi mumkin.prepend()

// ... hujjat . tanasi . qo'shish ( el , el2 ) ; hujjat . tanasi . appendChild ( el ) ; hujjat . tanasi . appendChild ( el2 ) ;
 

Albatta, bu yaxshiliklarning barchasi qimmatga tushadi. append()va prepend()ba'zi eski brauzerlarni (masalan, IE yo'q) qo'llab-quvvatlamaydi va (ba'zi oddiy) polyfills ni talab qiladi .

InnerHTML

Ma'lumki, innerHTMLbu usul emas, balki xususiyatdir. Siz uni o'qishingiz yoki HTML qatoriga o'rnatishingiz mumkin, u HTML sifatida tahlil qilinadi va DOMga joylashtiriladi.

hujjat . tanasi . innerHTML = "<div>Matn</div>" ;  

Bu juda oson va tushunarli yechim kabi ko'rinadi, ammo u bir qator muhim kamchiliklarga ega:

• Mulkga kirishdan qaytarilgan qiymat innerHTMLsiz avval oʻrnatgan qiymat bilan bir xil boʻlishi shart emas, chunki u element tarkibiga asoslangan va dinamik tarzda yaratilgan .
• Sozlama innerHTMLota-onaning oldingi barcha kontentini olib tashlaydi.
• innerHTMLHTML satrini tahlil qilish va oldingi barcha tugunlarni olib tashlash zarurati tufayli ishlash uchun yomon (ko'p hollarda). Biroq, agar barcha bolalarni olib tashlash sizning maqsadingiz bo'lsa, unda innerHTML = ""xavfsiz tikish.
• ning nazoratsiz o'zgarishi xavfsizlik muammolariga innerHTMLolib kelishi mumkin . bilan yaratilganda bloklar bajarilmasa ham, ehtimol zararli JS kodini blokdan foydalanmasdan bajarishning boshqa usullari mavjud (masalan, inline voqealar tinglovchilari)<script>innerHTML<script>

Kiritish

Qo'shish usullari bilan solishtirganda, elementingizni qaerga joylashtirmoqchi ekanligingizni ko'proq boshqarish imkonini beradi.

InsertBefore

insertBefore()usuli ko'rsatilganidan oldin elementni kiritish imkonini beradi, masalan

// ... hujjat . tanasi . ilova ( el ) ; hujjat . tanasi . insertBefore ( el2 , el ) ;

 

Birinchi parametr kiritilishi kerak bo'lgan element, ikkinchisi esa mos yozuvlar sifatida ishlatiladi. Yodda tutingki, ma'lumotnoma taqdim etilishi kerak bo'lsa null-da, ota-onaning bolalar ro'yxatining oxiriga elementni oddiygina qo'shish uchun u ga teng bo'lishi mumkin.

Hech qanday "insertAfter"insertBefore() usuli yoki shunga o'xshash narsa bo'lmasa-da, siz usulni nextElementSiblingmos yozuvlar tugunining xususiyati bilan birlashtirish orqali bunday ta'sirga erishishingiz mumkin .

// ... const insertAfter = ( ota , bola , mos yozuvlar ) = > { ota . insertBefore ( bola , mos yozuvlar . nextElementSibling ) ; } ;
       
   


hujjat . tanasi . ilova ( el ) ; insertAfter ( hujjat . tana , el2 , el ) ;
  

// ... hujjat . tanasi . insertAdjacentElement ( el , "afterbegin" )
 

// ... hujjat . tanasi . ilova ( el ) ; el . keyin ( el2 , el3 ) ;

 

// ... hujjat . tanasi . ilova ( el ) ; hujjat . tanasi . replaceChild ( el2 , el ) ;

 

JavaScript