كيفية التعامل مع DOM في Vanilla JavaScript

إذاً لقد تعلمت المتغيرات وهياكل التحديد والحلقات. حان الوقت الآن للتعرف على معالجة DOM والبدء في تنفيذ بعض مشاريع JavaScript الرائعة.

في هذا البرنامج التعليمي ، سوف نتعلم كيفية التعامل مع DOM باستخدام Vanilla JavaScript. بدون مزيد من اللغط ، دعنا نقفز إليه مباشرة.

1. أول الأشياء أولا

قبل أن نتعمق في الترميز ، دعنا نتعلم ما هو Dom حقًا:

نموذج كائن المستند (DOM) هو واجهة برمجة لمستندات HTML و XML. إنه يمثل الصفحة بحيث يمكن للبرامج تغيير بنية المستند ونمطه ومحتواه. يمثل DOM المستند كعقد وكائنات. بهذه الطريقة ، يمكن للغات البرمجة الاتصال بالصفحة. مصدر

بشكل أساسي ، عندما يقوم المستعرض بتحميل صفحة ، فإنه يقوم بإنشاء نموذج كائن لتلك الصفحة ويطبعها على الشاشة. يتم تمثيل نموذج الكائن في هيكل بيانات الشجرة ، وكل عقدة عبارة عن كائن بخصائص وطرق ، والعقدة العليا هي كائن المستند.

يمكن استخدام لغة برمجة للوصول إلى نموذج الكائن هذا وتعديله ، ويسمى هذا الإجراء معالجة DOM. وسنفعل ذلك باستخدام JavaScript لأن JS رائع.

2. البرنامج التعليمي الفعلي

بالنسبة إلى البرنامج التعليمي ، سنحتاج إلى ملفين ، أحدهما index.html ، والآخر manipulation.js.

  DOM Manipulation 

DOM manipulation

Tutorial

Sibling

Medium Tutorial

Out of the div

لدينا هنا ملف HTML الخاص بنا ، وكما ترى لدينا div بمعرف القسمة. داخل هذا العنصر لدينا عنصر h1 ، وفي نفس السطر ، ستفهم سبب وجود عنصرين p وعلامة الإغلاق div. أخيرًا لدينا عنصر ap مع فئة من النص.

2.1. الوصول إلى العناصر

يمكننا إما الوصول إلى عنصر واحد أو عدة عناصر.

2.1.1. الوصول إلى عنصر واحد

للوصول إلى عنصر واحد ، سننظر في طريقتين: getElementByID و querySelector.

// the method below selects the element with the id ofheadlet id = document.getElementById('head');
// the code below selects the first p element inside the first divlet q = document.querySelector('div p');
/* Extra code */// this changes the color to redid.style.color = 'red';// give a font size of 30pxq.style.fontSize = '30px';

وصلنا الآن إلى عنصرين ، العنصر h1 بمعرف الرأس والعنصر p الأول داخل div.

getElementById كما يأخذ حجة على الهوية، و querySelector يأخذ كوسيطة محدد CSS وإرجاع العنصر الأول الذي يطابق محدد. كما ترى ، قمت بتعيين نتيجة الطرق إلى متغيرات ، ثم أضفت بعض التصميم في النهاية.

2.1.2. الوصول إلى عناصر متعددة

عند الوصول إلى عناصر متعددة ، يتم إرجاع قائمة العقد. انها ليست مصفوفة لكنها تعمل مثل واحد. حتى تتمكن من المرور عبرها واستخدام خاصية length للحصول على حجم قائمة العقد. إذا كنت ترغب في الحصول على عنصر معين ، يمكنك إما استخدام تدوين المصفوفة أو طريقة العنصر. سوف تراهم في الكود.

للوصول إلى عناصر متعددة ، سنستخدم ثلاث طرق: getElementsByClassName و getElementsByTagName و querySelectorAll.

// gets every element with the class of textlet className = document.getElementsByClassName('text');
// prints the node listconsole.log(className);
/* prints the third element from the node list using array notation */console.log(className[2]);
/* prints the third element from the node list using the item function */console.log(className.item(2));
let tagName = document.getElementsByTagName('p');let selector = document.querySelectorAll('div p');

يبدو أن الشفرة تشرح نفسها بنفسها ، لكنني سأشرحها على أي حال لأنني رجل لطيف. :)

أولاً ، نستخدم getElementsByClassName الذي يأخذ اسم فئة كوسيطة. تقوم بإرجاع قائمة العقدة مع كل عنصر يحتوي على نص كفئة. ثم نقوم بطباعة قائمة العقدة على وحدة التحكم. ونحن أيضا طباعة العنصر الثالث من القائمة باستخدام تدوين مجموعة و طريقة البند .

ثانيًا ، نختار كل عنصر p باستخدام طريقة getElementsByTagName التي تأخذ اسم العلامة كوسيطة وتعيد قائمة العقدة لهذا العنصر.

أخيرًا ، نستخدم طريقة querySelectorAll ، التي تأخذ محدد CSS كوسيطة. في هذه الحالة ، تأخذ div p لذلك ستعيد قائمة العقدة بعناصر p داخل div.

ونتيجة لممارسة الممارسة، وطباعة جميع العناصر من اسم العلامة و محدد قائمة عقدة ومعرفة حجمها.

2.2. عبور DOM

لقد وجدنا حتى الآن طريقة للوصول إلى عناصر محددة. ماذا لو أردنا الوصول إلى عنصر بجوار عنصر قمنا بالوصول إليه بالفعل ، أو الوصول إلى العقدة الأصلية لعنصر تم الوصول إليه مسبقًا؟ الخصائص firstChild و lastChild و parentNode و nextSibling و previousSibling يمكنها إنجاز هذه المهمة لنا.

