آموزش جاوا اسکریپت – دستکاری DOM در جاوا اسکریپت

در این بخش از سری آموزش جاوا اسکریپت قصد داریم شما را با نحوه دستکاری DOM در جاوا اسکریپت آشنا کنیم.

دستکاری المان های DOM در جاوا اسکریپت

حالا که در مورد نحوه انتخاب و استایل دهی المان های HTML DOM یاد گرفتید. در این بخش نحوه افزودن یا حذف المان های DOM بصورت داینامیک, دریافت محتوای آن و غیره.. فرا می گیرید.

افزودن المان جدید به DOM

به صراحت می توانید یک المان جدید را در سند HTML با استفاده از متد document.createElement() بسازید. این متد یک المان جدید را می سازد اما آن را به DOM اضافه نمی کند; که باید در یک مرحله جداگانه همانند مثال زیر را انجام بدید.

<div id="main">
    <h1 id="title">Hello World!</h1>
    <p id="hint">This is a simple paragraph.</p>
</div>
 
<script>
// Creating a new div element 
var newDiv = document.createElement("div");
 
// Creating a text node 
var newContent = document.createTextNode("Hi, how are you doing?");
 
// Adding the text node to the newly created div
newDiv.appendChild(newContent);
 
// Adding the newly created element and its content into the DOM 
var currentDiv = document.getElementById("main"); 
document.body.appendChild(newDiv, currentDiv);
</script>

<h1 id="title">Hello World!</h1>

<p id="hint">This is a simple paragraph.</p>

</div>

// Creating a new div element

var newDiv = document.createElement("div");

// Creating a text node

var newContent = document.createTextNode("Hi, how are you doing?");

// Adding the text node to the newly created div

newDiv.appendChild(newContent);

// Adding the newly created element and its content into the DOM

var currentDiv = document.getElementById("main");

document.body.appendChild(newDiv, currentDiv);

</script>

متد appendChild() یک المان جدید را به آخر دیگر فرزندان گره والد مشخص شده اضافه می کند. به هرحال, اگر قصد اضافه کردن یک المان جدید به اول دیگر فرزندان گره والد مشخص شده دارید می توانید از متد insertBefore() استفاده کنید.

<div id="main">
    <h1 id="title">Hello World!</h1>
    <p id="hint">This is a simple paragraph.</p>
</div>
 
<script>
// Creating a new div element 
var newDiv = document.createElement("div");
 
// Creating a text node 
var newContent = document.createTextNode("Hi, how are you doing?");
 
// Adding the text node to the newly created div
newDiv.appendChild(newContent);
 
// Adding the newly created element and its content into the DOM 
var currentDiv = document.getElementById("main"); 
document.body.insertBefore(newDiv, currentDiv);
</script>

<h1 id="title">Hello World!</h1>

<p id="hint">This is a simple paragraph.</p>

</div>

// Creating a new div element

var newDiv = document.createElement("div");

// Creating a text node

var newContent = document.createTextNode("Hi, how are you doing?");

// Adding the text node to the newly created div

newDiv.appendChild(newContent);

// Adding the newly created element and its content into the DOM

var currentDiv = document.getElementById("main");

document.body.insertBefore(newDiv, currentDiv);

</script>

دریافت یا ست کردن محتوای HTML به DOM

همچنین می توانید محتوای المان HTML را با خصوصویت innerHTML به آسانی دریافت یا ست کنید.

این خصوصیت مقدار محتوای بین تگ های باز و بسته المان را دریافت یا ست می کند.

<div id="main">
    <h1 id="title">Hello World!</h1>
    <p id="hint">This is a simple paragraph.</p>
</div>
 
<script>
// Getting inner HTML conents
var contents = document.getElementById("main").innerHTML;
alert(contents); // Outputs inner html contents
 
// Setting inner HTML contents
var mainDiv = document.getElementById("main");
mainDiv.innerHTML = "<p>This is <em>newly inserted</em> paragraph.</p>";
</script>

<h1 id="title">Hello World!</h1>

