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


فهاد الدرس السادس عشر من دورة javascript للمبتدئين غادي نكملوا الدورة ديالنا غادي نشوفوا كيفاش نمسحوا des éléments من DOM وايضا غادي نشوفوا كيفاش نزيدوا des classes , des attributs وكيفاش نحيدوهم.


1- كيفاش نمسح un élément من dom ب javascript

فباش نمسح واحد ل élément من DOM عندي ل méthode removeChild فالمثال لي عندنا كاين liste des fruits ف index.html كنسترجعها بل id ديالها ف main.js  منبعد كنسترجع les li كاملين منبعد كنخدم ب removeChild وكنعطيها ل li لي عبارة عن array مع ل index لي بغيت نمسح هنا عطيناها 0 غادي تحيدنا ل li لأولى الكود لي زدنا هو :

                                //index.html code

 <ul id="listItem">
          <li>Bananas</li>
          <li>Oranges</li>
          <li>Apple</li>
          <li>Lemon</li>
 </ul>

//main.js code

const ul = document.querySelector('#listItem');
const li = document.querySelectorAll('li');
ul.removeChild(li[0]);
console.log(ul);
                            

2- كيفاش نزيد class ل un élément ف DOM

فباش نزيد une classe ل élément عندي ل méthode add  فهنا المثال لي عندنا كنزيد h3 كنعطيه id title منبعد كنسترجعو فل main.js منبعد كنسترجع les classes لي عندو ب classList و كنزيدلو la classe title بل méthode add الكود لي زدنا هو :

                                //index.html

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

//main.js

const h3 = document.getElementById('title');
h3.classList.add('title');

//style.css

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

3- كيفاش نحيد class ل un élément ف DOM

فباش نحيد une classe ل élément عندي ل méthode remove فهنا المثال لي عندنا كنزيد h3 كنعطيه classe و id title منبعد كنسترجعو فل main.js منبعد كنسترجع les classes لي عندو ب classList و كنحيدلو la classe title بل méthode remove الكود لي زدنا هو :

                                //index.html

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

//main.js

const h3 = document.getElementById('title');
h3.classList.remove('title');

//style.css

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

4- كيفاش نسترجع attribut ديال un élément ف dom

فباش نسترجع un attribut ديال élément عندي ل méthode getAttribute فهنا فالمثال لي عندنا كنزيد lien ف index.html منبعد كنسترجعوا بل id ديالو ف main.js منبعد كنخدم ب getAttribute باش كنسترجع القيمة لي عندو ف href لي هي google.com وكنعرضها ب console.log الكود لي زدنا هو :

                                    //index.html

 <a href="www.google.com" id="link">google</a>

//main.js

const link = document.getElementById('link');
console.log(link.getAttribute('href'));
                                

5- كيفاش نعدل قيمة attribut ديال un élément ف dom

فباش نعدل قيمة un attribut ديال un élément عندي ل méthode setAttribute فهنا فالمثال لي عندنا كنزيد lien ف index.html منبعد كنسترجعوا بل id ديالو ف main.js منبعد كنخدم ب setAttribute باش كنعدل القيمة لي عندو ف href لي هي google.com وكنردها facebook.com وكنعرضها ب console.log الكود لي زدنا هو :

                                    //index.html

 <a href="www.google.com" id="link">google</a>

//main.js

const link = document.getElementById('link');
link.setAttribute('href', 'http://facebook.com')
console.log(link.getAttribute('href'));