Когато изучавате език за програмиране, трябва да усвоите много информация. Като студент по софтуерно инженерство научих изобилие от фундаментални концепции на езика Javascript за кратък период от време. В този блог ще обобщя една от основните концепции, които научих. Една от концепциите, които ще обсъдя, е известна като DOM (Document Object Model), което е представяне на дървовидна структура на всеки HTML документ, който се състои от възли. По-конкретно ще обсъдя използването на DOM манипулиране в рамките на езика за програмиране Javascript.
ДЪРВОТО НА HTML DOM ОТ ВЪЗЛИ:
Възлите в рамките на DOM се състоят от елементи, атрибути и текст.
Документ: Основният възел на HTML документа
Елементи: Дефинира целия HTML документ (‹body› ‹/body ,‹div› ‹/div› ‹table›‹/table›
Атрибути: Характеристики на html елементи, напр.( href, ID, Class)
Текст:Текстово съдържание, което се вмъква в документа.
Един специфичен начин за манипулиране на DOM е използването на CRUD операции. CRUD позволява на програмистите да маневрират през дървовидната структура, за да Ccreate, Rad, Update и D елетни елементи. Нека започнем с основите на това как да манулираме DOM с операция CRUD.
СЪЗДАВАНЕ:
Операцията document.createElement позволява на програмистите да създадат html таг, който вече е достъпен в нашия html документ.
Елементът div вече е създаден в нашия HTML документ..
ЧЕТЕТЕ:
Четенето позволява на потребителите да търсят и извличат елементи. За да получим достъп до стойността, първо трябва да отидем до елемента в нашия документ. Например: Ако имаме елемент и се опитваме да извлечем стойността на възела, който е вътре в него, можем да го направим в следните стъпки:
Първата стъпка е да създадетепроменливаза всеки елемент. const variableName
Следващия. вземете този конкретен елемент. В този случай ние извличаме този елемент по неговия id, откъдето произлиза .getElementById(‘ime на id елемента’).
Накрая можете да се оттеглите и да прочетете стойността на текстовия възел.
АКТУАЛИЗАЦИЯ:
Актуализацията ни позволява да променяме атрибутите на нашите променливи. Например, ако искаме да променим цвета на фона на документа, можем да манипулираме това свойство в нашия javascript документ, вместо да го променяме във файла CSS (Cascade Style Sheet).
Например: body.style-background-color = redпроменя нашия фонов цвят от бял на червен.
ИЗТРИВАНЕ
И накрая, операцията за изтриване ни позволява да изтрием всеки от нашите текущи елементи или възли от нашия документ. Например, ако искам напълно да изтрия своя div елемент, мога да извикам метода .remove() на променливата.
var element = document.getElementsById(‘myDiv’)
elem.remove();
Като цяло завършихме стъпките за манипулиране на DOM чрез използването на CRUD операции. Има толкова много различни начини за форматиране на нашия синтаксис и различни методи за използване в Javasript.