<p id="hint">This is a simple paragraph.</p>

</div>

// Getting inner HTML conents

var contents = document.getElementById("main").innerHTML;

alert(contents); // Outputs inner html contents

// Setting inner HTML contents

var mainDiv = document.getElementById("main");

mainDiv.innerHTML = "<p>This is <em>newly inserted</em> paragraph.</p>";

</script>

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

بنابراین اگر قصد اضافه کردن به محتوای فعلی بدون از دست دادن محتوای اصلی المان را دارید می توانید از متد insertAdjacentHTML() استفاده کنید.

این متد دو پارامتر می پذیرد: موقعیت قرار گیری و متن HTML جدید.

موقعیت باید یکی از مقادیر “beforebegin“, “afterbegin“, “beforeend“, “afterend” باشد.

<!-- beforebegin -->
<div id="main">
    <!-- afterbegin -->
    <h1 id="title">Hello World!</h1>
    <!-- beforeend -->
</div>
<!-- afterend -->
 
<script>
// Selecting target element
var mainDiv = document.getElementById("main");
 
// Inserting HTML just before the element itself, as a previous sibling
mainDiv.insertAdjacentHTML('beforebegin', '<p>This is paragraph one.</p>');
 
// Inserting HTML just inside the element, before its first child
mainDiv.insertAdjacentHTML('afterbegin', '<p>This is paragraph two.</p>');
 
// Inserting HTML just inside the element, after its last child
mainDiv.insertAdjacentHTML('beforeend', '<p>This is paragraph three.</p>');
 
// Inserting HTML just after the element itself, as a next sibling
mainDiv.insertAdjacentHTML('afterend', '<p>This is paragraph four.</p>');
</script>

<h1 id="title">Hello World!</h1>

</div>

// Selecting target element

var mainDiv = document.getElementById("main");

// Inserting HTML just before the element itself, as a previous sibling

mainDiv.insertAdjacentHTML('beforebegin', '<p>This is paragraph one.</p>');

// Inserting HTML just inside the element, before its first child

mainDiv.insertAdjacentHTML('afterbegin', '<p>This is paragraph two.</p>');

// Inserting HTML just inside the element, after its last child

mainDiv.insertAdjacentHTML('beforeend', '<p>This is paragraph three.</p>');

// Inserting HTML just after the element itself, as a next sibling

mainDiv.insertAdjacentHTML('afterend', '<p>This is paragraph four.</p>');

</script>

نکته: موقعیت های beforebegin و afterend فقط اگر در درخت DOM باشد و یک المان والد داشته باشد. همچنین زمان قرار دادن HTML در یک صفحه, دقت کنید که ورودی های کاربر برای جلوگیری از حملات XSS پاکسازی شده باشند.

حذف المان های DOM

می توانید از متد removeChild() برای حذف یک گره فرزند از DOM استفاده کنید. این متد همچنین گره حذف شده را برگشت می دهد.

<div id="main">
    <h1 id="title">Hello World!</h1>
    <p id="hint">This is a simple paragraph.</p>
</div>

<script>
var parentElem = document.getElementById("main");
var childElem = document.getElementById("hint");
parentElem.removeChild(childElem);
</script>

<h1 id="title">Hello World!</h1>

<p id="hint">This is a simple paragraph.</p>

</div>

var parentElem = document.getElementById("main");

var childElem = document.getElementById("hint");

parentElem.removeChild(childElem);

</script>

همچنین ممکن است که بتوانید المان فرزند را بدون دانستن المان والد حذف کنید. برای اینکار به سادگی المان فرزند را پیدا و از خصوصیت parentNode برای پیدا کردن المان والد استفاده کنید.

این خصوصیت والد گره مشخص شده از درخت DOM را برگشت می دهد.

<div id="main">
    <h1 id="title">Hello World!</h1>
    <p id="hint">This is a simple paragraph.</p>
</div>
 
<script>
var childElem = document.getElementById("hint");
childElem.parentNode.removeChild(childElem);
</script>

<h1 id="title">Hello World!</h1>

