تغییر گره ها (DOM Change Nodes)
کلید ما اینجاست: «تغییر گره های DOM». در DOM هر چیز یک «گره (Node)» است. متنِ عنصر، در «گره متن (Text Node)» ذخیره می شود. پس برای تغییر متن، باید همان گره متن را عوض کنیم.
تغییر مقدار گره متن با nodeValue
ویژگی «nodeValue» مقدار گره متن را عوض می کند. عنصر خودش مقدار متن ندارد.
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue = "new content";
نکته: برای تغییر همه عنوان ها، می توان حلقه زد. نمونه آماده را اجرا کن.
تغییر مقدار ویژگی با setAttribute()
ویژگی ها خودشان «گره ویژگی (Attribute Node)» هستند و مقدار متنی دارند. متد «setAttribute» مقدار ویژگی را تغییر می دهد.
xmlDoc.getElementsByTagName("book")[0].setAttribute("category", "food");
نکته: اگر ویژگی نباشد، setAttribute آن را با همان نام و مقدار می سازد.
نمونه افزودن ویژگی جدید به همه <title> ها را اینجا ببین:
تغییر مقدار ویژگی با nodeValue
می توان «گره ویژگی» را گرفت و «nodeValue» آن را تغییر داد.
xmlDoc.getElementsByTagName("book")[0]
.getAttributeNode("category")
.nodeValue = "food";
گام های عملی
- عنصر را پیدا کن و به گره متن برس.
- nodeValue را به مقدار جدید تغییر بده.
- برای ویژگی ها از setAttribute استفاده کن.
- یا گره ویژگی را بگیر و nodeValue آن را عوض کن.
هشدار: برخی مرورگرها فاصله خالی را گره متن می بینند. هنگام دسترسی به firstChild یا nextSibling، مراقب گره های خالی باش.
برای مرور مفهوم «گرفتن مقادیر»، این صفحه را ببین: گرفتن مقادیر (DOM Get Values). برای حذف ها هم ادامه بده به: حذف گره ها (DOM Remove Nodes).
جمع بندی سریع
- متنِ عنصر در گره متن است.
- nodeValue متن را تغییر می دهد.
- setAttribute ساده ترین راهِ تغییر ویژگی است.
- getAttributeNode + nodeValue کنترل بیشتری می دهد.