Frontend Road 1 : DOM

Сайн байцгаана уу. Та бүхэнд энэ өдрийн мэнд хүргэе.

Энэхүү нийтлэл нь Frontend хөгжүүлэлтийн талаарх цуврал нийтлэлийн эхний дугаар юм. Энэ цувралаар дамжуулан өөрийн судалж, сурч мэдэж буй зүйлсээ та бүхэнтэй хуваалцахаар шийдлээ.

Миний хувьд Frontend чиглэлээр одоогоор анхан шатны мэдлэгтэй бөгөөд HTML, CSS, JavaScript-ийн суурь ойлголтуудаас цаашгүй билээ . Цаашид суралцах явцдаа ойлгож мэдсэн зүйлсээ энгийн, ойлгомжтой байдлаар хүргэхийг хичээх болноо .
Зиа ингээд ажилдаа орох уу даа ! .

DOM буюу Document Object Model нь Javascript болон HTML хоорондын орчуулагч гэж явдаг . Илүү тодорхой тайлбарлавал хамгийн анх хуудас уншихад browser тухайн хуудасны tree model-ийг үүсгэдэг . Javascript мэдээж бидний HTML кодыг текст хэлбэрээр уншиж чадахгүй тийм болохоор DOM буюу тухайн хуудас дээр байх бүх зүйлийн бүтэцлэгдсэн нэг мод шиг хэлбэртэй Model-оор хардаг байх нь ээ .

Мод шиг бүтэц ?

DOM таны хуудсыг логик модон дүрслэлээр дүрсэлдэг . Хуудас дээр байх HTML-ийн бүх tag-уудыг бүгд тухайн бүтцийн нэг Node болдог .

Бид нарт яагаад DOM хэрэгтэй вэ ?

DOM-гүй бол Javascript хэзээ ч HTML-ийг удирдаж чадахгүй . Зүгээр л нэг math болон логикийн функцийг агуулсан программчлалын хэл байх байсан байх. DOM нь Javascript-д маш их хэмжээний хүчийг өгдөг ба тэдгээрийг дурьдвал :

• Content өөрчлөх

Анхаарах зүйл: JavaScript-ээр стиль өөрчлөхдөө CSS шиг background-color биш, харин backgroundColor (camelCase) гэж бичдэгийг анхаараарай. Учир нь JS-д хасах тэмдэг нь математикийн үйлдэл гэж уншигддаг.

• Style өөрчлөх

• Хэрэглэгчийн үйлдэлд хариу үйлдэл үзүүлэх

• Шинээр элемент нэмэх болон устсгах

"Та энэ кодуудыг өөрийн компьютер дээрээ туршиж үзээд, ямар нэг асуудал гарвал сэтгэгдэл хэсэгт асуугаарай!"

Бидний үзсэн эдгээр дөрвөн үйлдэл бол ердөө л мөсөн уулын орой юм. DOM-ийг ойлгосноор та зөвхөн код бичих биш, харин хэрэглэгчтэй харилцах "амьд" орчныг бүтээн байгуулж байна гэсэн үг.

Анх суралцахад document.querySelector эсвэл addEventListener гэх мэт урт нэрнүүд бага зэрэг төвөгтэй санагдаж болох ч, гар чинь дасаад ирэх үед та вэб хуудсан дээрх юуг ч өөрчилж чадах шидэт саваатай боллоо л гэсэн үг.

Frontend Road цувралын дараагийн дугаараар бид вэб хуудсаа хэрхэн "Интернэттэй" холбох буюу Fetch API-ийн талаар үзэх болно. Тэр болтол түр баяртай!

Боловсролыг Инженерчлэв.