آموزش ویژگی nodeType در DOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی nodeType در DOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی nodeType در DOM جاوااسکریپت
با استفاده از ویژگی nodeType میتونیم نوع یا ( Type ) یک گره را بدست آوریم، و همونطور که میدونید نوع گره ها هم میتونه به نسبت خوده گره متفاوت باشه.
برخی از مهمترین نوع گره ها را میتوان موارد زیر نام برد :
- عدد ۱ برای گره عنصر یا Element Node
- عدد ۲ برای گره صفت یا Attribute Node
- عدد ۳ برای گره متن یا Text Node
- عدد ۸ برای گره کامنت یا Comment Node
- عدد ۹ برای گره سند اصلی یا Document Node
| مقدار برگشتی | برگشت یک عدد که نشان دهنده نوع گره می باشد عدد ۱ برای گره عنصر یا Element Node عدد ۲ برای گره صفت یا Attribute Node عدد ۳ برای گره متن یا Text Node عدد ۸ برای گره کامنت یا Comment Node عدد ۹ برای گره سند اصلی یا Document Node |
|---|---|
| نسخه DOM | Core Level 1 Node Object |
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از این ویژگی را در زبان جاوا اسکریپت مشاهده نمایید.
مثال شماره ۱ : بدست آوردن نوع گره عنصر ( Element Node )
|
1 2 3 4 5 6 7 8 9 |
<script> function get(){ var mydiv , result; mydiv = document.getElementById("MyDiv").nodeType; result = document.getElementById("Result").innerHTML = "NodeType = " + mydiv; } </script> |
مثال شماره ۲ : با کلیک بروی یک دکمه، بصورت دسته جمعی نام گره ها نمایش داده میشه و کلیک بروی دکمه دیگه نوع گره ها
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<script> function get_type(){ var mybox , i , mytext , result; mybox = document.getElementById("MyBox").childNodes; result = document.getElementById("Result"); mytext = ""; for( i = 0; i < mybox.length; i++ ){ mytext = mytext + mybox[i].nodeType + "<br>"; } result.innerHTML = mytext; } function get_name(){ var mybox , i , mytext , result; mybox = document.getElementById("MyBox").childNodes; result = document.getElementById("Result"); mytext = ""; for( i = 0; i < mybox.length; i++ ){ mytext = mytext + mybox[i].nodeName + "<br>"; } result.innerHTML = mytext; } </script> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این ویژگی در جاوااسکریپت پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | IE |
| nodeType | بله | بله | ۷ | بله | ۶ |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در جاوااسکریپت بصورت زیر می باشد.
|
1 |
Node.nodeType; |
Free-Learn
جدول انواع گره ( عددی )
در جدول زیر میتوانید شماره عددی نوع ( Type ) انواع گره ها را مشاهده نمایید.
| نام گره | نوع گره ( عدد ) |
|---|---|
| ELEMENT_NODE ( گره تگ یا عنصر ) |
۱ |
| ATTRIBUTE_NODE ( گره صفت ) |
۲ |
| TEXT_NODE ( گره متن ) |
۳ |
| CDATA_SECTION_NODE ( سکشن CDATA ) |
۴ |
| PROCESSING_INSTRUCTION_NODE ( دستورالعمل های قابل پردازش ) |
۷ |
| COMMENT_NODE ( گره کامنت ) |
۸ |
| DOCUMENT_NODE ( گره سند یا صفحه وب ) |
۹ |
| DOCUMENT_TYPE_NODE ( گره نوع سند یا صفحه ، مثه <DOCTYPE html!> |
۱۰ |
| DOCUMENT_FRAGMENT_NODE ( گره قطعه سند ) |
۱۱ |
Free-Learn
نکات و توضیحات
- این ویژگی یک ویژگی فقط خواندنی یا Read-Only می باشد.
- با استفاد از ویژگی nodeName میتونیم نام گره ( که میتونه گره عنصر یا گره متن یا گره صفت یا گره کامنت باشه ) رو برگشت داد و با استفاده از ویژگی nodeType میتونیم نوع گره ( بصورت عددی ) برگشت داد.
- با استفاده از ویژگی nodeName میتونیم نام گره را بدست آوریم.
- با استفاده از ویژگی nodeType میتونیم نوع گره را بدست آوریم.
- با استفاده از ویژگی nodeValue میتونیم مقدار گره را بدست آوریم.
