خانه انتخاب افزودن ویژگی جاوا اسکریپت دستکاری ویژگی های عنصر در جی کوئری آیا میدان خالی است

افزودن ویژگی جاوا اسکریپت دستکاری ویژگی های عنصر در جی کوئری آیا میدان خالی است

این درس در مورد خواندن و تغییر ویژگی های عناصر در جی کوئری است.

ویژگی ها یک جفت نام/مقدار هستند که به عناصر یک تگ اختصاص داده می شوند. نمونه های ویژگی ( href, عنوان, src, کلاس):

اینم متن خلاصه

attr()برای خواندن، اضافه کردن و تغییر ویژگی ها
removeAttr()برای حذف صفات

این درس با متدهای attr() و removeAttr() سروکار دارد.

برای کار با کلاس های CSS، کلاس های ویژه ای وجود دارد روش های جی کوئریکه در درس دیگری توضیح داده شده است. هنگام کار بر روی یک پروژه در jQuery، اغلب باید کلاس های CSS را دستکاری کنید، و ویژگی کلاسممکن است شامل چندین نام کلاس باشد که کار با آن را بسیار دشوارتر از سایر ویژگی ها می کند.

اگر می خواهید با مقادیر فیلد ورودی کار کنید، بهتر است از متد val() استفاده کنید، که نه تنها نسخه ساده شده ای از ویژگی value را ارائه می دهد، بلکه می تواند مقادیر را در عناصر انتخاب شده از آن بخواند و تنظیم کند. لیست را انتخاب کنید

خواندن مقدار یک ویژگی

خواندن مقدار یک ویژگی عنصر ساده است. تنها کاری که باید انجام دهید این است که متد attr() را روی شی jQuery که حاوی عنصر است فراخوانی کنید و نام ویژگی را برای خواندن به آن ارسال کنید. متد مقدار مشخصه را برمی گرداند:

// نمایش مقدار ویژگی "href" هشدار عنصر #myLink ($("a#myLink").attr("href"));

اگر شی jQuery شما حاوی چندین عنصر باشد، متد attr() فقط مقادیر مشخصه را برای اولین عنصر مجموعه می خواند.

تنظیم مقادیر ویژگی

متد attr() همچنین می تواند برای افزودن یا تغییر مقادیر ویژگی استفاده شود:

اگر صفت وجود ندارددر عنصر، آن را انجام خواهد داد اضافهو مقدار داده شده به آن اختصاص داده خواهد شد.
اگر صفت درحال حاضر وجود دارد، ارزش آن خواهد بود به روز شدمقدار را تنظیم کنید

سه راه برای استفاده از متد ()attr برای افزودن یا تغییر ویژگی ها وجود دارد:

شما می توانید برای هر عنصر (یا مجموعه ای از عناصر) ویژگی ها را اضافه یا تغییر دهید.
می‌توانید با تعیین نقشه‌ای از نام‌ها و مقادیر ویژگی‌ها، چندین ویژگی را به‌طور همزمان برای یک عنصر (یا عناصر) اضافه یا تغییر دهید.
امکان افزودن/تغییر پویا یک ویژگی واحد برای چندین عنصر با استفاده از یک تابع callback وجود دارد.

یک ویژگی را تنظیم کنید

برای تنظیم یا تغییر ویژگی یک عنصر، متد attr() را با نام و مقدار مشخصه فراخوانی کنید. مثلا:

// مقدار ویژگی "href" عنصر #myLink را به "http://www.example.com/" // تغییر دهید (اگر ویژگی "href" وجود نداشته باشد، به طور خودکار ایجاد می شود) $( "a#myLink"). attr("href"، "http://www.example.com/");

همچنین می توان یک ویژگی را روی چندین عنصر تنظیم کرد:

تنظیم چندین ویژگی با استفاده از نقشه

شما می توانید چندین ویژگی را به طور همزمان روی یک یا چند عنصر با استفاده از نقشه تنظیم کنید. این لیستی از جفت نام/مقدار است که به شکل زیر است:

( name1: value1, name2: value2, ... )

مثال زیر دو ویژگی را همزمان روی عنصر img قرار می دهد:

// صفات "src" و "alt" را برای عنصر img #myPhoto تنظیم کنید $("img#myPhoto").attr(( "src": "mypic.jpg"، "alt": "عکس من" )) ;

شما همچنین می توانید ویژگی ها را روی چندین عنصر تنظیم کنید:

// صفات "src" و "alt" را برای همه عناصر img تنظیم کنید $("img").attr(( "src": "mypic.jpg", "alt": "عکس من" ));

تنظیم ویژگی ها با استفاده از عملکرد پاسخ به تماس

به جای ارسال مقادیر مشخصه به متد ()attr، می توانید نام تابع callback را ارسال کنید. به این ترتیب می توانید به صورت پویا مقادیر مشخصه را برای چندین عنصر با توجه به موقعیت عنصر، مقدار مشخصه موجود یا سایر ویژگی ها تنظیم کنید.

تابع بازگشت باید دو آرگومان داشته باشد:

نمایه موقعیت عنصر انتخاب شده در حال حاضر در مجموعه (بر اساس صفر)
مقدار ویژگی قدیمی برای عنصر انتخاب شده فعلی

مقدار بازگشتی تابع برای جایگزینی مقدار مشخصه استفاده می شود.

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

این مثال از یک callback برای افزودن یک ویژگی alt به هر تصویر در صفحه بر اساس موقعیت تصویر و ویژگی src آن استفاده می کند:

پس از اجرای کد، تصویر اول دارای ویژگی alt با مقدار "Picture 1: myphoto.jpg" و تصویر دوم دارای ویژگی alt با مقدار "Picture 2: yourphoto.jpg" خواهد بود.

