جافا سكريبت HTML DOM التنقل
باستخدام HTML DOM ، يمكنك التنقل في شجرة العقدة باستخدام علاقات العقد.
عقد DOM
وفقًا لمعيار W3C HTML DOM ، فإن كل شيء في مستند HTML عبارة عن عقدة:
- المستند بأكمله عبارة عن عقدة مستند
- كل عنصر HTML هو عقدة عنصر
- النص الموجود داخل عناصر HTML عبارة عن عقد نصية
- كل سمة من سمات HTML هي عقدة سمة (مهملة)
- كل التعليقات هي تعليق العقد
باستخدام HTML DOM ، يمكن الوصول إلى جميع العقد في شجرة العقدة بواسطة JavaScript.
يمكن إنشاء عقد جديدة ، ويمكن تعديل جميع العقد أو حذفها.
علاقات العقدة
العقد في شجرة العقد لها علاقة هرمية مع بعضها البعض.
تُستخدم مصطلحات الوالد والطفل والأخوة لوصف العلاقات.
- في شجرة العقدة ، تسمى العقدة العلوية الجذر (أو العقدة الجذرية)
- كل عقدة لها أصل واحد ، باستثناء الجذر (الذي ليس له أصل)
- يمكن أن تحتوي العقدة على عدد من الأطفال
- الأشقاء (الأخوة أو الأخوات) هم عقد مع نفس الوالد
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>
من HTML أعلاه يمكنك قراءة:
<html>هي عقدة الجذر<html>ليس له أبوين<html>هو والد<head>و<body><head>هو الطفل الأول من<html><body>هو آخر طفل من<html>
و:
<head>لديها طفل واحد:<title><title>لديه طفل واحد (عقدة نصية): "دروس DOM"<body>وله طفلان:<h1>و<p><h1>لديه طفل واحد: "DOM الدرس الأول"<p>لديها طفل واحد: "أهلاً بالعالم!"<h1>وهم<p>أشقاء
التنقل بين العقد
يمكنك استخدام خصائص العقدة التالية للتنقل بين العقد باستخدام JavaScript:
parentNodechildNodes[nodenumber]firstChildlastChildnextSiblingpreviousSibling
العقد الفرعية وقيم العقدة
الخطأ الشائع في معالجة DOM هو توقع احتواء عقدة عنصر على نص.
مثال:
<title
id="demo">DOM Tutorial</title>
عقدة العنصر
<title>(في المثال أعلاه) لا تحتوي على نص.
يحتوي على عقدة نصية بالقيمة "DOM Tutorial".
يمكن الوصول إلى قيمة العقدة النصية بواسطة
innerHTMLخاصية العقدة:
myTitle = document.getElementById("demo").innerHTML;
الوصول إلى خاصية innerHTML هو نفس الوصول إلى nodeValue
الطفل الأول:
myTitle = document.getElementById("demo").firstChild.nodeValue;
يمكن أيضًا الوصول إلى الطفل الأول على النحو التالي:
myTitle = document.getElementById("demo").childNodes[0].nodeValue;
كل الأمثلة (3) التالية تسترجع نص <h1>عنصر وتنسخه في <p>عنصر:
مثال
<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML
= document.getElementById("id01").innerHTML;
</script>
</body>
</html>
مثال
<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>
</body>
</html>
مثال
<html>
<body>
<h1 id="id01">My First Page</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>
</body>
</html>
InnerHTML
في هذا البرنامج التعليمي ، نستخدم خاصية innerHTML لاسترداد محتوى عنصر HTML.
ومع ذلك ، فإن تعلم الطرق الأخرى أعلاه مفيد لفهم بنية الشجرة والتنقل في DOM.
عقد DOM الجذر
هناك نوعان من الخصائص الخاصة التي تسمح بالوصول إلى المستند الكامل:
document.body- نص الوثيقةdocument.documentElement- الوثيقة كاملة
مثال
<html>
<body>
<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.body</p>
<p
id="demo"></p>
<script>
document.getElementById("demo").innerHTML
= document.body.innerHTML;
</script>
</body>
</html>
مثال
<html>
<body>
<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.documentElement</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
document.documentElement.innerHTML;
</script>
</body>
</html>
خاصية nodeName
nodeNameتحدد الخاصية اسم العقدة .
- nodeName للقراءة فقط
- nodeName لعقدة عنصر هو نفس اسم العلامة
- nodeName لعقدة السمة هو اسم السمة
- nodeName للعقدة النصية هو دائمًا #text
- nodeName لعقدة المستند هو دائمًا #document
مثال
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML
= document.getElementById("id01").nodeName;
</script>
ملاحظة: nodeName يحتوي دائمًا على اسم علامة الأحرف الكبيرة لعنصر HTML.
خاصية nodeValue
nodeValueتحدد الخاصية قيمة العقدة .
- nodeValue لعقد العنصر هي
null - nodeValue لعقد النص هو النص نفسه
- nodeValue لعقد السمات هي قيمة السمة
خاصية nodeType
nodeTypeالخاصية للقراءة فقط . تقوم بإرجاع نوع العقدة.
مثال
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML
= document.getElementById("id01").nodeType;
</script>
أهم خصائص nodeType هي:
| Node | Type | Example |
|---|---|---|
| ELEMENT_NODE | 1 | <h1 class="heading">W3Schools</h1> |
| ATTRIBUTE_NODE | 2 | class = "heading" (deprecated) |
| TEXT_NODE | 3 | W3Schools |
| COMMENT_NODE | 8 | <!-- This is a comment --> |
| DOCUMENT_NODE | 9 | The HTML document itself (the parent of <html>) |
| DOCUMENT_TYPE_NODE | 10 | <!Doctype html> |
تم إهمال النوع 2 في HTML DOM (ولكنه يعمل). لم يتم إهماله في XML DOM.