صفحه اصلی / تلگرام / اموزش HTML DOM Elements , دسترسی به یک عنصر در Dom

اموزش HTML DOM Elements , دسترسی به یک عنصر در Dom

مجموعه اموزش HTML DOM Elements در Javascript

دسترسی به یک عنصر در Dom

با سلام خدمت شما بازدیدکنندگان گرامی مجله اینترنتی شماسافت در این پست از مبحث توسعه و برنامه نویسی – javascript (جاوا اسکریپت) قصد اموزش HTML DOM Elements , دسترسی به یک عنصر در Dom را داریم. یادگیری این مطلب درواقع سرآغاز مباحث تکمیلی مبحث با اهمیت dom می باشد.

 

خاصیت Dom :

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

مدل کامل Dom به شکل زیر می باشد.

اموزش HTML DOM Elements , دسترسی به یک عنصر در Dom

 

 

دسترسی به یک عنصر در Dom :

برای دسترسی به یک عنصر راه های زیر امکان پذیر می باشد.

  1. getElementById : گرفتن یک عنصر به کمک id ان (در این صورت باید خصوصیت id در عنصر مربوطه تعریف شده باشد)
  2. getElementsByClassName : گرفتن یک عنصر به کمک class ان (در این صورت باید خصوصیت class در عنصر مربوطه تعریف شده باشد)
  3. getElementsByTagName : گرفتن یک عنصر به کمک نام تگ ان
  4. getElementsByName : گرفتن یک عنصر به کمک نام ان (در این صورت باید خصوصیت name در عنصر مربوطه تعریف شده باشد)

متداول ترین روش و ساده ترین روش برای دسترسی به یک عنصر از طریق id ان می باشد.

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

در کد بالا یک متغیر با نام دلخواه تعریف کردیم که یک عنصر با ای دی دلخواه را از صفحه وب کنترل میکند.

 

برای انکه این مبحث را به خوبی یادگرفته باشید به مثال زیر توجه کنید.

ابتدا یک پاراگراف را به کمک خاصیت dom انتخاب و سپس به ان به کمک innerhtml یک کد html اضافه میکنیم. کد ها و پیشنمایش را در زیر میتوانید ببنید.

See the Pen rGJgGZ by s,mohamamd hosein abedy (@shomasoft) on CodePen.

 

ممنون از اینکه تا اخر این مطلب همراه ما بودید به زودی اموزش های تکمیلی بروی سایت قرار خواهد گرفت. شما میتوانید نظرات و سوالات خود را نیز در قسمت دیدگاه برای ما ارسال کنید.

 

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *