افزودن گره ها (DOM Add Nodes)
در این بخش با «افزودن گره های DOM» آشنا می شوی. «گره (Node)» هر جزء XML است. «DOM (Document Object Model)» هم نسخه شی ءگرای سند است. با چند متد ساده، مثل اضافه کردن صفحه به دفتر، گره ها را به جاهای درست می چسبانیم.
افزودن انتهایی با appendChild()
متد appendChild() یک «فرزند (Child)» را به انتهای گره هدف اضافه می کند. مثل چسباندن برگه جدید بعد از آخرین برگه.
newEle = xmlDoc.createElement("edition");
xmlDoc.getElementsByTagName("book")[0].appendChild(newEle);
گام ها: 1) books.xml را در xmlDoc بار کن. 2) عنصر <edition> بساز. 3) آن را به اولین <book> بچسبان.
افزودن همراه با متن
گاهی علاوه بر عنصر، «گره متن (Text Node)» هم می خواهی. متن را بساز و به عنصر بچسبان، سپس عنصر را به کتاب اضافه کن.
newEle = xmlDoc.createElement("edition");
newText = xmlDoc.createTextNode("first");
newEle.appendChild(newText);
xmlDoc.getElementsByTagName("book")[0].appendChild(newEle);
افزودن در موقعیت دلخواه با insertBefore()
متد insertBefore() یک گره را «قبلِ» فرزند مشخص قرار می دهد. وقتی جای دقیق مهم است، از این روش استفاده کن.
newNode = xmlDoc.createElement("book");
x = xmlDoc.documentElement;
y = xmlDoc.getElementsByTagName("book")[3];
x.insertBefore(newNode, y);
نکته: اگر آرگومان دوم null باشد، نتیجه مثل appendChild() است و در انتها اضافه می شود.
افزودن ویژگی با setAttribute()
«ویژگی (Attribute)» برچسب اضافه عنصر است. متد setAttribute() مقدار ویژگی را تنظیم می کند؛ اگر نبود، خودش می سازد.
xmlDoc.getElementsByTagName('book')[0].setAttribute("edition", "first");
هشدار: اگر ویژگی موجود باشد، مقدار قبلی جایگزین می شود.
افزودن متن داخل Text Node با insertData()
متد insertData() روی «Text Node» کار می کند. با پارامتر offset می گویی از کجا متن را وارد کند.
xmlDoc.getElementsByTagName("title")[0].childNodes[0].insertData(0, "Easy ");
ادامه مسیر یادگیری
برای ساخت از پایه، صفحه ساخت گره ها را ببین. برای مرحله بعد، سراغ کلون کردن گره ها برو. همین طور لینک سریع به افزودن گره های DOM در شروع مسیر.
جمع بندی سریع
- appendChild در انتها اضافه می کند.
- insertBefore جای دقیق را کنترل می کند.
- setAttribute ویژگی را می سازد یا به روز می کند.
- insertData متن را داخل Text Node درج می کند.