Latest web development tutorials

HTML DOM الملاحة

من خلال DOM HTML، كنت قادرا على استخدام العقدة في العلاقة شجرة عقدة الملاحة.

HTML DOM قائمة عقدة

getElementsByTagName () إرجاع طريقة قائمة العقد. قائمة العقدة هي مجموعة عقدة.

الوثيقة التالية اختيار رمز كل <p> والعقدة:

أمثلة

var x=document.getElementsByTagName("p");

ويمكن الوصول إليها عن طريق التسمية التالية. للوصول إلى الثانية <ص>، يمكنك كتابة:

y=x[1];

محاولة »

ملاحظة:

تحت عنوان يبدأ عند 0.

HTML DOM قائمة عقدة طول

وتحدد السمة طول عدد العقد في قائمة عقدة.

يمكنك استخدام الخاصية طول لائحة عقدة حلقة:

أمثلة

x=document.getElementsByTagName("p");

for (i=0;i<x.length;i++)
{
document.write(x[i].innerHTML);
document.write("<br />");
}

محاولة »

أمثلة التحليل:

  • الحصول على جميع <p> وعقدة عنصر
  • وقيمة الانتاج من كل عنصر <p> ومن عقدة النص

العلاقة عقدة الملاحة

يمكنك استخدام ثلاث صفات العقدة: parentNode، firstChild وlastChild، انتقل من خلال هيكل الوثيقة.

النظر في جزء HTML التالية:

<html>
<body>

<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates node relationships.</p>
</div>

</body>
</html>
  • أول عنصر <ص> هو الطفل الأول ل<body> عنصر (firstChild)
  • <div> العنصر هو آخر عنصر تابع <body> عنصر (lastChild)
  • <الهيئة> العنصر هو أول <p> وعنصر و<div> العقدة الأصل العنصر (parentNode)

الملكية firstChild يمكن استخدامها للوصول إلى عناصر النص:

أمثلة

<html>
<body>

<p id="intro">Hello World!</p>

<script>
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>

</body>
</html>

محاولة »

عقدة الجذر DOM

هناك نوعان من سمات خاصة، يمكنك الوصول إلى جميع الوثائق:

  • document.documentElement - جميع الوثائق
  • document.body - نص المستند

أمثلة

<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>

محاولة »

childNodes وnodeValue

بالإضافة إلى الخاصية innerHTML، يمكنك أيضا استخدام childNodes والممتلكات nodeValue للحصول على محتوى العنصر.

التعليمة البرمجية التالية يحصل على معرف = "مقدمة" لل<p> والقيم العنصر:

أمثلة

<html>
<body>

<p id="intro">Hello World!</p>

<script>
var txt=document.getElementById("intro").childNodes[0].nodeValue;
document.write(txt);
</script>

</body>
</html>

محاولة »

في المثال أعلاه، getElementById هو وسيلة، في حين childNodes وnodeValue والممتلكات.

في هذا البرنامج التعليمي، وسوف نستخدم الخاصية innerHTML. ومع ذلك، فإن طريقة التعلم أعلاه يساعد على التنقل في هيكل شجرة دوم والتفاهم.