آشنایی با دستکاری DOM با جاوا اسکریپت

ek3nk4r 2023-07-07

0 43 خواندن این مطلب 9 دقیقه زمان میبرد

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

Document Object Model یا DOM یک رابط برنامه نویسی است که به جاوا اسکریپت اجازه می دهد تا عناصر یک سند HTML را دستکاری کند.

هنگامی که یک کد HTML در یک مرورگر بارگذاری می شود، آن را تجزیه می کند. به منظور پویا کردن این صفحات وب و اسناد HTML، مرورگر به جاوا اسکریپت اجازه می دهد تا از قدرت DOM برای دسترسی به گره ها و عناصر درون فایل HTML به شکل سلسله مراتبی استفاده کند.

DOM یک رابط برنامه نویسی کاربردی (API) برای دسترسی و دستکاری فایل های HTML است.

در این مقاله، نحوه استفاده از شیء document برای انتخاب عناصر، عبور از DOM، درج، حذف و جایگزینی عناصر را بررسی خواهیم کرد.

انتخاب عناصر در DOM

شما می توانید با استفاده از روش های مختلف موجود از طریق شی سند، عناصری را در داخل Document Object Model (DOM) انتخاب کنید. این روش ها به شما این امکان را می دهند که یک عنصر یا چند عنصر را انتخاب کنید. این روش ها عبارتند از:

getElementById()

document.getElementById() دسترسی به عناصر با شناسه خاصی که با شناسه ذکر شده در رشته مطابقت دارد.

<html>
          <head>
                <title>DOM Manipulation</title>
               <script src="./app.js" defer></script>
          </head>
          <body>
                <h1 id="heading"> JavaScript getElementById() 
              </h1>
            <ul class="parent">
                   <li class="item">First Item</li>
                   <li class="item">Second Item</li>
              </ul>
          </body>
</html>

const element = document.getElementById("heading");

شناسه در یک سند HTML منحصر به فرد است. با این حال، HTML یک زبان بخشنده است. اگر سند HTML دارای چندین عنصر با شناسه یکسان باشد، document.getElementById() متد اولین عنصری را که با آن روبرو می شود برمی گرداند. در مواردی که ID داده شده وجود نداشته باشد، آن را باطل می کند.

getElementByClassName()

document.getElementByClassName() برای دسترسی به عناصر با نام کلاس خاص استفاده می شود. این نام ها به عنوان آرگومان های متد در هنگام فراخوانی ارسال می شوند.

یک شی آرایه مانند (هر کاری که می توانید روی یک آرایه انجام دهید در آنجا کار نمی کند) از عناصر فرزند را با یک نام کلاس مشخص برمی گرداند.

این آرایه ها مجموعه های HTML نامیده می شوند و با آرایه های جاوا اسکریپت واقعی متفاوت هستند. بنابراین، همه عملیات آرایه نمی توانند با این مجموعه های HTML کار کنند.

درست مثل document.getElementById()، document.getElementByClassName() متد اولین عنصری را که با آن روبرو می شود برمی گرداند. در مواردی که نام کلاس داده شده وجود نداشته باشد، null برمی‌گرداند.

در اینجا یک قطعه کد است که نحوه انجام آن را توضیح می دهد getElementsByClassName() با عناصر HTML کار می کند:

<html>
          <head>
               <title>DOM Manipulation</title>
                <script src="./app.js" defer></script>
          </head>
          <body>
                <nav>
                <ul class="parent">
                    <li class="item">First Item</li>
                    <li class="item">Second Item</li>
                 </ul>
                </nav>
          </body>
</html>

const items = document.getElementsByClassName("item");

در قطعه کد، اولین عنصر با کلاس item انتخاب شده و در یک متغیر ذخیره می شود items.

querySelector()

document.querySelector() روشی است که به شما امکان می دهد اولین عنصری را انتخاب کنید که با انتخابگر CSS مطابقت دارد.

<html>
          <head>
                <title>DOM Manipulation</title>
                <script src="./app.js" defer></script>
          </head>
          <body>
               <nav>
               <ul>
                    <li class="item">First Item</li>
                  <li class="item">Second Item</li>
                  <li class="item">Third Item</li>
               </ul>
               </nav>
          </body>
</html>

const items = document.querySelector("li");
console.log(items);

