٧.٢ الوصول إلى العناصر¶
سنستخدم مستند HTML التالي في هذا الدرس:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Awesome boxes</title>
<style>
#boxes-container{
display: flex;
}
.box{
width: 10rem;
height: 10rem;
margin: 1rem;
}
#box-1{
background: black;
}
#box-2{
background: red;
}
#box-3{
background: green;
}
#box-4{
background: pink;
}
#box-5{
background: cyan;
}
#box-6{
background: orange;
}
</style>
</head>
<body>
<header>
<h1>Welcome to our awesome boxes website</h1>
<p>We have amazing boxes of different elegant colors</p>
</header>
<section id="boxes-container">
<div class="box" id="box-1"></div>
<div class="box" id="box-2"></div>
<div class="box" id="box-3"></div>
<div class="box" id="box-4"></div>
<div class="box" id="box-5"></div>
<div class="box" id="box-6"></div>
</section>
<script src="script.js"></script>
</body>
</html>
باستخدام id¶
التمرين 1: اطبع عنصر حاوية الصناديق. تلميح: استخدم document.getElementById("boxes-container").
let container = document.getElementById("boxes-container");
console.log(container);
النتيجة هي: <section id="boxes-container">
document.getElementById("id")
العامل document.getElementById() تُرجع أول عنصر يطابق معرّفه id القيمة المحدّدة.
التمرين 2: اطبع عنصر الصندوق الأول.
let box1 = document.getElementById("box-1");
console.log(box1);
النتيجة هي: <div id="box-1" class="box"></div>
التمرين 3: اطبع عنصر الصندوق الثاني.
let box2 = document.getElementById("box-2");
console.log(box2);
النتيجة هي: <div id="box-2" class="box"></div>
التمرين 4: غيّر لون خلفية الصندوق الرابع إلى DarkViolet. تلميح: استخدم element.style.backgroundColor="DarkViolet".
let box4 = document.getElementById("box-4");
box4.style.backgroundColor = "DarkViolet";
تغيّر لون خلفية الصندوق الرابع إلى DarkViolet.
التمرين 5: غيّر لون خلفية الصندوق السادس إلى Olive.
let box6 = document.getElementById("box-6");
box6.style.backgroundColor = "Olive";
تغيّر لون خلفية الصندوق السادس إلى olive.
التمرين 6: ما العنصر الأب للصندوق الخامس؟ تلميح: استخدم element.parentElement.
let box5 = document.getElementById("box-5");
let box5Parent = box5.parentElement;
console.log(box5Parent);
النتيجة هي: <section id="boxes-container">
التمرين 7: ما العنصر الأب للصندوق الثاني؟
let box2 = document.getElementById("box-2");
let box2Parent = box2.parentElement;
console.log(box2Parent);
النتيجة هي: <section id="boxes-container">
باستخدام اسم الصنف¶
التمرين 8: اجلب جميع الصناديق. تلميح: استخدم document.getElementsByClassName("box").
let boxes = document.getElementsByClassName("box");
console.log(boxes);
النتيجة هي: HTMLCollection { 0: div#box-1.box, 1: div#box-2.box, 2: div#box-3.box, 3: div#box-4.box, 4: div#box-5.box, 5: div#box-6.box, length: 6, … }
document.getElementsByClassName("class")
العامل document.getElementsByClassName() تُرجع HTMLCollection بالعناصر التي تحمل أسماء الأصناف المحدّدة.
المجموعة HTMLCollection
كائن شبيه بالمصفوفة يمثّل مجموعة عناصر HTML.
التمرين 9: ارجع إلى التمرين 8؛ حوّل HTMLCollection إلى مصفوفة عادية باستخدام Array.from(htmlCollection).
let boxes = document.getElementsByClassName("box");
let boxesArray = Array.from(boxes);
console.log(boxesArray);
النتيجة هي: Array(6) [ div#box-1.box, div#box-2.box, div#box-3.box, div#box-4.box, div#box-5.box, div#box-6.box ]
التمرين 10: ارجع إلى التمرين 9؛ اعرض عناصر boxesArray. تلميح: استخدم for...of.
let boxes = document.getElementsByClassName("box");
let boxesArray = Array.from(boxes);
for( let box of boxesArray){
console.log(box);
}
النتيجة كما يلي:
<div class="box" id="box-1">
<div class="box" id="box-2">
<div class="box" id="box-3">
<div class="box" id="box-4">
<div class="box" id="box-5">
<div class="box" id="box-6">
التمرين 11: ما أبناء حاوية الصناديق؟ تلميح: استخدم element.children
let container = document.getElementById("boxes-container");
let containerChildren = container.children;
console.log(containerChildren);
النتيجة هي: HTMLCollection { 0: div#box-1.box, 1: div#box-2.box, 2: div#box-3.box, 3: div#box-4.box, 4: div#box-5.box, 5: div#box-6.box,
التمرين 12: ارجع إلى التمرين 11؛ اعرض عناصر containerChildren.
let container = document.getElementById("boxes-container");
let containerChildren = container.children;
let containerChildrenArray = Array.from(containerChildren);
for(let el of containerChildrenArray){
console.log(el);
}
النتيجة كما يلي:
<div class="box" id="box-1">
<div class="box" id="box-2">
<div class="box" id="box-3">
<div class="box" id="box-4">
<div class="box" id="box-5">
<div class="box" id="box-6">
باستخدام اسم الوسم¶
التمرين 13: اجلب جميع عناصر div في المستند. تلميح: استخدم document.getElementsByTagName("div")
let divS = document.getElementsByTagName("div");
console.log(divS);
النتيجة هي: HTMLCollection { 0: div#box-1.box, 1: div#box-2.box, 2: div#box-3.box, 3: div#box-4.box, 4: div#box-5.box, 5: div#box-6.box,
document.getElementsByTagName("tag")
العامل document.getElementsByTagName() تُرجع HTMLCollection بالعناصر التي تحمل اسم الوسم المحدّد.
التمرين 14: ارجع إلى التمرين 13؛ اعرض عناصر divS .
let divS = document.getElementsByTagName("div");
let divSArray = Array.from(divS);
for(let el of divSArray){
console.log(el);
}
النتيجة كما يلي:
<div class="box" id="box-1">
<div class="box" id="box-2">
<div class="box" id="box-3">
<div class="box" id="box-4">
<div class="box" id="box-5">
<div class="box" id="box-6">
التمرين 15: اجلب جميع عناصر section .
let sections = document.getElementsByTagName("section");
console.log(sections);
النتيجة هي: HTMLCollection [section#boxes-container, boxes-container: section#boxes-container]
التمرين 16: ارجع إلى التمرين 15؛ اعرض أول عنصر في sections.
let sections = document.getElementsByTagName("section");
let sectionsArray = Array.from(sections);
let firstSection = sectionsArray[0];
console.log(firstSection);
النتيجة هي: <section id="boxes-container">…</section>
التمرين 17: اختصر شيفرة task 16 .
let sections = document.getElementsByTagName("section");
let firstSection = Array.from(sections)[0];
console.log(firstSection);
النتيجة هي: <section id="boxes-container">…</section>
التمرين 18: ارجع إلى التمرين 17؛ ما العناصر الأبناء لـ firstSection?
let sections = document.getElementsByTagName("section");
let firstSection = Array.from(sections)[0];
let firstSectionChildren = firstSection.children;
console.log(firstSectionChildren);
النتيجة هي: HTMLCollection(6) [div#box-1.box, div#box-2.box, div#box-3.box, div#box-4.box, div#box-5.box, div#box-6.box ....]
التمرين 19: اختصر شيفرة task 18 ، واعرض كل عنصر في firstSectionChildren سطر مستقل.
let sections = document.getElementsByTagName("section");
let firstSectionChildren = Array.from(sections)[0].children;
for(let el of firstSectionChildren){
console.log(el);
}
النتيجة كما يلي:
<div class="box" id="box-1">
<div class="box" id="box-2">
<div class="box" id="box-3">
<div class="box" id="box-4">
<div class="box" id="box-5">
<div class="box" id="box-6">
باستخدام querySelector¶
التمرين 20: اجلب الصندوق الأول في boxes-container. تلميح: استخدم document.querySelector("#boxes-container > #box-1").
let box1 = document.querySelector("#boxes-container > #box-1");
console.log(box1);
النتيجة هي: <div class="box" id="box-1"></div>
التمرين 21: اجلب الصندوق الثالث في boxes-container.
let box3 = document.querySelector("#boxes-container > #box-3");
console.log(box3);
النتيجة هي: <div class="box" id="box-3"></div>
التمرين 22: اجلب الصندوق الخامس في boxes-container.
let box5 = document.querySelector("#boxes-container > #box-5");
console.log(box5);
النتيجة هي: <div class="box" id="box-5"></div>
التمرين 23: اجلب الصندوق الثامن في boxes-container.
let box8 = document.querySelector("#boxes-container > #box-8");
console.log(box8);
النتيجة هي: null
querySelector
العامل document.querySelector("Selector") تُرجع أول عنصر يطابق محدّد CSS. وإذا لم يوجد تطابق، تُرجع null.
التمرين 24: اجلب h1 داخل header باستخدام querySelector.
let h1 = document.querySelector("header > h1");
console.log(h1);
النتيجة هي: <h1>Welcome to our awesome boxes website</h1>
التمرين 25: اجلب p في header باستخدام querySelector.
let p = document.querySelector("header > p");
console.log(p);
النتيجة هي: <p>We have amazing boxes of different elegant colors</p>
التمرين 26: أعد تنفيذ التمرين 25 دون استخدام querySelector.
let p = document.getElementsByTagName("header")[0].getElementsByTagName("p")[0];
console.log(p);
النتيجة هي: <p>We have amazing boxes of different elegant colors</p>
باستخدام querySelectorAll¶
التمرين 27: اجلب جميع عناصر divS في boxes-container باستخدام document.querySelectorAll("#boxes-container > div").
let divS = document.querySelectorAll("#boxes-container > div");
console.log(divS);
النتيجة هي: NodeList(6) [div#box-1.box, div#box-2.box, div#box-3.box, div#box-4.box, div#box-5.box, div#box-6.box]
querySelectorAll
العامل document.querySelectorAll("Selector") تُرجع NodeList بالعناصر المطابقة لمحدّدات CSS.
القائمة NodeList
مجموعة من عُقَد المستند.
التمرين 28: اجلب جميع عناصر .box في boxes-container باستخدام querySelectorAll
let boxes = document.querySelectorAll("#boxes-container > .box");
console.log(boxes);
النتيجة هي: NodeList(6) [div#box-1.box, div#box-2.box, div#box-3.box, div#box-4.box, div#box-5.box, div#box-6.box]
التمرين 29: اجلب جميع عناصر h1 داخل header باستخدام querySelectorAll.
let h1List = document.querySelectorAll("header h1");
console.log(h1List);
النتيجة هي: NodeList [h1]
التمرين 30: اجلب جميع عناصر p داخل header باستخدام querySelectorAll.
let pList = document.querySelectorAll("header p");
console.log(pList);
النتيجة هي: NodeList [p]