انتخاب المنت های html توسط Js

در این محصول با عنوان انتخاب المنت های html توسط Js، فایلی به نام JsSelector.js موجود می باشد که برای استفاده از کد ها باید این فایل را در پروژه html خود اضافه کنید نحوه اضافه کردن script به پروژه خود در فایل راهنما ذکر شده. فایل راهنما با اسم README.md می باشد و برای نمایش بهتر باید از Markdown reader استفاده کنید.

Thank you for reading this post, don't forget to subscribe!

لازم به ذکر هست که اگر از phpstorm استفاده می‌کنید فایل های .md یا همان markdown رو ساپورت میکنه و میتونید بدون استفاده از برنامه های جانبی فرمت مارک‌داون رو رندر کنید.

این پروژه اوپن سورس هست و کاملا رایگان هستش نحوه استفاده در فایل README.md به صورت انگلیسی نوشته شده اما چون ممکنه مقداری ضعف در نوشتار انگلیسی وجود داشته باشه به طور کامل (بدون راهنمای نصب) در اینجا قرار میگیره.

برای استفاده از این کتابخونه لازم هست که حتما زبان برنامه نویسی Js رو تا حدی بلد باشید.

انتخاب المنت های html توسط Js – نحوه استفاده

برای انتخاب المنت های html توسط Js به صورت که در Css از سلکتور ها استفاده می کنیم هست یعنی برای انتخاب گروهی از کلاس ها : .class_name برای انتخاب آیدی های: #id برای انتخاب یک المنت element_name و… دقیقا مثل Css

برای ساخت یک شئ جدید (بعد از اضافه کردن فایل پروژه):

let Selector = new JsSelector(Selecting);

خروجی کد بالا:

به جای Selecting باید سلکتور مورد نظرتون که در بالا ذکر شد هرچی در Css قابل استفاده هست اینجا هم می شه استفاده کرد رو به صورت String وارد کنید؛ برای نمونه من می خوام تمامی تگ هایی که اتریبیوت Selector رو دارن رو می خوام بگیرم:

let Selector = new JsSelector("[Selector]");

حالا می خوام بگم روی هرکدومشون کلیک شد مقداری رو آلرت کن :

let Selector = new JsSelector("[Selector]");

Selector.addEventListener("click", function(){
        alert("Hey");
});

 

 

خوب حالا بریم سراغ قسمت های دیگه مثل اضافه کردن کلاس حذف کلاس و اضافه و حذف به صورت Toglle یعنی اگر وجود داشت حذف می کنه اگر نبود اضافه می کنه:

 

let Selector = new JsSelector(".my_classes");
Selector.AddClass("class_name");

به این شکل یک کلاس اضافه میشه و اما اگر بخواهیم کلاس رو حذف کنیم باید از کد زیر استفاده کنیم:

 

let Selector = new JsSelector(".my_classes");
Selector.RemoveClass("class_name");

 

 

و در نهایت برای حالت toglle که اگر نبود اضافه شه و اگر بود حذف بشه باید به صورت زیر عمل کنیم :

 

let Selector = new JsSelector(".my_classes");
Selector.ToggleClass("class_name");

 

 

خوب تا اینجا خیلی عادی و راحت بود و اگر به کد های کتابخونه نگاهی بندازید میبیند کد خواستی براش نوشته نشده اما در ادامه مقداری پیشرفته تر میشه (البته قرار در آپدیت های آیند قابلیت های بیسار خفنی اضافه بشه برای اینکه راحت تر باشید در استفاده از این لایبرری)

 

همه ی حالت های بالا رو در قسمت id هم داریم اما همین طور که می‌دونید خود js هیچ کد خواستی مبنی بر تغییرات بر روی آیدی ها رو برای ما نداده و فقط برای کلاس ها ارائه کرده

 

اضافه کردن آیدی :

 

let Selector = new JsSelector(".my_classes");
Selector.AddId("id_name");

 

حذف آیدی:

let Selector = new JsSelector(".my_classes");
Selector.RemoveId("id_name");

و در نهایت toglle id:

let Selector = new JsSelector(".my_classes");
Selector.RemoveId("id_name");

 

 

و آخرین قسمتی که تا به امروز 7:11:2022 داره این هست که میتونید استایل هم به اون المنت سلکت شده بدید:

let Selector = new JsSelector(".my_classes");
Selector.setStyle("color: red", "background-color: #fff", "font-size: 12px");

به مقدار setStyle میتونید بی نهایت پارامتر بدید

 

 

آپدیت محصول

در آپدیت ورژن 1.1 برخی از مشکلات فیکس شدند و قابلیت های زیر اضافه شده اند نسخه جدید رو میتونید از لینک دانلود تهیه کنید.

ست کردن اتریبیوت:

let Selector = new JsSelector(".my_classes");


Selector.setAttribute("name", "value");

 

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

 

عملیات کلیک: خوب شاید سوال باشه براتون که عملیات کلیک رو مگه نمیشه با متود addEventListener داخل خود کتابخونه استفاده کنیم؟ جواب اینه که چرا میشه اما اینجا قابلیت های بیشتری داریم مثلا شما می خواهید اتریبیوت یکی از المنت های که روش کلیک شد رو بگیرید چطوری این کارو می کنید ؟

حوب توی addEventListener نمیتونستید این کارو کنید اما حالا این امکان فراهم شده و متیونید همه کار رو انجام بدید:

let Selector = new JsSelector(".my_classes");


Selector.Onclick(function (){
    console.log("This test");
});

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

توی متود addEventListener برای گرفتن اطلاعات ایونت به این شکل استفاده می کردیم:

let Selector = new JsSelector(".my_classes");
Selector.addEventListener("click", function (e){
    alert(e);
});

اما در متود Onclick دیگه نمیتونیم این کار رو انجام بدیم و باید به شکل زیر عمل کنیم:

let Selector = new JsSelector(".my_classes");


Selector.Onclick(function (){
    console.log(Selector.event);
});

 

حالا اطلاعات کامل ایونت رو براتون لاگ میگیره و میتونید استفاده کنید؛ حالا رسیدیم به بخش آخر ، چطوری باید یک اتریبیوت رو بگیریم؟ به شکل زیر عمل  می کنیم :

let Selector = new JsSelector(".my_classes");


Selector.Onclick(function (){
    console.log(Selector.Attributes);
}, "Attributes1", "Attributes2");

به جای Attributes1 باید اسم Attribute رو وارد کنید و میتونید بی نهایت هم در انتها اسم اتریبیوت وارد کنید در نهایت با استفاده از Selector.Attributes میتونید اون اتریبیوت وارد شده رو مقدار داخلش رو بگیرید مثلا من می خوام مقدار اتریبیوت Attributes1 رو بگیرم باید به شکل زیر عمل کنم :

let Selector = new JsSelector(".my_classes");


Selector.Onclick(function (){
    console.log(Selector.Attributes[0]); // result: value of Attributes1
}, "Attributes1", "Attributes2");