در این کد، اسکریپت js از document.querySelector("li") برای انتخاب اولین عنصر li.

انتخاب چند عنصر در DOM

وقتی نوبت به انتخاب چندین عنصر در DOM می رسد، روش های مختلفی وجود دارد که می توانید استفاده کنید. این روش‌ها معمولاً مجموعه‌ای از عناصر را برمی‌گردانند که با معیارهای خاصی مطابقت دارند. در اینجا برخی از رویکردهای رایج استفاده می شود:

querySelectorAll()

document.querySelectorAll() برای انتخاب تمام عناصر با انتخابگر CSS استفاده می شود. یک استاتیک را برمی گرداند NodeList از عناصر این بدان معناست که وقتی نام تگ ها حذف یا اضافه می شوند، تغییر نمی کند یا منعکس نمی شود.

<html>
          <head>
                <title>DOM Manipulation</title>
                <script src="./app.js" defer></script>
          </head>
          <body>
               <nav>
               <ul>
                    <li class="item">First Item</li>
                  <li class="item">Second Item</li>
                  <li class="item">Third Item</li>
               </ul>
               </nav>
          </body>
</html>

const items = document.querySelectorAll("li");
console.log(items);

از کد جاوا اسکریپت بالا، به راحتی می‌توانیم تمام عناصر را انتخاب کنیم li انتخابگر CSS

PS: این را نباید با آن اشتباه گرفت querySelector(). querySelector() فقط اولین عنصر را با یک انتخابگر خاص CSS انتخاب می کند. در حالی که querySelectorAll() تمام عناصر را با یک انتخابگر CSS خاص انتخاب می کند

getElementByTagName()

document.getElementByTagName() امکان انتخاب تمام عناصری که با نام تگ مطابقت دارند را فراهم می کند. یک مجموعه زنده HTML از عناصر را برمی گرداند. این بدان معناست که وقتی نام تگ ها حذف یا اضافه می شوند، به طور خودکار تغییرات را منعکس می کند. مثلا،

<html>
          <head>
                <title>DOM Manipulation</title>
                <script src="./app.js" defer></script>
          </head>
          <body>
                <h1>Tag Name 1</h1>
                <p>This is for some random text</p>
               <h1>Tag Name 2</h1>
                <p>This is for some more random text</p>
                <h1>Tag Name 3</h1>
                <p>This is for some other random text</p>
          </body>
</html>

const headings = document.getElementsByTagName("h1");
console.log(headings);

در قطعه کد جاوا اسکریپت، همه عناصر با نام تگ h1 انتخاب و نمایش داده می شوند.

عبور از DOM

پیمایش DOM فرآیند جابجایی یا انتخاب یک عنصر از عنصر دیگر است.

این شامل پیمایش درخت Document Object Model (DOM) برای دسترسی و دستکاری عناصر است.

پیمایش می تواند در سه جهت انجام شود:

به سمت بالا
به پهلو
به سمت پایین

پیمایش به سمت بالا

این شامل دسترسی به عنصر فرزند از عنصر والد یا اجداد آن است. رایج ترین روشی که برای پیمایش رو به بالا استفاده می شود parentElement().

با استفاده از parentElemet یا parentNode

می توانید با استفاده از DOM به سمت بالا حرکت کنید parentElement() یا parentNode(). این به شما امکان می دهد به عنصر/گره ای که عنصر فعلی را در بر می گیرد دسترسی داشته باشید.

<html>
          <head>
                <title>DOM Manipulation</title>
                <script src="./app.js" defer></script>
          </head>
         <body>
            <ul class="parent">
                <li class="child">First Item</li>
               <li class="child">Second Item</li>
                <li class="child">Third Item</li>
             </ul>
         </body>
</html>

const item = document.querySelector(".child");
const parentN = item.parentNode
const parentEl = item.parentElement
console.log(parentN);
console.log(parentEl)

در قطعه کد جاوا اسکریپت، اولین عنصر با کلاس child انتخاب شده و در یک متغیر ذخیره می شود item. اکنون می توانیم از متدهای parentNode و parentElement برای دسترسی به گره والد و عنصر والد این عنصر استفاده کنیم.

تراورس جانبی

