با عرض سلام خدمت کاربران محترم سایت پی وی لرن.
در این جلسه قصد داریم تا با گره ها در HTML DOM ، خاصیت nodeType ، رابطه گره ها و حذف گره های HTML در جاوا اسکریپت آشنا شویم.
طبق گفته W3C، هرچیزی در HTML یک گره (node) است :
با HTML DOM، تمام گره ها در درخت گره توسط جاوا اسکریپت در دسترس هستند.
گره های جدید می توانند اضافه شوند و تمام گره ها می توانند تغییر یا حذف شوند.
در درخت گره، بالاترین گره، گره اصلی root نام دارد.
هر گره ای والدی دارد. به جز گره اصلی
هر گره می تواند تعدادی فرزند داشته باشد.
به کد زیر دقت کنید:
1 2 3 4 5 6 7 8 9 10 11 12 | <html> <head> <title>DOM Tutorial</title> </head> <body> <h1>DOM Lesson one</h1> <p>Hello world!</p> </body> </html> |
از کد بالا می توان فهمید که:
همچنین:
در مثال زیر ما مقدار عنصر <p> با “id=”id02 را برابر مقدار فرزند گره <h1> قرار می دهیم:
1 2 3 4 5 6 7 8 9 10 11 12 | <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> |
مثال زیر نیز مانند کد بالا عمل می کند:
1 2 3 4 5 6 7 8 9 10 11 12 | <html> <body> <h1 id="id01">My First Page</h1> <p id="id02"></p> <script> document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue; </script> </body> </html> |
این خاصیت Property نوع گره را بر می گرداند:
1 2 3 4 5 6 | <h1 id="id01">My First Page</h1> <p id="id02"></p> <script> document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType; </script> |
مهمترین انواع گره عبارت اند از:
مثال | نوع | گره |
<h1 class=”heading”>PVLearn</h1> | ۱ | ELEMENT_NODE |
PVLearn | ۳ | TEXT_NODE |
<!– This is a comment –> | ۸ | COMMENT_NODE |
سند html | ۹ | DOCUMENT_NODE |
<!Doctype html> | ۱۰ | DOCUMENT_TYPE_NODE |
برای ایجاد گره های HTML در جاوا اسکریپت ابتدا باید عنصر element را ایجاد کنیم و سپس گره را به عنصر موجود اضافه کنیم:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <div id="div1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div> <script> var para = document.createElement("p"); var node = document.createTextNode("This is new."); para.appendChild(node); var element = document.getElementById("div1"); element.appendChild(para); </script> |
برای حذف گره های HTML در جاوا اسکریپت باید والد عنصر را بدانیم:
1 2 3 4 5 6 7 8 9 10 | <div id="div1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div> <script> var parent = document.getElementById("div1"); var child = document.getElementById("p1"); parent.removeChild(child); </script> |
نکته : متد () node.remove در هیچیک از نسخه های مروگر Internet Explorer کار نمی کند.
تشریح مثال فوق :
این سند html شامل یک عنصر <div> با دو عنصر html فرزند (دو عنصر <p> ) می شود.
1 2 3 4 | <div id="div1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div> |
عنصری با “id=”div1 پیدا می شود :
1 | var parent = document.getElementById("div1"); |
پیدا کردن عنصر <p> :
1 | var child = document.getElementById("p1"); |
حذف عناصر فرزند یک عنصر والد:
1 | parent.removeChild(child); |
نکته : خوب است که بتوانیم عنصری را بدون اشاره به والدین حذف کنیم. اما متاسفانه DOM نیاز به دانستن هر عنصر که می خواهید حذف کنید و عنصر والد آن دارد.
در اینجا یک راه حل معمول وجود دارد: برای پیدا کردن فرزندی که می خواهید حذف کنید، از ویژگی parentNode خود برای پیدا کردن والدین آن استفاده کنید:
1 2 | var child = document.getElementById("p1"); child.parentNode.removeChild(child); |
برای جایگزینی یک عنصر در HTML DOM از متد ()replaceChild استفاده کنید :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div id="div1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div> <script> var para = document.createElement("p"); var node = document.createTextNode("This is new."); para.appendChild(node); var parent = document.getElementById("div1"); var child = document.getElementById("p1"); parent.replaceChild(para, child); </script> |
جلسه گره ها در HTML DOM نیز به پایان رسید.
erfan
عالی ترین آموزشی بود که من پیدا کردم تا اینجا حرف نداره
خدا قوت.