<p id="hint">This is a simple paragraph.</p>

</div>

var childElem = document.getElementById("hint");

childElem.parentNode.removeChild(childElem);

</script>

جایگزین کردن المان موجود در DOM

شما به راحتی می توانید یک المان در HTML DOM را با دیگری توسط متد replaceChild() جایگزین کنید.

این متد دو پارامتر را می پذیرد: گره‌ی که باید قرار بگیرید و گره‌ی که باید جایگزین شود.

سینتکس آن بصورت parentNode.replaceChild(newChild, oldChild); است.

<div id="main">
    <h1 id="title">Hello World!</h1>
    <p id="hint">This is a simple paragraph.</p>
</div>
 
<script>
var parentElem = document.getElementById("main");
var oldPara = document.getElementById("hint");
 
// Creating new elememt
var newPara = document.createElement("p");
var newContent = document.createTextNode("This is a new paragraph.");
newPara.appendChild(newContent);
 
// Replacing old paragraph with newly created paragraph
parentElem.replaceChild(newPara, oldPara);
</script>

<h1 id="title">Hello World!</h1>

<p id="hint">This is a simple paragraph.</p>

</div>

var parentElem = document.getElementById("main");

var oldPara = document.getElementById("hint");

// Creating new elememt

var newPara = document.createElement("p");

var newContent = document.createTextNode("This is a new paragraph.");

newPara.appendChild(newContent);

// Replacing old paragraph with newly created paragraph

parentElem.replaceChild(newPara, oldPara);

</script>

امیدوارم از آموزش نحوه دستکاری DOM در جاوا اسکریپت نهایت استفاده را برده باشید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.

لغو پاسخ

میثم صدیق ۲۷ شهریور ۱۳۹۹

سلام برای اضافه کردن یک المان با (append) من یک کلید گذشتم اضافه میشم ولی با هر بار کلید کردن اضافه میشود اگر بخواییم یک بار اضافه شود و تکرار نشود چیکار کنیم

پاسخ

حسن شفیعی ۲۷ شهریور ۱۳۹۹

سلام. قبل از اجرا کردن دستور append یک شرط if برای بررسی وجود المان بذارید که اگر وجود نداشت اضافه بشه
var elementExists = document.getElementById(“find-me”);
if(! elementExists ) append()

پاسخ

میثم صدیق ۲۷ شهریور ۱۳۹۹

$(‘#add_product_attribute3’).click(function() {
let attributesection3=$(‘#attribute_section3’);
let id =attributesection3.children().length;

attributesection3.append(
createNewAttr3({
id
})
);

لطفا این کد چک میفرمایید

پاسخ

محمد ۳ خرداد ۱۳۹۹

ببخشید اگر بخواهیم اینپوتی با تایپ کالر بسازیم باید چه کار کنیم

پاسخ

حسن شفیعی ۴ خرداد ۱۳۹۹

سلام. به اینصورت :
var checkbox = document.createElement(‘input’);
checkbox.type = “color”;
و بعد میتونید هرجا خواستید append کنید

پاسخ

آموزش جاوا اسکریپت – دستکاری DOM در جاوا اسکریپت

دستکاری المان های DOM در جاوا اسکریپت

افزودن المان جدید به DOM

دریافت یا ست کردن محتوای HTML به DOM

حذف المان های DOM

جایگزین کردن المان موجود در DOM

آموزش جاوا اسکریپت – کوکی ها در جاوا اسکریپت

آموزش جاوا اسکریپت – اعتبارسنجی فرم در جاوا اسکریپت

آموزش جاوا اسکریپت – Regular Expression در جاوا اسکریپت ۲

آموزش جاوا اسکریپت – Regular Expression در جاوا اسکریپت ۱

لغو پاسخ

دوره آموزش ساخت دیجی کالا با php به همراه اپلیکیشن اندروید

آموزش ساخت ربات تلگرام با PHP (از پایه و پروژه محور)

دوره جامع آموزش طراحی سایت + پروژه قالب فروشگاه