این شامل حرکت بین عناصری است که والد مشابهی دارند. از این عناصر به عنوان عناصر خواهر و برادر نیز یاد می شود. متداول ترین روش های مورد استفاده برای پیمایش جانبی nextElementSibling و previousElementSibling هستند

استفاده از nextElementSibling و previousElementSibling

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

<html>
          <head>
                <title>DOM Manipulation</title>
                <script src="./app.js" defer></script>
          </head>
          <body>
            <ul class="parent">
                <li class="child">First Item</li>
               <li class="child">Second Item</li>
                <li class="child">Third Item</li>
             </ul>
         </body>
</html>

const firstItem = document.querySelector("li");
console.log(firstItem.nextElementSibling);
const secondItem = document.querySelectorAll("li")[1];
console.log(secondItem.previousElementSibling);

این ممکن است کمی گیج کننده باشد، بنابراین اجازه دهید کد را تجزیه کنیم:

خط 1 اولین عنصر را با نام تگ انتخاب می کنیم li و آن را در متغیری به نام ذخیره کنید firstItem.

خط 2 ما به راحتی به عنصر بعدی دسترسی داریم firstItem با استفاده از nextElementSibling روش.

در خط 3 ما از querySelectorAll() برای دسترسی به تمام عناصر دارای تگ استفاده می کنیم li، سپس از شاخص استفاده می کنیم [1] برای انتخاب فقط عنصر دوم با برچسب li، آن را در متغیری به نام ذخیره می کند secondItem”

خط 4 ما به راحتی به عنصر قبلی secondItem با استفاده از previousElementSibling() روش.

PS: این باید به وضوح بیشتر در مورد تفاوت بین querySelector() و querySelectorAll() و نحوه استفاده از آنها

پیمایش رو به پایین

این شامل حرکت از یک عنصر والد به عناصر فرزند آن است. در پیمایش DOM به سمت پایین، می‌توانیم از ویژگی child برای انتخاب نوادگان مستقیم عنصر فعلی استفاده کنیم.

انتخاب عنصر کودکان

در پیمایش DOM به سمت پایین، می‌توانیم از ویژگی child برای انتخاب نوادگان مستقیم عنصر فعلی استفاده کنیم.

<html>
          <head>
                <title>DOM Manipulation</title>
                <script src="./app.js" defer></script>
          </head>
          <body>
            <ul class="parent">
                <li class="child">First Item</li>
               <li class="child">Second Item</li>
                <li class="child">Third Item</li>
             </ul>
         </body>
</html>

<pre><code class="language-javascript">const parent = document.querySelector(".parent");
const children = parent.children;

در قطعه کد جاوا اسکریپت، اولین عنصر با کلاس parent انتخاب شده و در یک متغیر ذخیره می شود parent. اکنون می‌توانیم از متد فرزندان برای دسترسی به فرزندان عنصر استفاده کنیم.

ایجاد عناصر HTML در جاوا اسکریپت

ما می توانیم عناصر جدید HTML را از یک کد جاوا اسکریپت با استفاده از document.createElement() روش. این متد یک آرگومان از نوع عنصری که می خواهیم ایجاد کنیم را می گیرد.

مثلا:

<html>
          <head>
                <title>DOM Manipulation</title>
                <script src="./app.js" defer></script>
          </head>
          <body>
            <ul class="parent">
                <li class="child">First Item</li>
               <li class="child">Second Item</li>
                <li class="child">Third Item</li>
             </ul>
         </body>
</html>

ما می توانیم استفاده کنیم createElement() روشی برای ایجاد یک جدید <li> عنصر در کد جاوا اسکریپت

const newList = document.createElement("li");

اکنون می‌توانیم به راحتی مقداری محتوا به آن اضافه کنیم newList با استفاده از textContent روش؛

const newList = document.createElement("li");
newList.textContent = "Fourth Item";
console.log(newList)

خروجی “مورد چهارم” خواهد بود.

خیلی جالب است، اینطور نیست؟ با این کار، می‌توانیم به راحتی عناصر و محتوای متنی را تنها در چند خط به کدهای HTML موجود اضافه کنیم. اکنون می‌توانیم این مورد را به عنوان چهارمین آیتم در لیست موجود در کد HTML وارد کنیم.

درج عناصر