يتم استخدام firstChild للحصول على أول عنصر فرعي للعقدة. lastChild ، كما خمنت ، يحصل على العنصر الفرعي الأخير في العقدة. الوالد عقدة هيتستخدم للوصول إلى عقدة أصل لعنصر. nextSibling يحصل لنا العنصر بجوار العنصر الوصول إليها بالفعل، و previousSibling يحصل لنا العنصر السابق إلى العنصر الوصول إليها بالفعل.

// gets first child of the element with the id of divisionlet fChild = document.getElementById('division').firstChild;console.log(fChild);
// gets the last element from element with the id of divisionlet lChild = document.querySelector('#division').lastChild;
// gets the parent node of the element with the id divisionlet parent = document.querySElector('#division').parentNode;console.log(parent);
// selects the element with the id of middlelet middle = document.getElementById('middle');// prints ond the console the next sibling of middleconsole.log(middle.nextSibling);

يحصل الكود أعلاه أولاً على أول عنصر طفل من العنصر مع معرف القسمة ثم يطبعه على وحدة التحكم. ثم يحصل على العنصر lastChild من نفس العنصر بمعرف القسمة. ثم تحصل على العقدة الأصلية للعنصر بمعرف القسمة وتطبعها على وحدة التحكم. وأخيرا، فإنه يختار العنصر مع معرف المتوسطة ويطبع لها nextSibling العقدة.

تعامل معظم المتصفحات المسافات البيضاء بين العناصر كعقد نصية ، مما يجعل هذه الخصائص تعمل بشكل مختلف في المتصفحات المختلفة.

2.3 الحصول على محتوى العنصر وتحديثه

2.3.1. إعداد المحتوى النصي والحصول عليه

يمكننا الحصول على محتوى نصي للعناصر أو تعيينه. لتحقيق هذه المهمة ، سنستخدم خاصيتين: nodeValue و textContent .

يتم استخدام nodeValue لتعيين محتوى نصي لعقدة نصية أو الحصول عليها. يستخدم textContent لتعيين أو الحصول على نص عنصر محتوي.

// get text with nodeValuelet nodeValue = document.getElementById('middle').firstChild.nodeValue;console.log(nodeValue);
// set text with nodeValuedocument.getElementById('middle').firstChild.nodeValue = "nodeValue text";
// get text with textContentlet textContent = document.querySelectorAll('.text')[1].textContent;console.log(textContent);
// set text with textContentdocument.querySelectorAll('.text')[1].textContent = 'new textContent set';

هل لاحظت الفرق بين nodeValue و textContent ؟

If you look carefully at the code above, you will see that for us to get or set the text with nodeValue, we first had to select the text node. First, we got the element with the middle id, then we got its firstChild which is the text node, then we got the nodeValue which returned the word Tutorial.

Now with textContent, there is no need to select the text node, we just got the element and then we got its textContent, either to set and get the text.

2.3.2. Adding and Removing HTML content

You can add and remove HTML content in the DOM. For that, we are going to look at three methods and one property.

Let’s start with the innerHTML property because it is the easiest way of adding and removing HTML content. innerHTML can either be used to get or set HTML content. But be careful when using innerHTML to set HTML content, because it removes the HTML content that is inside the element and adds the new one.

document.getElementById('division').innerHTML =`
      
  • Angular
  • Vue
  • React
`;

If you run the code, you will notice that everything else in the div with the id of division will disappear, and the list will be added.

We can use the methods: createElement(), createTextNode(), and appendChild() to solve this problem.

createElement is used to create a new HTML element. creatTextNode used to create a text node, and appendChild is used to append a new element into a parent element.

//first we create a new p element using the creatElementlet newElement = document.createElement('p');/* then we create a new text node and append the text node to the element created*/let text = document.createTextNode('Text Added!');newElement.appendChild(text);
/* then we append the new element with the text node into the div with the id division.*/document.getElementById('division').appendChild(newElement);

There is also a method called removeChild used to remove HTML elements.

// first we get the element we want to removelet toBeRemoved = document.getElementById('head');// then we get the parent node, using the parentNOde propertylet parent = toBeRemoved.parentNode;/* then we use the removeChild method, with the element to be removed as a parameter.*/parent.removeChild(toBeRemoved);

So first we get the element that we want to remove, and then we get its parent node. Then we called the method removeChild to remove the element.

2.4. Attribute node

Now we know how to handle elements, so let’s learn how to handle the attributes of these elements. There are some methods like GetAttribute, setAttribute, hasAttribute, removeAttribute, and some properties like className and id.

getAttribute as its name may suggest, it is used to get an attribute. Like the class name, the id name, the href of a link or any other HTML attribute.

setAttribute is used to set a new attribute to an element. It takes two arguments, first the attribute and second the name of the attribute.

hasAttribute used to check if an attribute exists, takes an attribute as an argument.

removeAttribute used to remove an attribute, it takes an attribute as an argument.

Id this property is used to set or get the id of an element.

ClassName is used to set or get the class of an element.

// selects the first divlet d = document.querySelector('div');// checks if it has an id attribute, returns true/falseconsole.log('checks id: '+d.hasAttribute('id'));// set a new class attributed.setAttribute('class','newClass');// returns the class nameconsole.log(d.className);

I know I am a good dude, but that code is just self-explanatory.

Conclusion

That is it! We have learned so many concepts, but there is more to learn about DOM manipulation. What we have covered here gives you a good foundation.

Go ahead and practice, and create something new to cement this new knowledge.

Good day, good coding.