حذف یک ویژگی

برای حذف یک ویژگی از یک عنصر، متد removeAttr() را فراخوانی کنید و نام ویژگی را برای حذف ارسال کنید. مثلا:

// صفت "title" را از عنصر #myLink حذف کنید $("a#myLink").removeAttr("title");

همچنین می‌توانید متد removeAttr() را روی یک شی jQuery که حاوی چندین عنصر است فراخوانی کنید. متد removeAttr() ویژگی داده شده را از همه عناصر حذف می کند:

// صفت "title" را از همه پیوندها حذف کنید $("a").removeAttr("title");

خلاصه

در این آموزش به مسائل کار با ویژگی های عنصر در جی کوئری پرداختیم:

خواندن ارزش های ویژگی
تنظیم یک ویژگی
تنظیم چندین ویژگی مختلف به طور همزمان
استفاده از تابع callback برای تنظیم پویا مقادیر ویژگی ها در مجموعه ای از عناصر
حذف صفات از یک عنصر

این درس ابتدای موضوع را پوشش می دهد: مدل شی سند (جاوا اسکریپت DOM) اساس HTML پویا است، روش های دسترسی به اشیاء مورد مطالعه قرار می گیرد و راه های مدیریت رویدادهای جاوا اسکریپت در نظر گرفته می شود.

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

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

در جاوا اسکریپت چیزی به نام DOM وجود دارد - مدل شیء سند- مدل شی از یک صفحه وب (صفحه html).
تگ های سند یا همانطور که می گویند گره های سند اشیاء آن هستند.

بیایید به نمودار نگاه کنیم سلسله مراتب شی در جاوا اسکریپتو شیء سند مورد نظر در کجای سلسله مراتب قرار دارد.

عنصر اسکریپت دارای ویژگی هایی است:

defer (منتظر بمانید تا صفحه به طور کامل بارگیری شود).

مثال:

ویژگی ها و ویژگی های شی سند در جاوا اسکریپت

شی سند یک صفحه وب را نشان می دهد.

مهم:برای دسترسی به خواص و متدهای یک شی در جاوا اسکریپت، مانند سایر اشیاء، از علامت نقطه استفاده می شود:

آن ها ابتدا خود شی نوشته می شود، سپس ویژگی، ویژگی یا روش آن با نقطه و بدون فاصله نشان داده می شود

object.property object.attribute object.method()

به یک مثال توجه کنید:

مثال:اجازه دهید سند html دارای یک برچسب باشد

عنصر من

و مخصوص اوست سبک css(حتی دو سبک، دومی برای تکلیف مفید است):

لازم:

یک ویژگی شی جدید تنظیم کنید، یک مقدار به آن اختصاص دهید و آن مقدار را خروجی بگیرید.
نمایش مقدار یک ویژگی شی.
مقدار یک ویژگی یک شی را تغییر دهید.

بیایید کار را به ترتیب انجام دهیم:
✍ راه حل:

از آنجایی که آن را زبان جاوا اسکریپت، سپس شی را می توان اختراع کرد و هر ویژگی را با هر مقداری تنظیم کرد. اما ابتدا اجازه دهید به شیء دسترسی پیدا کنیم (دسترسی به شیء بعداً در این درس به تفصیل مورد بحث قرار خواهد گرفت):

// با شناسه آن به شیء دسترسی پیدا کنید var element = document.getElementById("MyElem"); element.myProperty = 5; // اختصاص هشدار ویژگی (element.myProperty); // در کادر محاوره ای نمایش داده شود

وظیفه بعدی مربوط به ویژگی شی است. ویژگی شیویژگی های برچسب هستند. آن ها در مورد ما دو مورد وجود دارد: ویژگی class با مقدار small و ویژگی id. ما با ویژگی class کار خواهیم کرد.

حالا بیایید مقداری کد جاوا اسکریپت اضافه کنیم تا مقدار ویژگی شی ما نمایش داده شود. کد باید باشد بعد ازبرچسب های اصلی:

// با شناسه آن به شیء دسترسی پیدا کنید var element = document.getElementById("MyElem"); alert(element.getAttribute("کلاس")); // در کادر محاوره ای نمایش داده شود

و آخرین کار: تغییر مقدار ویژگی. برای این ما یک سبک آماده کرده ایم بزرگ. مقدار ویژگی class را به این سبک تغییر دهید:

// با شناسه آن به شیء دسترسی پیدا کنید var element = document.getElementById("MyElem"); element.setAttribute("کلاس"،"بزرگ");

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

حال بیایید نگاهی دقیق تر به روش های استفاده شده در مثال برای کار با ویژگی ها بیندازیم.

روش هایی برای دستکاری ویژگی ها در جاوا اسکریپت

ویژگی ها را می توان اضافه، حذف و اصلاح کرد. روش های خاصی برای این کار وجود دارد:

افزودن یک ویژگی (تعیین مقدار جدید برای آن):

getAttribute(attr)

بررسی وجود این ویژگی:

removeAttribute(attr)

روش های مختلف کار با ویژگی ها

مثال:مقدار ویژگی ارزش بلوک متن را چاپ کنید.

✍ راه حل:

اجازه دهید یک بلوک متنی وجود داشته باشد:

varelem = document.getElementById("MyElem"); var x = "ارزش";

چندین روش برای بدست آوردن مقدار یک ویژگی در نظر بگیرید (برای خروجی، استفاده کنید روش هشدار()):

elem.getAttribute("ارزش")

elem.getAttribute ("مقدار")

2. علامت نقطه:

elem.ویژگی ها .value

elem.attributes.value

3. نماد براکت:

مقادیر مشخصه را تنظیم کنید