ما دیدیم که چگونه می توانیم عناصر را انتخاب و ایجاد کنیم، اکنون می توانیم به راحتی عناصر را در DOM وارد کنیم.

ما به راحتی می توانیم این کار را با استفاده از append() یا appendChild() روش. به عنوان مثال، ما از یکی از اینها برای درج یک لیست جدید به عنوان چهارمین مورد در کد HTML استفاده می کنیم.

<html>
          <head>
                <title>DOM Manipulation</title>
                <script src="./app.js" defer></script>
          </head>
          <body>
            <ul class="parent">
                <li class="child">First Item</li>
               <li class="child">Second Item</li>
                <li class="child">Third Item</li>
             </ul>
         </body>
</html>

const items = document.querySelector("ul")
const newList = document.createElement("li");
newList.textContent = "Fourth Item";
items.appendChild(newList);

در کد قبلی، ul عنصر و در یک متغیر ذخیره می شود items. سپس یک جدید ایجاد می کنیم li عنصر با استفاده از متد createElement، ذخیره آن در متغیر newList. ما به راحتی با استفاده از textElement روش.

برای اضافه کردن newList به آیتم ها، در حین پاس دادن از روش الحاق استفاده می کنیم newList به عنوان پارامتر لیست به روز شده به روز می شود؛

First Item
Second Item
Third Item
Fourth Item

حذف و جایگزینی عناصر

همانطور که می‌توانیم عناصر را انتخاب و در DOM وارد کنیم، می‌توانیم به راحتی عناصر را با استفاده از DOM از DOM حذف کنیم remove() روش.

به عنوان مثال، اجازه دهید با این روش اولین مورد را از لیست حذف کنیم. ابتدا اولین مورد را انتخاب می کنیم li عنصر با استفاده از querySelector و ذخیره آن در یک متغیر firstItem.

const firstItem = document.querySelector("li");
firstItem.remove();
document.querySelector("li");

با استفاده از remove() به روش، اولین لیست را از لیست HTML حذف کردیم که اکنون به روز رسانی می شود:

Second Item
Third Item

در مواردی که می خواهیم عنصر را جایگزین کنیم و از شر آنها خلاص نشویم، می توانیم از آن استفاده کنیم replaceWith() روش.

const newList = document.createElement("li");
newList.textContent = "Fourth Item";
const firstItem = document.querySelector("li")
firstItem.replaceWith(newList);

لیست به روز رسانی می شود:

Fourth Item               
Second Item
Third Item

ما می توانیم یک Node را با استفاده از آن کلون کنیم cloneNode() روش. این یک گره کاملاً جدید را برمی گرداند و گره قدیمی را حفظ می کند. یک آرگومان اختیاری می گیرد که یک آرگومان بولی است که درست یا نادرست است.

به طور پیش‌فرض روی false تنظیم می‌شود و در این حالت فقط عنصر انتخاب شده بدون هیچ عنصر تودرتو کلون می‌شود.

کپی 🀄

<html>
          <head>
                <title>Cloning DOM Nodes</title>
                <script src="https://dev.to/scofieldidehen/./app.js" defer></script>
          </head>
          <body>
            <ul class="parent">
                <li class="child">First Item</li>
               <li class="child">Second Item</li>
                <li class="child">Third Item</li>
             </ul>
         </body>
</html>

const items = document.querySelector("ul");
const clone = items.cloneNode(false);
console.log(clone);

خروجی خواهد بود

<ul class="parent"> </ul>

هنگامی که آرگومان درست باشد، همه فرزندان عنصر انتخاب شده شبیه سازی می شوند.

const items = document.querySelector("ul");
const clone = items.cloneNode(true);
console.log(clone);

خروجی در کنسول این خواهد بود:

         <ul class="parent">
                <li class="child">First Item</li>
               <li class="child">Second Item</li>
                <li class="child">Third Item</li>
           </ul>

نتیجه

در این مقاله، نحوه استفاده و تکرار Javascript Dom را در پروژه خود یاد گرفتید.

اگر این پست را هیجان‌انگیز می‌دانید، پست‌های هیجان‌انگیز بیشتری را در بلاگ Learnhub بیابید. ما همه چیزهای فنی از رایانش ابری گرفته تا Frontend Dev، Cybersecurity، AI و Blockchain را می نویسیم.