دورة javascript للمبتدئين الدرس الرابع عشر


فهاد الدرس الرابع عشر من دورة javascript للمبتدئين غادي نشوفوا كيفاش نتعاملو مع DOM ف DOM هو Document Object Model لي هو document html بكل بساطة فغادي نشوفوا كيفاش نسترجعوا des éléments html وكيفاش نعدلوا المحتوى و style ديالهم باستعمال javascript.


1- كيفاش نسترجع un élément بل id

فكل tag html يمكن تاخد classe أو id هادشي شفناه فالجزء الخاص ب css يلا معقلتيش رجع شوفو فباش نسترجع un élément بل id ديالو فعندنا فالمثال ف index.html واحد h3 لي عطيناه id title ف main.js كنسترجعوا بل id باستعمال document.getEementById ولي كتاخد ل id لي هو title من بعد كن afficher texte لي كاين ف title ب console.log الكود لي زدنا هو : 

                                //index.html code

 <h3 id="title">Darija Coding</h3>

//main.js code

const h3 = document.getElementById('title');
console.log(h3.textContent);
                            

2- كيفاش نسترجع un élément بل classe

فباش نسترجع un élément بل classe ديالو فعندنا فالمثال ف index.html نفس h3 لي عطيناه class title ف main.js كنسترجعوا بل class باستعمال document.getEementByClassName  ولي كتاخد ل class لي هي title فالفرق بينها وبين ل id هو أنها كترجع array فباش ن afficher texte ديال ل classe لأولى كن زيد [0] لي كتعني استرجعلي ل élément لأول من بعد كن afficher texte لي كاين ف title ب console.log الكود لي زدنا هو : 

                                //index.html code

    <h3 class="title">Darija Coding</h3>

//main.js code

const h3 = document.getElementsByClassName('title')[0];
console.log(h3.innerHTML);
                            

3- كيفاش نسترجع un élément ب tag

فباش نسترجع un élément ب tag ديالو فعندنا فالمثال ف index.html نفس h3 لي شفنا قبل  ف main.js كنسترجعوا ب tag لي هي h3 باستعمال document.getEementByTagName  ولي بحال ل class كترجع array فباش ن afficher texte ديال tag لأولى كن زيد [0] لي كتعني استرجعلي tag لأول من بعد كن afficher texte لي كاين ف h3 ب console.log الكود لي زدنا هو : 

                                //index.html code

    <h3 class="title">Darija Coding</h3>

//main.js code

const h3 = document.getElementsByTagName('h3')[0];
console.log(h3.innerHTML);
                            

4- كيفاش نسترجع un élément ب querySelector

ل méthode querySelector  كترجع أول élément كيساوي لقيمة لي كنبحثوا عليها فالمثال لي عندنا كنسترجع ل h3 لي زدنا بل class ديالو لي هي title فكنخدم بل méthode querySelector لي كتاخد ل class لي كنحددها بهاد الطريقة title. ويلا بغيت ل id كنكتب title# فسبق شفنا هادشي فالجزء الخاص ب css الكود لي زدنا هو :

                                    //index.html code

 <h3 class="title">Darija Coding</h3>

//style.css code

const h3 = document.querySelector('.title');
console.log(h3.innerHTML);
                                

5- كيفاش نسترجع un élément ب querySelectorAll

ل méthode querySelectorAll  كترجع كل élément كيساوي لقيمة لي كنبحثوا عليها فالمثال لي عندنا كنسترجع les éléments كاملين لي عندهم class title ولي زدنا ف index.html منبعد كنسترجعهم ولي كيكونوا على شكل array كنخدم ب forEach باش كن afficher texte ديال كل élément الكود لي زدنا هو :

                                    //index.html code

    <h3 class="title">Darija Coding</h3>
    <h4 class="title">2018</h3>

//main.js

const tags = document.querySelectorAll('.title');
tags.forEach(e => {
    console.log(e.innerHTML);
});