مع DOM HTML، يمكنك تصفح شجرة عقدة باستخدام العلاقات العقدة.
DOM العقد
وفقا لمعيار W3C HTML DOM، كل شيء في وثيقة HTML هو العقدة:
- الوثيقة بأكملها هي عقدة ثيقة
- كل عنصر HTML هو عقدة عنصر
- النص داخل عناصر HTML والنص العقد
- كل سمة HTML هي عقدة سمة
- جميع التعليقات هي العقد تعليق
مع DOM HTML، كل العقد في شجرة العقدة يمكن الوصول إليها عن طريق جافا سكريبت.
عقد جديدة يمكن أن تنشأ، وجميع العقد يمكن تعديلها أو حذفها.
العلاقات العقدة
العقد في شجرة عقدة لها علاقة هرمية لبعضها البعض.
يستخدم المصطلحان الوالدين والطفل، والأخوة لوصف العلاقات.
- في شجرة العقدة، وتسمى العقدة العليا الجذر (أو عقدة الجذر)
- كل عقدة لديه بالضبط والد واحد، باستثناء الجذر (التي لا يوجد لها أصل)
- عقدة يمكن أن يكون لها عدد من الأطفال
- الأخوة والأخوات (إخوة أو أخوات) هي العقد مع نفس الأم
<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> إخوة
التنقل بين العقد
يمكنك استخدام خصائص العقدة التالية للتنقل بين العقد مع جافا سكريبت:
- parentNode
- childNodes[ nodenumber ]
- firstChild
- lastChild
- nextSibling
- previousSibling
تحذير !
هناك خطأ شائع في معالجة DOM هو أن نتوقع عقدة عنصر لاحتواء النص.
في هذا المثال:<title> DOM دروس </title> ، العقدة العنصر <title> لا يحتوي على النص.وهو يحتوي علىعقدة النص مع القيمة "DOM تعليمي".
يمكن الوصول إلى قيمة عقدة النص العقدة innerHTML الممتلكات، أو nodeValue .
Child العقد والقيم عقدة
بالإضافة إلى innerHTML الممتلكات، ويمكنك أيضا استخدام childNodes و nodeValue خصائص للحصول على محتوى عنصر.
يجمع المثال التالي قيمة عقدة من <h1> عنصر ونسخه إلى <p> العنصر:
مثال
<html>
<body>
<h1 id="intro">My First Page</h1>
<p id="demo">Hello!</p>
<script>
var myText =
document.getElementById("intro").childNodes[0].nodeValue;
document.getElementById("demo").innerHTML =
myText;
</script>
</body>
</html> انها محاولة لنفسك » في المثال أعلاه، getElementById هو وسيلة، في حين childNodes و nodeValue والممتلكات.
في هذا البرنامج التعليمي ونحن نستخدم innerHTML الممتلكات. ومع ذلك، وتعلم طريقة سبق هو مفيد لفهم بنية شجرة والتنقل من DOM.
باستخدام firstChild الملكية هو نفسه باستخدام childNodes[0] :
مثال
<html>
<body>
<h1 id="intro">My First Page</h1>
<p id="demo">Hello World!</p>
<script>
myText = document.getElementById("intro").firstChild.nodeValue;
document.getElementById("demo").innerHTML = myText;
</script>
</body>
</html> انها محاولة لنفسك » DOM العقد الجذرية
هناك نوعان من الممتلكات الخاصة التي تسمح بالوصول إلى الوثيقة الكاملة:
- document.body - إن نص المستند
- document.documentElement - الوثيقة كاملة
مثال
<html>
<body>
<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates the <b>document.body</b> property.</p>
</div>
<script>
alert(document.body.innerHTML);
</script>
</body>
</html> انها محاولة لنفسك » مثال
<html>
<body>
<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates the <b>document.documentElement</b> property.</p>
</div>
<script>
alert(document.documentElement.innerHTML);
</script>
</body>
</html> انها محاولة لنفسك » و nodeName الملكية
و nodeName تحدد الخاصية اسم عقدة.
- nodeName للقراءة فقط
- nodeName من عقدة العنصر هو نفس اسم العلامة
- nodeName من عقدة السمة هو اسم السمة
- nodeName من عقدة النص هو دائما #text
- nodeName من عقدة ثيقة دائما #document
ملاحظة: nodeName يحتوي دائما العلامة الكبير اسم عنصر HTML.
و nodeValue الملكية
و nodeValue تحدد الخاصية قيمة عقدة.
- nodeValue عن العقد عنصر غير معرف
- nodeValue لعقد النص هو النص نفسه
- nodeValue لعقد السمة قيمة السمة
و nodeType الملكية
و nodeType الخاصية بإرجاع نوع العقدة. nodeType للقراءة فقط.
أنواع عقدة أهم هي:
| نوع العنصر | NodeType |
|---|---|
| Element | 1 |
| Attribute | 2 |
| Text | 3 |
| Comment | 8 |
| Document | 9 |