القائمة الرئيسية

الصفحات

معالجة JavaScript DOM بالتفصيل || JavaScript DOM Manipulation in Details

 معالجة JavaScript DOM بالتفصيل || JavaScript DOM Manipulation in Details


للحصول على فهم قوي لبنية صفحة HTML. دعونا نضيف رمزًا أساسيًا
To have a solid understanding of the structure of an HTML page. Let’s add a basic code
<!DOCTYPE html>
<html lang="en">
<head>
<title>DOM Manipulation</title>
  </head>
<body>
<h1>DOM Manipulation</h1>
<p>This a simple DOM manipulation example</p>
<p>More information about <a  href="https://developer.mozilla.org/en-US/docs/Glossary/DOM">DOM API</a></p>
</body>
</html>
سيقوم المستعرض بتشغيل كود HTML هذا وبناء تمثيل لهيكله ، ثم يستخدم هذا التمثيل لعرض العناصر على الشاشة
يمكن لمبرمج المستخدم التفاعل مع بنية الصفحة (بمساعدة الكود) ، أو تعديل أو إزالة عناصر من الصفحة. كل ذلك ممكن باستخدام لغة برمجة JavaScript.

لعمل تمثيل لبنية HTML في رؤوسنا ، فكر في شجرة ، حيث قد تشير كل عقدة إلى عقد أخرى ، (الأطفال) والتي بدورها قد يكون لها أطفالها
The browser will run that HTML code and build a representation of its structure, then use that representation to display the elements to the screen
A user programmer can interact with the structure of the page, (with the help of code), modify or remove elements from the page. All of which is possible with the JavaScript programming language.

To make a representation of the HTML structure in our heads, think of a tree, where each node may refer to other nodes, (children) which in turn may have their children

يرمز DOM إلى نموذج كائن المستند. إنه تمثيل لتسلسل هرمي لصفحة الويب للكائنات حيث يتوافق كل كائن مع عقدة في شجرة الصفحة. كائنات DOM لها خصائص وطرق يمكن التلاعب بها باستخدام JavaScript.
The DOM stands for Document Object Model. It is a representation of a web page hierarchy of objects where each object corresponds to a node in the page tree. DOM objects have properties and methods that can be manipulated with JavaScript.
تمثيل الشجرة الأساسي لنموذج الكود المقدم أعلاه
Basic tree representation of the sample code provided above

الوصول إلى DOM مع متغير المستند
هذا المتغير هو كائن وله خصائص الرأس والجسم التي تسمح بالوصول إلى عنصري <head> و <body> للصفحة ، على التوالي.
Accessing the DOM with document variable
This variable is an object and has head et body properties that allow access to the <head> and <body> elements of the page, respectively.

const root = document; 
// root holds the root object
console.log(root);
const head = document.head; 
// head holds the head object
console.log(head);
const body = document.body;
//body holds the body object
console.log(body);

قد يكون الوصول إلى عقدة DOM واحدة تلو الأخرى مهمة شاقة للقيام بها. على سبيل المثال ، إذا كنا نريد عقدة في منتصف بنية HTML ، فسيتغير الترتيب في التعديل المستقبلي. لن يكون في التعليمات البرمجية الخاصة بك السلوك المتوقع ، لتصحيح هذا الموقف. يمنحك JavaScript أيضًا الوصول إلى العديد من روابط الراحة الإضافية
Accessing DOM node one by one can be an overwhelming task to do. For instance, if we want a node in the middle of the HTML structure, the order will change in future modification. Your code will not have the expected behavior, to remedy that situation. JavaScript also gives you access to several additional convenience links.
الوصول إلى العنصر من خلال اسم علامته.
Access the element by its tag’s name.
لذلك إذا أردنا الحصول على سمة href للرابط في هذا المستند ، فلا نريد أن نقول شيئًا مثل "احصل على الطفل الثاني من الطفل السادس من نص المستند". سيكون من الأفضل أن نقول "احصل على الرابط الأول في المستند". ويمكننا.
So if we want to get the href attribute of the link in that document, we don’t want to say something like “Get the second child of the sixth child of the document body”. It’d be better if we could say “Get the first link in the document”. And we can.

