جسٹ سکریپت ایچ تی ایم ال ڈوم ناویگیشن

通过 HTML DOM，您能够使用节点关系来导航节点树。

ڈوم نیود

根据 W3C HTML DOM 标准，HTML 文档中的所有事物都是节点：

  • 整个文档是文档节点
  • 每个 HTML 元素是元素节点
  • HTML 元素内的文本是文本节点
  • 每个 HTML 属性是属性节点
  • تمام اشارتی جملے اشارتی نوکلیئر ہیں
DOM ہائیبرن تھر

HTML DOM کے ساتھ، نوکلیئر درخت میں کسی بھی نوکلیئر کو JavaScript کے ذریعے دستیاب کیا جاسکتا ہے

نوکلیئر قائم کر سکتا ہے، ساری نوکلیئر کو تبدیل اور حذف بھی کرسکتا ہے

نوکلیئر تعلقات

نوکلیئر درخت میں، نوکلیئر ایک دوسرے کے درمیان کچھ درجہ بندی کا تعلق رکھتا ہے

  • 术语 (والد، بچہ اور بندو، parent، child اور sibling) یہ روابط کا تعریف کرنے کے لئے استعمال کی جاتی ہیں
  • نوکلیئر درخت میں، اعلیٰ نوکلیئر کو رینک بند کہا جاتا ہے (رینک بند نوکلیئر کو کوئی والد نہیں ہوتا ہے)
  • ہر نوکلیئر کو والد نوکلیئر ہوتا ہے، مگر رینک بند (رینک بند نوکلیئر کو کوئی والد نہیں ہوتا ہے)
  • نوکلیئر کچھ تعداد کا بچہ رکھ سکتا ہے
  • بندو (برادر یا بہن) یہ وسیلے کو کا رکھتا ہے جو ایک ہی والد کا حامل ہیں
<html>
   <head>
       <title>DOM تعلیم</title>
   </head>
  <body>
       <h1>DOM پہلا درس</h1>
       <p>مرا عالم!</p>
   </body>
</html>
DOM ہائیبرن تھر

علیکم، اس سے آپ ساری معلومات پڑھ سکتے ہیں:

  • html یہ رینک بند نیوکلیئر ہے
  • html کو کوئی والد نہیں ہے
  • html یہ head اور body کا والد ہے
  • head یہ html کا پہلا وسیلہ ہے
  • <body> <html> کا آخری بچہ ہے

بھی:

  • <head> ایک بچہ ہے: <title>
  • <title> ایک بچہ (متن نکالا جاسکتا ہے): "DOM تعلیم"
  • <body> دو بچے ہیں: <h1> اور <p>
  • <h1> ایک بچہ ہے: "DOM پہلا درس"
  • <p> ایک بچہ ہے: "Hello world!"
  • <h1> اور <p> بھائی بھتیجے نیٹ ہیں

نیٹ کے درمیان سفر کرنا

جس طرح سے آپ JavaScript کے ذریعے نیٹ کے درمیان سفر کرسکتے ہیں:

  • parentNode
  • childNodes[nodenumber]
  • firstChild
  • lastChild
  • nextSibling
  • previousSibling

بچے اور نکالا جاسکتا ہے

DOM کا معاملات میں ایک عام غلط خیال کیا جاتا ہے کہ عنصر میں متن شامل ہوتا ہے.

مثال:

<title id="demo">DOM تعلیم</title>

عنصر نکالا جاسکتا ہے <title> نہیں شاملمتن.

یہ وہ متن کا نکالا جاسکتا ہے جس کا مراد "DOM تعلیم" ہےمتن کا نکالا جاسکتا ہے.

متن کا نکالا جاسکتا ہے: innerHTML خاصیت کے ذریعے پوچھا جاسکتا ہے:

var myTitle = document.getElementById("demo").innerHTML;

innerHTML کی خاصیت کو پہلے بچے کی خاصیت کی طرح استعمال کیا جاسکتا ہے: nodeValue:

var myTitle = document.getElementById("demo").firstChild.nodeValue;

بھی اس طرح سے پہلے بچے کا نکالا جاسکتا ہے:

var myTitle = document.getElementById("demo").childNodes[0].nodeValue;

ایک، دو اور تین مثال میں <h1> عنصر کا متن اور اس کو کاپی کرکے <p> عنصر میں:

مثال 1

<html>
<body>
<h1 id="id01">میری پہلی ویب پیج</h1>
<p id="id02">مرحبا!</p>
<script>
 document.getElementById("id02").innerHTML  = document.getElementById("id01").innerHTML;
</script>
</body>
</html>

خود کا ایک تجربہ کریئے

مثال 2

<html>
<body>
<h1 id="id01">میری پہلی ویب پیج</h1>
<p id="id02">مرحبا!</p>
<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>
</body>
</html>

خود کا ایک تجربہ کریئے

مثال 3

<html>
<body>
<h1 id="id01">میری پہلی ویب پیج</h1>
<p id="id02">مرحبا!</p>
<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>
</body>
</html>

خود کا ایک تجربہ کریئے

InnerHTML

اس تعلیمی میں، ہم innerHTML پرائیویٹ ویجیٹ کا مواد واپس لایا جاتا ہے

بھی، اس کے علاوہ مذکورہ دیگر طریقوں کو سیکھنا بہت مفید ہوتا ہے تاکہ DOM کا درخت نمودار اور ناوداری کو سمجھا جاسکے۔

DOM کا ریشه نود

دو خاص پرائیویٹ ویجیٹات موجود ہیں جو پورا ڈکومنٹ تک رسائی فراہم کرتی ہیں:

  • document.body - ڈکومنٹ کا body
  • document.documentElement - پورا ڈکومنٹ

مثال

<html>
<body>
<p>Hello World!</p>
<div>
<p>DOM بہت مفید ہے!</p>
<p>اس مثال میں <b>document.body</b> پرائیویٹ ویجیٹ کا استعمال کیا جاتا ہے。</p>
</div>
<script>
 alert(document.body.innerHTML);
</script>
</body>
</html>

خود کا ایک تجربہ کریئے

مثال

<html>
<body>
<p>Hello World!</p>
<div>
<p>DOM بہت مفید ہے!</p>
<p>اس مثال میں <b>document.documentElement</b> پرائیویٹ ویجیٹ کا استعمال کیا جاتا ہے。</p>
</div>
<script>
alert(document.documentElement.innerHTML);
</script>
</body>
</html>

خود کا ایک تجربہ کریئے

nodeName پرائیویٹ ویجیٹ

nodeName پرائیویٹ ویجیٹ کا مراد کیا جاتا ہے

  • nodeName کوئی بھی پرائیویٹ ویجیٹ
  • پرائیویٹ ویجیٹ کا پرنود کا nodeName پرائیویٹ ویجیٹ کا بچولی مراد کیا جاتا ہے
  • پرائیویٹ ویجیٹ کا پرنود کا nodeName پرائیویٹ ویجیٹ کا نام
  • پرنود کا nodeName کوئی بھی #text
  • دکومنٹ پرائیویٹ ویجیٹ کا nodeName کوئی بھی #document

مثال

<h1 id="id01">میری پہلی وہائی پج</h1>
<p id="id02">مرحبا!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;
</script>

خود کا ایک تجربہ کریئے

نوٹ:nodeName کوئی بھی HTML پرائیویٹ ویجیٹ کا بچولی پرنود کا بچولی مراد کیا جاتا ہے

nodeValue پرائیویٹ ویجیٹ

nodeValue پرائیویٹ ویجیٹ کا مراد کیا جاتا ہے

  • پرائیویٹ ویجیٹ کا پرنود undefined ہوتا ہے
  • پرنود کا پرنود مراد کیا جاتا ہے
  • پرائیویٹ ویجیٹ کا پرنود پرنود کا مراد کیا جاتا ہے

nodeType پرائیویٹ ویجیٹ

nodeType پرائیویٹ ویجیٹ پرنود کا نوعیت درج کیا جاتا ہے۔nodeType فقط پڑھنا ہوتا ہے۔

مثال

<h1 id="id01">میری پہلی وہائی پج</h1>
<p id="id02">مرحبا!</p>
<script>
دوکومنٹgetElementById("id02").اینڈرجینرلایزر  = دوکومنٹgetElementById("id01").نوڈایپنائی جانے والی اپنائی جانے والی خصوصیت;
</script>

خود کا ایک تجربہ کریئے

بہترین nodeType اپنائی جانے والی خصوصیت یہ ہے:

نود کسی نوع کا مثال
ELEMENT_NODE 1 <h1 class="heading">و3 اسکول</h1>
ATTRIBUTE_NODE 2 class = "heading" ( مستغنم )
TEXT_NODE 3 و3 اسکول
COMMENT_NODE 8 <!-- یہ تعریف ہے -->
DOCUMENT_NODE 9 ایچ تی ایم ڈوکومنٹ خود (html کا والد)
DOCUMENT_TYPE_NODE 10 <!DOCTYPE html>

ٹائپ 2 ایچ تی ایم ڈوم میں مستغنم کیا گیا ہے، ایکس ایم لائن میں مستغنم نہیں ہے。