JavaScript HTML DOM هدایت

با HTML DOM، شما می‌توانید از روابط گره برای جستجو در درخت گره‌ها استفاده کنید

نوید DOM

بر اساس استاندارد HTML DOM W3C، همه چیز در سند HTML به عنوان گره در نظر گرفته می‌شوند:

  • کل سند گره‌ای از نوع document است
  • هر عنصر HTML گره‌ای از نوع element است
  • متن داخل عناصر HTML گره‌ای از نوع text است
  • هر属性 HTML گره‌ای از نوع attribute است
  • تمام نظرات گره‌های نظری هستند
درخت HTML DOM

با HTML DOM، همه گره‌های درخت گره‌ها از طریق JavaScript قابل دسترسی هستند

می‌توان گره‌های جدید ایجاد کرد و همه گره‌ها را ویرایش و حذف کرد

روابط گره

گره‌های درخت گره‌ها با یکدیگر روابط سلسله مراتبی دارند

  • واژگان (والد، فرزند و برادر، parent، child و sibling) برای توصیف این روابط استفاده می‌شوند
  • در درخت گره‌ها، گره بالایی به عنوان ریشه (گره ریشه) نامیده می‌شود
  • هر گره والد دارد، به جز ریشه (گره ریشه هیچ والد ندارد)
  • گره‌ها می‌توانند تعداد مشخصی از فرزند داشته باشند
  • برادر (برادر یا خواهر) به معنای گره‌هایی است که والد مشترک دارند.
<html>
   <head>
       <title>آموزش DOM</title>
   </head>
  <body>
       <h1>درس اول DOM</h1>
       <p>سلام دنیا!</p>
   </body>
</html>
درخت HTML DOM

از HTML بالا شما می‌توانید اطلاعات زیر را بخوانید:

  • <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">Hello!</p>
<script>
 document.getElementById("id02").innerHTML  = document.getElementById("id01").innerHTML;
</script>
</body>
</html>

سعی کنید خودتان امتحان کنید

مثال 2

<html>
<body>
<h1 id="id01">مستند اولین صفحه من</h1>
<p id="id02">Hello!</p>
<script>
 document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>
</body>
</html>

سعی کنید خودتان امتحان کنید

مثال 3

<html>
<body>
<h1 id="id01">مستند اولین صفحه من</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>
<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 نوع‌نمای name نام نقطه را مشخص می‌کند.

  • nodeName فقط خواندنی است.
  • nodeName نقطه‌ی عنصر برابر نام برچسب است.
  • nodeName نقطه‌ی ویژگی نام ویژگی است.
  • nodeName نقطه‌ی متن همیشه #text است.
  • nodeName نقطه‌ی مستند همیشه #document است.

مثال

<h1 id="id01">ایران‌نما اولین وب‌سایت من</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;
</script>

سعی کنید خودتان امتحان کنید

توجه:nodeName همیشه نام بزرگ‌ترین عنصر HTML را شامل می‌شود.

نوع‌نمای nodeValue

nodeValue نوع‌نمای value ارزش نقطه را مشخص می‌کند.

  • نوع‌نمای عنصر nodeValue undefined است.
  • نوع‌نمای متن nodeValue متن نوشتاری دارد.
  • نوع‌نمای nodeValue ارزش نقطه را دارد.

نوع‌نمای nodeType

نوع‌نمای nodeType نوع‌نمای nodeType نوع نقطه را برمی‌گرداند.نوع‌نمای nodeType فقط خواندنی است.

مثال

<h1 id="id01">ایران‌نما اولین وب‌سایت من</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType;
</script>

سعی کنید خودتان امتحان کنید

مهم‌ترین ویژگی nodeType است:

نوید نوع مثال
ELEMENT_NODE 1 <h1 class="heading">W3School</h1>
ATTRIBUTE_NODE 2 class = "heading" (منسوخ شده)
TEXT_NODE 3 W3School
COMMENT_NODE 8 <!-- این یک نظریه است -->
DOCUMENT_NODE 9 مستند HTML خود (پدر <html>)
DOCUMENT_TYPE_NODE 10 <!DOCTYPE html>

Type 2 در HTML DOM منسوخ شده است. در XML DOM منسوخ نشده است.