var x = "کلید"; // کلید - نام ویژگی، val - مقدار ویژگی // 1. elem.setAttribute("key", "val") // 2. elem.attributes.key = "val" // 3. elem.attributes[" key "] = "val" // 4. elem.setAttribute(x، "val")

خواص عنصر بدن

از طریق شیء document، می توانید به بدنه سند - تگ body - با برخی از ویژگی های مفید آن دسترسی داشته باشید.

به عنوان مثال، تگ body دو ویژگی دارد: عرض و ارتفاع پنجره مشتری:

document.body.clientHeight - ارتفاع پنجره مشتری
document.body.clientWidth - عرض پنجره مشتری

اما مهمترین چیز همانطور که قبلاً آموختیم این است که از طریق شیء document، از طریق متدهای خاص، به تمام عناصر صفحه، یعنی تگ ها دسترسی پیدا می شود.

مهم:هنگام دسترسی به تگ های صفحه مانند این، اسکریپت باید در انتهای درخت عنصر، قبل از بدنه بسته شود! از آنجایی که تا زمان اجرای اسکریپت، تمام عناصر باید قبلاً توسط مرورگر بر روی صفحه نمایش داده شوند.

شغل js8_1. یک پیام در مورد اندازه پنجره مرورگر چاپ کنید: به عنوان مثال، "ابعاد پنجره مرورگر 600*400"

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

چندین گزینه برای دسترسی به اشیا یا جستجوی اشیا وجود دارد:

جستجو بر اساس شناسه(یا متد getElementById)، یک عنصر خاص را برمی گرداند
جستجو بر اساس نام برچسب(یا متد getElementsByTagName)، آرایه ای از عناصر را برمی گرداند
جستجو بر اساس ویژگی نام(یا متد getElementsByName)، آرایه ای از عناصر را برمی گرداند
از طریق عناصر والد(به دست آوردن همه فرزندان)

بیایید هر یک از گزینه ها را با جزئیات بیشتری در نظر بگیریم.

دسترسی به یک عنصر از طریق ویژگی id آن

نحو: document.getElementById(id)

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

مثال:صفحه دارای یک فیلد متنی با ویژگی id="cake" است:

...

ضروری است

✍ راه حل:

alert(document.getElementById("کیک").value); // "تعداد کیک" را برمی گرداند

شما می توانید همین کار را با اجرای یک فراخوانی شی انجام دهید از طریق یک متغیر:

var a=document.getElementById("کیک"); هشدار(a.value); // مقدار مشخصه value را خروجی می کند، یعنی. متن "تعداد کیک"

مهم:اسکریپت باید بعد از تگ قرار گیرد!

دسترسی به آرایه ای از عناصر از طریق نام تگ نام و از طریق فهرست آرایه

نحو:
document.getElementsByTagName(name);

مثال:صفحه دارای یک فیلد متنی (برچسب ورودی) با ویژگی مقدار است:

...

ضروری است: مقدار ویژگی مقدار آن را چاپ کنید

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

✍ راه حل:

var a =document.getElementsByTagName("input"); هشدار(a.value); // "تعداد کیک" را برمی گرداند

دسترسی به آرایه ای از عناصر با مقدار مشخصه name

نحو:
document.getElementsByName(name);

متد getElementsByName("...") برمی گردد آرایه ای از اشیاء، که ویژگی نام آن برابر با مقدار مشخص شده به عنوان پارامتر متد است. اگر فقط یک عنصر در صفحه وجود داشته باشد، روش همچنان یک آرایه (فقط با یک عنصر منفرد) را برمی‌گرداند.

مثال:فرض کنید یک عنصر در سند وجود دارد:

var element = document.getElementsByName("MyElem"); هشدار(element.value);

AT این مثالفقط یک عنصر وجود دارد، اما مرجع به عنصر صفر آرایه است.

مهم: این روش فقط با عناصری کار می کند که مشخصه name به صراحت در مشخصات ارائه شده است: اینها تگ های فرم، ورودی، a، انتخاب، textarea و تعدادی تگ نادر دیگر هستند.

متد document.getElementsByName روی عناصر دیگر مانند div، p و غیره کار نخواهد کرد.

دسترسی به فرزندان عنصر والد

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

document.getElementById (والد) .childNodes ;
document.getElementById(parent).childNodes;

مثالی را در نظر بگیرید که در آن تگ های تصویر در یک ظرف پیچیده شده اند، یک تگ div. بنابراین، تگ div والد این تصاویر است و خود تگ های img به ترتیب فرزندان تگ div هستند:

حالا بیایید خروجی به پنجره مودالمقادیر عناصر آرایه با فرزندان، یعنی. برچسب های img:

var myDiv=document.getElementById("div_for_img"); // دسترسی به محفظه والد var childMas=myDiv.childNodes; // آرایه ای از فرزندان برای (var i = 0؛ i< childMas.length;i++){ alert(childMas[i].src); }

توجه داشته باشید که استفاده از یک حلقه برای تکرار روی عناصر یک آرایه از کودکان راحت است. آن ها در مثال ما یک چرخه دریافت می کنیم:

... برای (var a در childMas) ( هشدار(childMas[ a] .src ) ;)

برای (var a در childMas)( alert(childMas[a].src);)

راه های دیگر برای دسترسی به عناصر

راه های دیگر را در نظر بگیرید مثلا:

<بدن> <formname="f"> <نوع ورودی = "text" id="t"> <نوع ورودی = "button" id = "b" value = "(!LANG:button" > !} <id="s" name="ss"> را انتخاب کنید <گزینه id = "o1" > 1</option> <گزینه id = "o2" > 3</option> <گزینه id = "o3" > 4</option> </انتخاب> </form>

دسترسی:

