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


فهاد الدرس الخامس عشر من دورة javascript للمبتدئين غادي نكملوا الدورة ديالنا فغادي نشوفوا دائما كيفاش نتعاملو مع DOM فهاد الجزء غادي نشوفوا كيفاش نزيدو des styles ل les tags ديالنا باستعمال javascript.


1- كيفاش نغير ل couleur ديال tag ب javascript

فباش نغير ل couleur ديال tag ب javascript عندي ل objet style فالمثال لي عندي كنسترجع ل h3 tag بل class title منبعد كنزيدلها ل couleur red لي هو لحمر بل propriété color ديال ل objet style الكود لي زدنا هو :

                                //index.html code
     <h3 class="title">DarijaCoding</h3>


//style.css

const h3 = document.querySelector('.title');
h3.style.color = 'red';
                            

2- كيفاش نغير ل couleur مجموعة ديال les tags ب javascript

فباش نغير ل couleur ديال مجموعة ديال les tags ب javascript كنخدم بل objet style كيف شفنا قبل فالمثال لي عندي كنسترجع les tags لي عندهم ل class title كيف قلنا قبل كنسترجعهم على شكل array فكنخدم بل index باش كنزيد لكل tag ل couleur لي بغيت الكود لي زدنا هو :

                                //index.html code

     <h3 class="title">DarijaCoding</h3>
     <h3 class="title">DarijaCoding</h3>
     <h3 class="title">DarijaCoding</h3>
     <h3 class="title">DarijaCoding</h3>

//style.css

const h3 = document.querySelectorAll('.title');
h3[0].style.color = 'red';
h3[1].style.color = 'blue';
h3[2].style.color = 'green';
h3[3].style.color = 'yellow';
                            

3- كيفاش نبدل المحتوى ديال tag ب javascript

فباش نغير ل contenu ديال tag ب javascript كنخدم بل propriété textContent لي كتمكن من تغيير texte فالمثال لي عندي كنسترجع ل h3 بل classe title لي عطيناها منبعد كنخدم ب textContent لي كتمكني من تغيير texte ل DCoding الكود لي زدت :

                                //index.html code
     <h3 class="title">DarijaCoding</h3>


//style.css

const h3 = document.querySelector('.title');
h3.textContent = 'DCoding';
                            

4- كيفاش ن créer un élément html ب javascript

فباش ن créer un élément html عندي ل méthode createElement لي كتمكني باش ندير هادشي فالمثال لي عندنا كنزيد واحد div ف index.html عطيتها id main-div منبعد ف javascript كنسترجعها وكن créer h3 ب createElement منبعد كنزيدلو class css لي هي title منبعد كنزيدلو texte لي هو Darija Coding منبعد كنزيدو ل div ب appendChild الكود لي زدت هو :

                                    //index.html code 

 <div class="text-center" id="main-div"></div>

//main.js code

const div = document.getElementById('main-div');
const h3 = document.createElement('h3');
h3.className = 'title';
h3.appendChild(document.createTextNode('Darija Coding'));
div.appendChild(h3);

//style.css

.title{
	color: orangered;
	font-size: 20px;
	text-transform: uppercase;
	text-align: center;
}
.text-center{
	text-align: center;
}
                                

5- كيفاش ن remplacer tag ب tag ب javascript

فباش ن remplacer un élément html عندي ل méthode replaceChild فالمثال لي عندي احتفظت بنفس الكود السابق فقط زدت élément خور سميتو newH3 عطيتو texte DCoding منبعد كنخدم ب replaceChild باش كن remplacer h3 ب newH3 ف div الكود لي زدت هو :

                                    //index.html code 

 <div class="text-center" id="main-div"></div>

//main.js code

const div = document.getElementById('main-div');
const h3 = document.createElement('h3');
h3.className = 'title';
h3.appendChild(document.createTextNode('Darija Coding'));
div.appendChild(h3);
const newH3 = document.createElement('h3');
newH3.className = 'title';
newH3.appendChild(document.createTextNode('DCoding'));
div.replaceChild(newH3,h3);



//style.css

.title{
	color: orangered;
	font-size: 20px;
	text-transform: uppercase;
	text-align: center;
}
.text-center{
	text-align: center;
}