٪۴۰ تخفیف تابستانه شروع شد! بزرگترین حراج سال ما

به ما بپیوندید

آموزش پیمایش DOM

با استفاده از HTML DOM ، می توانید با استفاده از روابط گره ، درخت گره را مرور کنید. گره های DOM طبق استاندارد W3C HTML DOM ، همه موارد موجود در یک سند HTML یک گره است: کل سند…

محمد یوسفی

29 جولای 2021

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


گره های DOM

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

  • کل سند یک گره سند است
  • هر عنصر HTML یک گره عنصر است
  • متن درون عناصر HTML گره های متنی هستند
  • هر ویژگی HTML یک گره ویژگی است (منسوخ شده)
  • همه نظرات گره های نظر هستند

 

با استفاده از HTML DOM می توان به JavaScript به کلیه گره های موجود در درخت گره دسترسی پیدا کرد.

گره های جدید می توانند ایجاد شوند و همه گره ها می توانند اصلاح یا حذف شوند.


روابط گره

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

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

  • در یک درخت گره ، گره بالایی ریشه (یا گره ریشه) نامیده می شود
  • هر گره دقیقاً یک والد دارد ، به جز ریشه (که والد ندارد)
  • یک گره می تواند تعدادی فرزند داشته باشد
  • خواهر و برادرها (خواهر یا برادر) گره هایی با پدر و مادر یکسان هستند

 

<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 Lesson one”
  • <p> یک فرزند دارد: “سلام به جهان!”
  • <h1>و <p>خواهر و برادر هستند


پیمایش بین گره ها

برای پیمایش بین گره های دارای JavaScript می توانید از خصوصیات گره زیر استفاده کنید:

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

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

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

مثال:

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

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

این شامل یک گره متنی با مقدار “آموزش DOM” است.

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

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

دسترسی به خاصیت innerHTML همان دسترسی به nodeValue فرزند اول است:

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

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

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

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

مثال

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

<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.body</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = document.body.innerHTML;
</script>

</body>
</html>
<html>
<body>

<h2>JavaScript HTMLDOM</h2>
<p>Displaying document.documentElement</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = document.documentElement.innerHTML;
</script>

</body>
</html>

خاصیت nodeName

nodeNameاموال به نام یک گره مشخص می کند.

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

node نام گره سند همیشه # سند است

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

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;
</script>

توجه: nodeName همیشه حاوی نام برچسب بزرگ یک عنصر HTML است.


ویژگی nodeValue

nodeValueاموال به ارزش یک گره مشخص می کند.

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

خاصیت nodeType

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

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

<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType;
</script>

نوع 2 در HTML DOM منسوخ شده است (اما کار می کند). در XML DOM منسوخ نشده است.

منبع

مطالب مرتبط

0 0 رای ها
امتیازدهی به مقاله
اشتراک در
اطلاع از
guest
0 نظرات
بازخورد (Feedback) های اینلاین
مشاهده همه دیدگاه ها