... // عناصر دسترسی ناخواسته و منسوخ شده: alert(document.forms [ 0 ] .name ) ; // f alert(document.forms [ 0 ] . Elements [ 0 ] .type ) ; // text alert(document.forms [0] .elements [2] .options [1] .id); // هشدار o2(document.f .b .type) ; // هشدار دکمه (document.f .s .name ) ; // ss alert(document.f .s .options [ 1 ] .id ) ; // o2 // دسترسی عناصر ترجیحی alert(document.getElementById("t") .type) ; // text alert(document.getElementById("s" ) .name ) ; // ss alert(document.getElementById ("s") .options [ 1 ] .id ) ; // 02 alert(document.getElementById("o3" ) .text ) ; // چهار ...

... // عناصر دسترسی ناخواسته و منسوخ شده: alert(document.forms.name); // f alert(document.forms.elements.type); // هشدار متن (document.forms.elements.options.id); // هشدار o2(document.f.b.type); // هشدار دکمه (document.f.s.name); // ss alert(document.f.s.options.id); // o2 // هشدار دسترسی عناصر ترجیحی(document.getElementById("t").type); // text alert(document.getElementById("s").name); // ss alert(document.getElementById("s").options.id); // 02 alert(document.getElementById("o3").text); // چهار ...

مثال:یک دکمه و یک فیلد متنی در یک سند html ایجاد کنید. با استفاده از یک اسکریپت، پس زمینه دکمه را رنگی کنید (ویژگی style.backgroundColor دکمه) و یک کتیبه نمایش دهید "سلام!"در قسمت متن (ویژگی مقدار).

کد Html:

document.getElementById("t1").value = "(!LANG:سلام!"; document.getElementById("b1").style.backgroundColor = "red";!}

گزینه 2:

document.getElementById ("t1") .setAttribute ("value" , "Hi!") ; document.getElementById("b1" ) .style .backgroundColor = "red" ;

document.getElementById("t1").setAttribute("value","Hello!"); document.getElementById("b1").style.backgroundColor = "قرمز";

وظیفه Js8_2.تگ های فیلد متنی را مطابق تصویر در شکل ایجاد کنید. مقادیر مشخصه id مناسب (نشان داده شده در شکل) را به آنها بدهید. با استفاده از اسکریپت، مقدار "0" را به تمام فیلدهای عددی اضافه کنید (با فرض مقادیر عددی)

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

آیا میدان خالی مانده است؟

داده های ارائه شده توسط کاربر قابل اعتماد نیست. این غیر منطقی است که فرض کنیم کاربران هنگام وارد کردن داده ها آنها را بررسی می کنند. بنابراین برای این کار باید از جاوا اسکریپت استفاده کنید.

به منظور بررسی آیا قسمت متن خالی است(به عنوان مثال، پس از پر کردن داده های یک پرسشنامه توسط کاربر)، باید به ویژگی value مراجعه کنید. اگر مقدار ویژگی یک رشته خالی ("") باشد، باید به نحوی کاربر را در این مورد مطلع کنید.

if(document.getElementById("name").value=="") ( برخی از اقدامات، به عنوان مثال، نمایش یک پیام با الزام برای پر کردن فیلد );

علاوه بر این، شما می توانید بدون اسکریپت انجام دهید. برچسب بزنید ورودی متنفیلدها دارای ویژگی الگو هستند. همانطور که مقدار آن نشان داده شده است عبارت منظمبرای اعتبارسنجی داده ها در فیلد متنی فرم داده شده. اگر صفت موجود باشد الگو، تا زمانی که آن فیلد متنی به درستی پر نشود، فرم ارسال نمی شود.
به عنوان مثال، برای بررسی اینکه آیا یک فیلد خالی مانده است:

متن به جای یک مقدار عددی: تابع isNaN

اگر میدان باشد وارد کردن یک مقدار عددیو در عوض کاربر متن را وارد می کند، لازم است از تابع isNaN (از انگلیسی. "این یک عدد نیست؟") که نوع ورودی را بررسی می کند و اگر ورودی به جای عددی، متن باشد، مقدار true را برمی گرداند.

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

if(isNaN(document.getElementById("minutes").value))( هشداری که از شما می خواهد داده های عددی را وارد کنید );

صفحه ای با عناصر برای پر کردن داده می شود:

قطعه کد html:

1 2 3 4 5 6 7 8 9 10 11 12

<فرم >نام:<نوع ورودی = "text" id="name">
تعداد دونات:<نوع ورودی = "متن" id="دونات" >
دقایق:<نوع ورودی = "text" id="minutes">
جمع فرعی:<نوع ورودی = "text" id="subitog" >
مالیات:<نوع ورودی = "text" id="tax">
نتیجه:<نوع ورودی = "text" id="total">
<نوع ورودی = "submit" value = "(!LANG:submit" onclick = "placeOrder();" > !} </form> <نوع اسکریپت = "text/javascript"> ... </script>

لازم:
جاهای خالی را در قطعه کد زیر پر کنید تا بررسی شود که دو فیلد متنی به درستی پر شده باشند: نام(id=نام) و دقایق(id = "دقیقه"). از یک چک برای خالی گذاشتن فیلد ("") و فرمت صحیح برای پر کردن فیلد عددی (isNaN) استفاده کنید.

* کار را با ویژگی الگوی فیلدهای متنی با استفاده از .

قطعه اسکریپت:

در کد برای ساخت استفاده می شود شرایط سختزودتر گذشت

یک مفهوم جدید برای شما فراخوانی یک تابع به عنوان کنترل کننده رویداد دکمه است:
onclick="placeOrder();"
هنگامی که دکمه کلیک می شود، تابع ()placeOrder فراخوانی می شود.

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

چگونه یک ویژگی با ویژگی DOM متفاوت است؟

ویژگی ها موجودیت های HTML هستند که با آنها می توانیم داده های خاصی را به عناصر کد HTML اضافه کنیم.

هنگامی که یک مرورگر صفحه ای را درخواست می کند، کد HTML منبع آن را دریافت می کند. پس از آن، این کد را تجزیه می کند و بر اساس آن یک DOM می سازد. طی این فرآیند ویژگی های عنصر HTML به ویژگی های DOM مربوطه خود ترجمه می شوند.

برای مثال، مرورگر هنگام خواندن خط کد HTML زیر، ویژگی‌های DOM زیر را برای این عنصر ایجاد می‌کند: id، className، src، و alt.

این ویژگی ها در کد جاوا اسکریپت به عنوان ویژگی های شی قابل دسترسی هستند. شی در اینجا یک گره (عنصر) DOM است.

مثالی که در آن مقادیر ویژگی های DOM را برای عنصر بالا دریافت می کنیم و مقادیر آنها را در کنسول چاپ می کنیم:

// دریافت عنصر var brandImg = document.querySelector("#brand"); // نمایش مقادیر ویژگی های DOM عنصر console.log(brandImg.id); // "brand" console.log(brandImg.className); // "brand" console.log(brandImg.src); // "/logo.svg?2" console.log(brandImg.alt); // "لوگوی سایت"

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

نکته ظریف دیگر به این واقعیت مربوط می شود که ترجمه ویژگی های HTML مشخص شده در کد منبعسند، ویژگی های DOM همیشه یک به یک پیاده سازی نمی شوند.

اگر عنصری دارای یک ویژگی HTML غیر استاندارد باشد، هیچ خاصیت مربوط به آن در DOM ایجاد نمی شود.

تفاوت دیگر این است که مقادیر برخی از ویژگی های HTML و ویژگی های DOM مربوطه آنها می تواند متفاوت باشد. آن ها یک ویژگی می تواند یک مقدار داشته باشد و یک ویژگی DOM ایجاد شده از آن می تواند مقدار دیگری داشته باشد.

یکی از این ویژگی ها بررسی می شود.

مقدار مشخصه HTML بررسی شده در این مورد رشته خالی است. اما ویژگی مربوط به این ویژگی در DOM روی true تنظیم می شود. زیرا طبق قوانین استاندارد، برای تنظیم true، فقط ذکر این ویژگی در کد HTML کافی است و مهم نیست که چه مقداری خواهد داشت.

در این حالت، حتی اگر ویژگی checked را در کد HTML برای عنصر ورودی با نوع چک باکس مشخص نکنیم، باز هم ویژگی checked برای آن در DOM ایجاد می‌شود، اما برابر با false خواهد بود.

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

در این صورت باید بدانید که وقتی ویژگی DOM یک عنصر را تغییر می دهیم، ویژگی مربوط به آن نیز تغییر می کند و بالعکس. اما این فرآیند در مرورگرها همیشه یک به یک انجام نمی شود.

تفاوت های اصلی بین ویژگی ها و ویژگی های DOM عبارتند از:

مقدار یک ویژگی همیشه یک رشته است و مقدار یک ویژگی DOM یک نوع داده خاص است (نه لزوماً یک رشته).
نام خصیصه به حروف بزرگ و کوچک حساس است و خصوصیات DOM به حروف بزرگ و کوچک حساس هستند. آن ها در کد HTML می‌توانیم به عنوان مثال شناسه ویژگی HTML را به صورت ID، ID و غیره بنویسیم. همین امر در مورد نام ویژگی که در قسمت ویژه مشخص می کنیم نیز صدق می کند روش های جاوا اسکریپتتا با او کار کند. اما ما می توانیم به ویژگی DOM مربوطه فقط با id دسترسی داشته باشیم و نه چیز دیگری.

کار با ویژگی های DOM یک عنصر

همانطور که در بالا ذکر شد، کار با ویژگی های عناصر در جاوا اسکریپت مانند ویژگی های اشیا انجام می شود.

اما برای رجوع به خاصیت فلان عنصر ابتدا باید آن را به دست آورد. می توانید یک عنصر DOM را در جاوا اسکریپت دریافت کنید، به عنوان مثال، با استفاده از روش querySelector عمومی، و مجموعه ای از عناصر DOM، به عنوان مثال، با استفاده از querySelectorAll.

به عنوان مثال اول، عنصر HTML زیر را در نظر بگیرید:

متن پیام...

بر اساس آن، نحوه به دست آوردن، تغییر و افزودن ویژگی های DOM را تجزیه و تحلیل خواهیم کرد.

خواندن مقادیر ویژگی DOM:

// مقدار DOM ویژگی id را دریافت کنید var alertId = alert.id; // "alert" // مقدار ویژگی DOM را دریافت کنید className var alertClass = alert. className; // "alert alert-info" // دریافت مقدار DOM ویژگی عنوان var alertId = alert.title; // "متن راهنمایی..."

تغییر مقادیر ویژگی DOM:

// برای تغییر مقدار یک ویژگی DOM، فقط باید یک مقدار جدید به آن اختصاص دهید alert.title = "(!LANG:New tooltip text"; // присвоим DOM-свойству title элемента новое значение // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alertId = "Новый текст подсказки"; // или так (т.к. обращение к этому свойству мы уже сохранили в переменную alertId) alert.className = "alert alert-warning"; !}

افزودن ویژگی های DOM:

Alert.lang = "ru"; // ویژگی lang را روی "ru" قرار دهید alert.dir = "ltr"; // ویژگی dir را روی "ltr" قرار دهید

مثالی که در آن تمام مقادیر کلاسی که عناصر p در صفحه دارند را به کنسول خروجی می دهیم:

Var paragraphs = document.querySelectorAll("p"); برای (var i = 0، طول = پاراگراف. طول ؛ i< length; i++) { if (paragraphs[i].className) { console.log(paragraphs[i].className); }

مثالی که در آن ویژگی lang همه عناصر با کلاس محتوا را روی "ru" قرار می دهیم:

Var contents = document.querySelectorAll(.content"); برای (var i = 0، طول = contents.length؛ i< length; i++) { contents[i].lang = "ru"; }

ویژگی های عناصر و روش های کار با آنها

ویژگی ها در ابتدا در کد HTML تنظیم می شوند. اگرچه آنها به نوعی با خواص مرتبط هستند، اما یک چیز نیستند. در بیشتر موارد، شما باید با ویژگی ها کار کنید و فقط زمانی که واقعاً به آن نیاز دارید به ویژگی ها دسترسی داشته باشید.

همانطور که در بالا ذکر شد، بر خلاف ویژگی های DOM، مقادیر مشخصه همیشه رشته هستند.

جاوا اسکریپت چهار روش برای انجام عملیات مرتبط با ویژگی دارد:

.hasAttribute("ویژگی_نام") - بررسی می کند که آیا عنصر دارای ویژگی مشخص شده است یا خیر. اگر مشخصه ای که بررسی می شود روی عنصر باشد، پس این روشدرست است و در غیر این صورت false است.
.getAttribute("ویژگی_نام") - مقدار ویژگی را دریافت می کند. اگر عنصر ویژگی مشخص شده را نداشته باشد، این متد یک رشته خالی ("") یا null برمی گرداند.
.setAttribute("ویژگی_نام"، "ویژگی_مقدار") - ویژگی مشخص شده را با مقدار مشخص شده به عنصر تنظیم می کند. اگر عنصر دارای ویژگی مشخص شده باشد، این روش به سادگی مقدار آن را تغییر می دهد.
.removeAttribute("ویژگی_نام") - ویژگی مشخص شده را از عنصر حذف می کند.

نمونه هایی را در نظر بگیرید.

بسیار مثال جالببا ویژگی ارزش

مثال با ویژگی value

مقدار ویژگی value و خاصیت DOM مقدار را بدست آورید:

// مقدار ویژگی ارزش عنصر name.getAttribute("value") را دریافت کنید. // "Bob" // دریافت مقدار مقدار ویژگی DOM name.value; // "Bob" // مقدار مشخصه value را به روز کنید، آن را به یک مقدار جدید تنظیم کنید name.setAttribute("value", "Tom"); // "Tom" // دریافت مقدار DOM مقدار ویژگی name.value; // "تام"

این مثال نشان می دهد که وقتی ویژگی value تغییر می کند، مرورگر به طور خودکار ویژگی DOM مقدار را مطابق با آن تغییر می دهد.

حالا بیایید برعکس عمل کنیم، یعنی مقدار ویژگی DOM را تغییر دهیم و بررسی کنیم که آیا مقدار ویژگی تغییر می کند یا خیر:

// یک مقدار جدید برای مقدار ویژگی DOM تنظیم کنید name.value = "(!LANG:John"; // получим значение атрибута value у элемента name.getAttribute("value"); // "Tom" !}

این مثال نشان می دهد که تغییر یک ویژگی DOM همیشه منجر به تغییر متناظر در ویژگی نمی شود. آن ها در این حالت، تغییر ویژگی DOM مقدار، ویژگی مربوط به آن را تغییر نمی‌دهد.

هنگامی که کاربر متنی را در این قسمت وارد می کند، همین اتفاق می افتد. ویژگی DOM مقدار حاوی مقدار واقعی خواهد بود و ویژگی مربوطه حاوی مقدار اصلی یا همان چیزی است که برای مثال با استفاده از متد setAttribute تنظیم می کنیم.

این مثال نشان می‌دهد که همیشه کار کردن با ویژگی‌های DOM صحیح‌تر است، و فقط زمانی که واقعاً ضروری است باید به ویژگی دسترسی داشته باشید.

حتی در مواردی که نیاز دارید مقدار اولیه ای را که در HTML تنظیم کرده ایم به دست آورید، می توانید از ویژگی استفاده کنید. ویژگی حاوی مقدار اولیه صفت value defaultValue نامیده می شود.

Name.defaultValue; // تام

یک مثال بسیار جالب دیگر، اما اکنون با ویژگی href.

href مثال

مثالی که در آن باید ارزش پیوند را همانطور که در HTML تنظیم شده است بدست آوریم.

در این مثال، ویژگی href و ویژگی href DOM شامل معانی مختلف. ویژگی href همان چیزی است که در کد تنظیم کرده ایم و ویژگی DOM URL کامل است. این تمایز توسط استانداردی تعیین می شود که مرورگر باید مقدار href را به URL کامل ارسال کند.

بنابراین، اگر ما نیاز به دریافت آنچه در ویژگی داریم، در این صورت نمی توانیم بدون متد getAttribute کار کنیم.

در نهایت، اجازه دهید نگاهی به ویژگی انتخاب شده بیندازیم.

نمونه انتخاب شده

مثالی که نشان می دهد چگونه می توانید مقدار گزینه انتخابی انتخاب شده را بدست آورید:

مثالی که نحوه بدست آوردن مقادیر گزینه انتخابی را در یک عنصر انتخابی نشان می دهد:

روش دیگری برای کار با ویژگی ها (ویژگی ویژگی ها)

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

این روشمی تواند در مواقعی که نیاز دارید استفاده شود، به عنوان مثال روی تمام ویژگی های یک عنصر تکرار کنید.

یک ویژگی در این مجموعه با نمایه آن یا با استفاده از روش آیتم قابل دسترسی است. ویژگی های این مجموعه از 0 شمارش می شود.

به عنوان مثال، بیایید تمام ویژگی های برخی از عناصر را در کنسول نمایش دهیم:

من عاشق جاوا اسکریپت هستم

بعلاوه، همچنین می توانید با استفاده از روش های زیر با این مجموعه کار کنید:

.getNamedItem("ویژگی_نام") - مقدار ویژگی مشخص شده را دریافت می کند (اگر ویژگی مشخص شده روی عنصر وجود نداشته باشد، نتیجه صفر خواهد بود).
.setNamedItem ("ویژگی آیتم") - یک ویژگی جدید به یک عنصر اضافه می کند یا مقدار یک عنصر موجود را به روز می کند. برای ایجاد یک ویژگی، باید از متد document.createAttribute() استفاده کنید که باید نام ویژگی به عنوان پارامتر ارسال شود. پس از آن، ویژگی ایجاد شده باید با استفاده از ویژگی value یک مقدار نسبت داده شود.
.removeNamedItem ("ویژگی_نام") - ویژگی مشخص شده را از عنصر حذف می کند (ویژگی حذف شده را در نتیجه برمی گرداند).

نمونه ای از کار با ویژگی ها از طریق متدهای getNamedItem، setNamedItem و removeNamedItem:

من عاشق جاوا اسکریپت هستم

وظایف

تمام عناصر سند که دارای ویژگی id هستند را در کنسول چاپ کنید.
اگر این ویژگی را ندارند به تمام تصاویر صفحه یک ویژگی عنوان اضافه کنید. مجموعه مقدار مشخصه برابر با ارزشویژگی alt

شما می توانید یک اتصال سفارشی ایجاد کنید اتصالات،که مقدار یک قابل مشاهده خاص را بررسی می کند مقدار بولیقبل از افزودن یا عدم افزودن ویژگی ها این مثال را ببینید:

Ko.bindingHandlers.attrIf = ( به روز رسانی: تابع (عنصر، valueAccessor، allBindingsAccessor) ( var h = ko.utils.unwrapObservable(valueAccessor())؛ var show = ko.utils.unwrapObservable(h._if)؛ if (نمایش) ( ko.bindingHandlers.attr.update(element, valueAccessor, allBindingsAccessor)؛ ) else ( برای (var k در h) ( if (h.hasOwnProperty(k) && k.indexOf("_") !== 0) ( $(element).removeAttr(k); ) ) ) )); ارتباط دادن

ای کاش می توانستم به @gbs پاسخ دهم اما نمی توانم. راه حل من این است که دو تا یکسان داشته باشیم عنصر HTML: یکی با ویژگی، بدون آن و یک شرط حذفی برای اضافه کردن یکی از آنها با توجه به عنصر. من نیز از این انتظار معمول آگاه هستم، اما کدام راه حل کارآمدتر است؟

مقدار یک ویژگی را روی عنصر مشخص شده تنظیم می کند. اگر ویژگی از قبل وجود داشته باشد، مقدار به روز می شود. در غیر این صورت یک ویژگی جدید با نام و مقدار مشخص شده اضافه می شود.

نحو

عنصر.setAttribute( نام, ارزش);

مولفه های

نام یک DOMString که نام مشخصه ای را که مقدار آن تنظیم می شود را مشخص می کند. هنگامی که setAttribute() بر روی یک عنصر HTML در یک سند HTML فراخوانی می شود، نام ویژگی به طور خودکار به حروف کوچک تبدیل می شود. مقدار یک DOMString حاوی مقداری که باید به صفت نسبت داده شود. هر مقدار غیر رشته ای مشخص شده به طور خودکار به رشته تبدیل می شود.

مشخصه های بولی در صورتی درست در نظر گرفته می شوند که اصلاً روی عنصر وجود داشته باشند، صرف نظر از مقدار واقعی آنها؛ به عنوان یک قاعده، باید رشته خالی ("") را در مقدار مشخص کنید (بعضی از افراد از نام ویژگی استفاده می کنند. این کار می کند اما غیر استاندارد است). برای نمایش عملی به زیر مراجعه کنید.

از آنجایی که مقدار مشخص شده به یک رشته تبدیل می شود، مشخص کردن null لزوماً آن چیزی را که شما انتظار دارید انجام نمی دهد. اگر می خواهید یک ویژگی را حذف کنید، removeAttribute() را فراخوانی کنید.

ارزش بازگشتی

استثناها

InvalidCharacterError نام مشخصه مشخص شده حاوی یک یا چند کاراکتر است که در نام ویژگی معتبر نیستند.

مثال

در مثال زیر، setAttribute() برای تنظیم ویژگی ها در یک .

HTML

جاوا اسکریپت

var b = document.querySelector("button"); b.setAttribute("name", "helloButton"); b.setAttribute("غیرفعال"، "");

این دو چیز را نشان می دهد:

اولین فراخوانی به setAttribute() در بالا نشان می دهد که مقدار ویژگی نام را به "helloButton" تغییر می دهد. می توانید این مورد را با استفاده از بازرس صفحه مرورگر خود (Chrome، Edge، Firefox، Safari) مشاهده کنید.
برای تنظیم مقدار یک ویژگی بولی، مانند غیرفعال، می‌توانید هر مقداری را مشخص کنید. یک رشته خالی یا نام ویژگی مقادیر توصیه شده هستند. تنها چیزی که اهمیت دارد این است که اگر این ویژگی اصلا وجود داشته باشد، صرف نظر از ارزش واقعی آن، ارزش آن درست در نظر گرفته می شود. عدم وجود صفت به این معنی است که مقدار آن نادرست است. با تنظیم مقدار مشخصه disabled روی رشته خالی ("")، disabled را روی true قرار می دهیم که منجر به غیرفعال شدن دکمه می شود.

روش‌های DOM که با ویژگی‌های عنصر سروکار دارند:

متداول‌ترین روش‌هایی که از فضای نام آگاه نیستند	انواع با فضای نام (DOM Level 2)	روش های DOM سطح 1 برای برخورد مستقیم با گره های Attr (به ندرت استفاده می شود)	روش‌های آگاه به فضای نام سطح 2 برای برخورد مستقیم با گره‌های Attr (به ندرت استفاده می‌شود)
setAttribute (DOM 1)	setAttributeNS	setAttributeNode	setAttributeNodeNS
getAttribute (DOM 1)	getAttributeNS	getAttributeNode	getAttributeNodeNS
hasAttribute (DOM2)	hasAttributeNS	-	-
removeAttribute (DOM 1)	removeAttributeNS	removeAttributeNode	-

مشخصات

DOM Level 2 Core: setAttribute (معرفی شده در DOM Level 1 Core)

سازگاری مرورگر

جدول سازگاری در این صفحه از داده های ساخت یافته تولید می شود. اگر می‌خواهید در داده‌ها مشارکت کنید، لطفاً https://github.com/mdn/browser-compat-data را بررسی کنید و یک درخواست برای ما ارسال کنید.

داده های سازگاری را در GitHub به روز کنید

	دسکتاپ	سیار
	کروم	حاشیه، غیرمتمرکز	فایرفاکس	اینترنت اکسپلورر	اپرا	سافاری	نمای وب اندروید	کروم برای اندروید	فایرفاکس برای آندروید	اپرا برای اندروید	سافاری در iOS	اینترنت سامسونگ
setAttribute	پشتیبانی کامل کروم بله	پشتیبانی کامل Edge 12	پشتیبانی کامل فایرفاکس بله	پشتیبانی کامل IE 5 یادداشت پشتیبانی کامل 5 یادداشت یادداشت در اینترنت اکسپلورر 7 و نسخه‌های قبلی، setAttribute استایل‌ها را تنظیم نمی‌کند و وقتی می‌خواهید آنها را تنظیم کنید، رویدادها را حذف می‌کند.	پشتیبانی کامل اپرا بله	سافاری پشتیبانی کامل 6	WebView Android پشتیبانی کامل بله	Chrome Android پشتیبانی کامل بله	فایرفاکس اندروید پشتیبانی کامل بله	اپرا اندروید پشتیبانی کامل بله	سافاری iOS پشتیبانی کامل بله	سامسونگ اینترنت اندروید پشتیبانی کامل بله

دسکتاپ

سیار

کروم

حاشیه، غیرمتمرکز

فایرفاکس

اینترنت اکسپلورر

اپرا

سافاری

نمای وب اندروید

کروم برای اندروید

فایرفاکس برای آندروید

اپرا برای اندروید

سافاری در iOS

اینترنت سامسونگ

setAttribute

پشتیبانی کامل کروم بله

پشتیبانی کامل Edge 12

پشتیبانی کامل فایرفاکس بله

پشتیبانی کامل IE 5

یادداشت

پشتیبانی کامل 5

یادداشت

یادداشت در اینترنت اکسپلورر 7 و نسخه‌های قبلی، setAttribute استایل‌ها را تنظیم نمی‌کند و وقتی می‌خواهید آنها را تنظیم کنید، رویدادها را حذف می‌کند.

پشتیبانی کامل اپرا بله

سافاری پشتیبانی کامل 6

WebView Android پشتیبانی کامل بله

Chrome Android پشتیبانی کامل بله

فایرفاکس اندروید پشتیبانی کامل بله

اپرا اندروید پشتیبانی کامل بله

سافاری iOS پشتیبانی کامل بله

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

افسانه

حمایت کاملپشتیبانی کامل به یادداشت های اجرایی مراجعه کنید. به یادداشت های اجرایی مراجعه کنید.

یادداشت های گکو

استفاده از setAttribute() برای تغییر ویژگی های خاص، به ویژه مقدار در XUL، متناقض عمل می کند، زیرا ویژگی مقدار پیش فرض را مشخص می کند. برای دسترسی یا تغییر مقادیر فعلی، باید از ویژگی ها استفاده کنید. به عنوان مثال، به جای Element.setAttribute() از Element.value استفاده کنید.

فقط در مورد مجتمع برنامه ها. اهن. اینترنت. پنجره ها

افزودن ویژگی جاوا اسکریپت دستکاری ویژگی های عنصر در جی کوئری آیا میدان خالی است

خواندن مقدار یک ویژگی

تنظیم مقادیر ویژگی

یک ویژگی را تنظیم کنید

تنظیم چندین ویژگی با استفاده از نقشه

تنظیم ویژگی ها با استفاده از عملکرد پاسخ به تماس

حذف یک ویژگی

خلاصه

ویژگی ها و ویژگی های شی سند در جاوا اسکریپت

روش هایی برای دستکاری ویژگی ها در جاوا اسکریپت

خواص عنصر بدن

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

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

چگونه یک ویژگی با ویژگی DOM متفاوت است؟

کار با ویژگی های DOM یک عنصر

ویژگی های عناصر و روش های کار با آنها

مثال با ویژگی value

href مثال

نمونه انتخاب شده

روش دیگری برای کار با ویژگی ها (ویژگی ویژگی ها)

وظایف

نحو

مولفه های

ارزش بازگشتی

استثناها

مثال

HTML

جاوا اسکریپت

مشخصات

سازگاری مرورگر

افسانه

یادداشت های گکو