گره ها در جاوااسکریپت

دسته بندی : آموزش Javascript سطح مقاله : متوسط زمان مطالعه : 4 دقیقه آخرین بروز رسانی: 20 اسفند 1399

یکی از ویژگی های جاوا اسکریپت دانستن نحوه کار با گره ها است. به محض دسترسی به گره های Document Object Model (DOM) از عناصر خاص ، می توانید خصوصیات ، جهت گیری و شکل ظاهری آنها را مدیریت کنید. در این آموزش ، شما همه چیز را در مورد JavaScript HTML Document Object Model Navigation خواهید آموخت.

گره های DOM به شما در تحلیل روابط بین عناصر کمک می کنند. به دلیل لانه سازی عنصر ، یک درخت گره ایجاد می شود تا تجسم بهتری داشته باشد. ساختار و روابط بین گره ها نیز توضیح داده خواهد شد. شما خواهید فهمید که ریشه ، والدین ، فرزند و خواهر و برادر در یک درخت گره چیست.

نکات اصلی گره ها در جاوااسکریپت:

HTML DOM به شما امکان می دهد با استفاده از روابط گره ، درخت گره را هدایت کنید.
با یادگیری پیمایش در مدل شی document سند (DOM) ، می توانید از هر شی در HTML که JavaScript شما روی آن اعمال می شود استفاده کنید.

گره چیست و چگونه به هم متصل می شوند

استاندارد HTML Document Object Model می گوید که همه چیز در اسناد HTML یک گره است:

سند خود گره سند است.
هر عنصر یک گره عنصر است.
تمام متن درون عناصر گره های متنی هستند.
هر صفتی که به یک عنصر اختصاص داده می شود یک گره ویژگی است.
هر نظر یک گره نظر است.

با استفاده از مدل شی document سند HTML ، هر یک از این گره ها برای JavaScript قابل دسترسی هستند. شما می توانید گره های جدیدی ایجاد کنید و هر گره قابل حذف یا اصلاح است.

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

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

بیایید این را با یک مثال توضیح دهیم:

<html>
<head>
	<title>Amazingly Creative Title</title>
</head>

<body>
	<h2>Wonderful Heading</h2>
	<div>The text!</div>
</body>
</html>

در یک مثال از یک اسکریپت HTML در بالا ، می بینید که:

<html> گره ریشه است ، هیچ والدی ندارد و والد <head> و <body> است.
<head> و <body> زیرمجموعه های <html> هستند.
<title> فرزند <head> است و دارای یک فرزند تنها است ، که یک گره متنی است به طرز حیرت انگیز عنوان خلاق.
<body> دارای دو فرزند است: <h2> و <div>.
<h2> دارای یک گره متن تک فرزند است: عنوان فوق العاده.
<div> دارای یک گره متن تک فرزند است: متن !.
<h2> و <div> خواهر و برادر هستند.

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

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

childNodes [nodeNumber]
والد گره
آخرین فرزند
بچه اول
خواهر و برادر قبلی
خواهر و برادر بعدی

انتظار داشتن یک گره عنصر به همراه متن ، یک خطای مکرر هنگام کار با مدل شی document سند است.

به عنوان مثال: در مورد <title> عنوان شگفت آور خلاق <Title/> ، گره عنصر <title> خود حاوی متن نیست. با این حال ، حاوی یک گره متن است به طرز شگفت انگیزی عنوان خلاقانه.

با استفاده از ویژگی nodeValue یا innerHTML می توان به این مورد دسترسی داشت.

مقادیر گره

در حالی که ویژگی innerHTML برای تغییر محتوای یک عنصر مفید است ، می توان از ویژگی های childNodes و nodeValue برای بدست آوردن محتوای عنصر استفاده کرد.

کد موجود در مثال زیر مقدار عنصر <h2> را دریافت کرده و آن را در عنصر <div> کپی می کند:

<html>
<body>
  <div id="el1">Amazingly Creative Heading</div>  
  <div id="el2">Look this text DOM!</div> 

<script>
  document.getElementById("el2").innerHTML = document.getElementById("el1").childNodes[0].nodeValue;
</script>
</body>
</html>

در مثال بالا ، getElementById یک روش است ، در عین حال childNodes و nodeValue ویژگی هستند.

برای اهداف این آموزش ، ما قصد داریم از ویژگی innerHTML استفاده کنیم. این بدان معنا نیست که روش فوق برای یادگیری و درک ساختار اساسی DOM به نوعی کمتر مفید است!

به خاطر داشته باشید که استفاده از firstChild تاثیری مشابه با childNodes دارد [0].

<html>
<body>
    <h2 id="el1">Amazingly Creative Title</h2>
    <div id="el2">the Text!</div>
<script>
    document.getElementById("el2").innerHTML = document.getElementById("el1").firstChild.nodeValue;
</script>
</body>
</html>

گره های ریشه DOM

دو ویژگی JavaScript دریافت عنصر بدنه وجود دارد که به شما امکان دسترسی به گره سند را می دهد:

document.body برای بدست آوردن متن سند استفاده می شود.
document.documentElement برای بدست آوردن کل سند استفاده می شود.

برای دیدن هر دو مورد استفاده شده در کد ، به مثال های زیر نگاه کنید:

<html> 
<body>
<script> 
    alert(document.body.innerHTML); 
</script> 
<p>Amazingly Creative Title</p>  
<div>  
    <p>Hail the DOM!</p>  
    <p>Witness the power of the <strong>document.body</strong> property.</p>  
</div>    
</body>
</html>

<html>  
<body>
<script>
    alert(document.documentElement.innerHTML); 
</script> 
    <p>Check this out!</p>
    <div>
        <p>Hail the DOM!</p>
        <p>Witness the power of the <strong>document.documentElement</strong> property!</p>
    </div>
</body>
</html>

خصوصیاتی که باید بدانید

از ویژگی nodeName برای تعیین نام گره استفاده می شود و همیشه فقط خواندنی است. می تواند این مقادیر را برگرداند:

نام تگ
نام مشخصه
#text (در صورت گره متن).
# سند (در صورت گره سند).
# نظر (در صورت گره نظر).

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

حال ، از ویژگی nodeValue برای تعیین مقدار یک گره استفاده می شود. این سه مقدار بازگشتی ممکن دارد:

NULL (در صورت وجود سند یا گره عنصر)
محتوا (در صورت وجود گره متن یا نظر)
مقدار صفت (در صورت گره ویژگی)

از ویژگی nodeType برای بازگشت نوع گره استفاده می شود. برای دیدن مهمترین انواع گره ها جدول زیر را مرور کنید:

nodeType	Element type
1	Element
2	Attribute
3	text
8	Comment
9	Document

خلاصه گره ها در جاوااسکریپت:

می توانید با JavaScript از طریق روابط گره به DOM بروید.
روابط گره ها در جاوااسکریپت به عنوان ریشه ، والدین ، فرزند و خواهر و برادر تعریف می شوند.
ویژگی های مختلف گره وجود دارد که می توانید از آنها برای دسترسی به گره ها استفاده کنید.

این مقاله چقدر براتون مفید بود؟

اولین امتیاز را ثبت کنید😊