const link = document.body.getElementsByTagName("a")[0];
console.log(link.href);

باستخدام طريقة document.getElementsByTagName () ، التي تجمع كل العناصر التي تحمل اسم العلامة المحدد والتي تكون سلالة (فرعية مباشرة أو غير مباشرة) لتلك العقدة وإعادتها ككائن يشبه المصفوفة.


2. الوصول إلى العنصر من خلال معرفته.


للعثور على عقدة فردية معينة ، يمكنك منحها سمة معرف واستخدام document.getElementById () بدلاً من ذلك.



Using the document.getElementsByTagName() method, which collects all elements with the given tag name that are descendants (direct or indirect children) of that node and returns them as an array-like object.

2. Access the element by its id.

To find a specific single node, you can give it an id attribute and use document.getElementById() instead.



  const para = document.getElementById("para");
  console.log(para.textContent);                        

3. تغيير الوثيقة.


ما يجعل بناء صفحة ويب ديناميكية مثيرًا للاهتمام هو أنه يمكن تغيير بنية بيانات DOM حسب الرغبة ، ويمكننا إضافة أو إزالة كل شيء تقريبًا. تتوفر للعقد طريقة الإزالة لإزالتها من العقدة الأصلية الحالية. لإضافة عقدة فرعية إلى عنصر يمكننا استخدام appenChild () ، والذي يضعه في نهاية قائمة الأطفال أو insertBefore (a ، b) ، والذي يُدرج العقدة المعطاة كأول وسيط قبل الثاني.

4. قم بإنشاء عنصر عقدة جديد.


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

// create a new div 
const newDiv = document.createElement("div");

// add text to that div
newDiv.textContent = 'new created element';

/* we can add the new created div at the end of the document or         
before a specific element */
document.body.innerHTML.appendChild(newDiv);
// with that line the new div is added at end of the root document



3. Changing the document

What makes building dynamic web page interesting is the DOM data structure can be changed at will, we can add or remove almost everything. Nodes have available the remove method to remove them from their current parent node. To add a child node to an element we can use the appenChild(), which puts it at the end of the list of children or insertBefore(a, b), which inserts the node given as the first argument before the second one.

4. Create a new node element.
To create element nodes, you can use the method. This method takes a tag name and returns a new empty node of the given type.

// create a new div 
const newDiv = document.createElement("div");

// add text to that div
newDiv.textContent = 'new created element';

/* we can add the new created div at the end of the document or         
before a specific element */
document.body.innerHTML.appendChild(newDiv);
// with that line the new div is added at end of the root document


5. قم بتغيير تصميم العنصر.

يمكن أن تتلاعب شفرة جافا سكريبت مباشرة بنمط العنصر من خلال خاصية العنصر. تحتوي هذه الخاصية على كائن له خصائص كل خصائص النمط الممكنة. قيم هذه الخصائص هي سلاسل ، يمكننا كتابتها لتغيير جانب معين من نمط العنصر. تحتوي بعض أسماء خصائص النمط على واصلات ، مثل مجموعة الخطوط. نظرًا لأن أسماء الخصائص هذه محرجة للعمل في JavaScript (يجب أن تقول style ["font-family"]) ، فإن أسماء الخصائص في كائن النمط لمثل هذه الخصائص تتم إزالتها والواصلات التي تليها الأحرف الكبيرة (style. خط العائلة).

5. Change the styling of the element.

JavaScript code can directly manipulate the style of an element through the element’s property. This property holds an object that has properties for all possible style properties. The values of these properties are strings, which we can write to change a particular aspect of the element’s style. Some style property names contain hyphens, such as font-family. Because such property names are awkward to work within JavaScript (you’d have to say style["font-family"]), the property names in the style object for such properties have their hyphens removed and the letters after them capitalized (style.fontFamily).

// change the color of the h1 and its align in the page
const title = document.getElementsByTagName('h1')[0];
title.style.color = 'blue';
title.style.textAlign = 'center';

خاتمة

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

Conclusion


The DOM is organized like a tree, in which elements are arranged hierarchically according to the structure of the document. The objects representing elements have properties such as parentNode and childNodes, which can be used to navigate through this tree



هل اعجبك الموضوع :

تعليقات