HTML DOM Navigation در JavaScript

با استفاده از HTML DOM، می توانید با استفاده از روابط گره حرکت کنید.

گره های DOM

با توجه به استاندارد W3C HTML DOM، همه چیز در یک سند HTML یک گره است:

  • کل سند یک گره سند است
  • هر عنصر HTML یک گره عنصری است
  • متن داخل عناصر HTML گره های متنی است
  • هر خصیصه HTML یک گره attribute است (غیرقابل قبول)
  • همه ها گره هستند

html tree node

با HTML DOM، تمام گره ها در درخت گره می توانند توسط جاوا اسکریپت دسترسی پیدا کنند.

گره های جدید را می توان ایجاد کرد و تمام گره ها را می توان تغییر داد یا حذف کرد.

روابط گره

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

اصطلاحات پدر و مادر، فرزند برای توصیف روابط استفاده می شود.

 

  • در یک درخت گره، گره بالا ریشه (یا گره ریشه)
  • هر گره دقیقا یک والد است، به جز ریشه (که هیچ پدر و مادر ندارد)
  • یک گره می تواند تعدادی از کودکان داشته باشد
  • خواهر و برادر (برادر یا خواهر) گره با پدر و مادر همان است
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>

navigate tree node

از بالای HTML شما می توانید بخوانید:

  • <html> گره ریشه است
  • <html> هیچ پدر و مادر ندارد
  • <html> پدر و مادر <head> و <body> است
  • <head> اولین فرزند <html> است
  • <body> آخرین فرزند <html> است

و:

  • <head> یک فرزند دارد: <title>
  • <title> دارای یک کودک (یک گره متنی): "DOM Tutorial"
  • <body> دو فرزند دارد: <h1> و <p>
  • <h1> یک فرزند دارد: "DOM Lesson One"
  • <p> یک فرزند دارد: "سلام دنیا!"
  • <h1> و <p> خواهر و برادر هستند

حرکت بین گره ها

شما می توانید از ویژگی های گره زیر برای حرکت بین گره ها با جاوا اسکریپت استفاده کنید:

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

گره های کودک و مقادیر گره

یک خطای رایج در پردازش DOM این است که انتظار داشته باشید یک گره عنصر حاوی متن باشد.

<title id="demo">DOM Tutorial</title>

گره عنصر <title> (در مثال بالا) شامل متن نیست.

این شامل یک گره متنی با مقدار "DOM Tutorial" است.

مقدار گره متنی می تواند توسط ویژگی internalHTML گره قابل دسترسی باشد:

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

دسترسی به خصوصیت innerHTML همانند دسترسی به nodeValue اول کودک است.

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

دسترسی به اولین فرزند نیز می تواند به این صورت انجام شود:

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

تمام مثال های زیر (3) متن یک عنصر <h1> را بازیابی می کند و آن را به عنصر <p> کپی می کند:

node
<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> 
مشاهده مثال

node
 <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> 
مشاهده مثال

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

<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

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

nodeName
 <h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;
</script> 
مشاهده مثال

ویژگی nodeValue

مقدار nodeValue مقدار گره را مشخص می کند.

  • nodeValue برای گره های عنصری تعریف نشده است
  •      nodeValue برای گره های متنی خود متن است
  •      nodeValue برای ویژگی گره ها مقدار مشخصه است

ویژگی nodeType

خصوصیات 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>

 

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

یادگیری JavaScript

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط