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

• به طور کلی، یک شی یک نوع داده ترکیبی است که مقادیر زیادی را در یک واحد مشترک ترکیب می‌کند و اجازه می‌دهد مقادیر با نام آنها در صورت تقاضا ذخیره و بازیابی شوند.

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

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

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

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

defer (منتظر بارگذاری کامل صفحه).

مثال:

/* اجازه می دهد تا فایل های js به صورت موازی بارگیری شوند و بلافاصله پس از بارگیری، بدون انتظار برای پردازش بقیه صفحه اجرا شوند */ /* به مرورگر اجازه می دهد بدون توقف پردازش بیشتر صفحه، بارگیری فایل های js را به صورت موازی شروع کند. اجرای آنها پس از تجزیه کامل مدل شیء سند */

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

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

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

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

object.property object.attribute object.method()

بیایید به یک مثال نگاه کنیم:

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

عنصر من

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

.small( رنگ: قرمز؛ اندازه قلم: کوچک؛ ) .big( رنگ: آبی؛ اندازه قلم: بزرگ؛ )

.small( رنگ: قرمز؛ اندازه قلم: کوچک؛ ) .big( رنگ: آبی؛ اندازه قلم: بزرگ؛ )

لازم:

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

نمایش مقدار یک ویژگی شی.

مقدار یک ویژگی شی را تغییر دهید.

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

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

// با شناسه اش به شی دسترسی پیدا کنید 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)

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

مثال: مقدار مشخصه value یک بلوک متنی را چاپ کنید.

✍ راه حل:

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

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

• بیایید به چندین روش برای بدست آوردن مقدار مشخصه نگاه کنیم (از متد alert() برای خروجی استفاده کنید):

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

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

2. نشانه گذاری نقطه:

elem.attributes.value

elem.attributes.value

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

var element = document.getElementById("t1"); alert(...) element.setAttribute(...);


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

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 دو ویژگی دارد: عرض و ارتفاع پنجره مشتری:

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


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

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

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

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

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

جستجو بر اساس id (یا روش getElementById)، یک عنصر خاص را برمی گرداند

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

جستجو بر اساس ویژگی نام (یا متد getElementsByName)، آرایه ای از عناصر را برمی گرداند

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

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

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

نحو: document.getElementById(id)

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

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

...

ضروری است

✍ راه حل:

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

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

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

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

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

نحو:
document.getElementsByTagName(name);

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

...

Required: نمایش مقدار ویژگی مقدار آن

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

✍ راه حل:

ما به یک عنصر خاص با نمایه دسترسی داریم:

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

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

نحو:
document.getElementsByName(name);

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

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

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

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

مهم:این روش فقط با آن دسته از عناصری کار می کند که ویژگی نام به صراحت در مشخصات ارائه شده است: اینها عبارتند از form، input، a، select، textarea و تعدادی تگ دیگر، نادرتر.

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

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

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

document.getElementById(roditel).childNodes;

document.getElementById(roditel).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);)

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

بیایید با استفاده از یک مثال به روش های دیگر نگاه کنیم:

1 3 4

1 3 4

دسترسی:

... // عناصر دسترسی ناخواسته و منسوخ شده: 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 ) ; // 4 ...

... // روش های دسترسی به عناصر ناخواسته و منسوخ شده: 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 // روش های ترجیحی برای دسترسی به عناصر alert(document.getElementById("t").type); // text alert(document.getElementById("s").name); // ss alert(document.getElementById("s").options.id); // 02 alert(document.getElementById("o3").text); // 4 ...

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

کد HTML:

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

گزینه 2:

document.getElementById ("t1" ) .setAttribute ("value" , ​​"Hello!") ; 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

نام: تعداد دونات: دقایق: خلاصه: مالیات: نتیجه: ...

نام:
تعداد دونات:
دقایق:
خلاصه:
مالیات:
نتیجه:
...

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

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

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

این کد از شرایطی که قبلاً یاد گرفته‌اید برای ساختن شرایط پیچیده استفاده می‌کند.

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

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

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: یکی با ویژگی، بدون آن و یک شرط حذفی برای اضافه کردن یکی از آنها با توجه به عنصر. من نیز از این انتظار رایج آگاهم، اما کدام راه حل کارآمدتر است؟

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

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

در اینجا متن خلاصه است

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

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

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

اگر می خواهید با مقادیر فیلدهای ورودی کار کنید، بهتر است از متد 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 آن استفاده می کند:

$(init); تابع init() (// مشخصه "alt" را برای همه عناصر "img" تنظیم کنید $("img").attr("alt", setAltText)؛ تابع setAltText(index, attributeValue) (بازگشت ("شکل" + (شاخص +1) + ": " + this.src);

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

حذف یک ویژگی

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

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

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

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

خلاصه

این درس مسائل مربوط به کار با ویژگی های عنصر در jQuery را پوشش می دهد:

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

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

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

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

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

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

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

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

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

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

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

روش‌هایی که از فضای نام آگاه نیستند، متداول‌ترین روش‌های مورد استفاده انواع با فضای نام (سطح DOM 2) روش‌های سطح 1 DOM برای برخورد مستقیم با گره‌های Attr (به ندرت استفاده می‌شود) روش‌های آگاه از فضای نام سطح 2 DOM برای برخورد مستقیم با گره‌های 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 به روز کنید

موبایل دسکتاپ Chrome Edge Firefox اینترنت اکسپلورر Opera Safari Android Webview Chrome برای Android Firefox برای Android Opera for Android Safari در iOS اینترنت سامسونگsetAttribute

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

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

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

در این مقاله با ویژگی ها و ویژگی های 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.png" console.log(brandImg.alt); // "لوگوی سایت"

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

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

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

// دریافت عنصر mydiv = document.querySelector("#mydiv"); // مقدار خاصیت alt عنصر را دریافت کنید و آن را به کنسول console.log (mydiv.alt) خروجی دهید. // undefined // مقدار ویژگی alt عنصر را دریافت کنید و آن را به کنسول console.log (mydiv.getAttribute("alt")) خروجی بگیرید. // "..."

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

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

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

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

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

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

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

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

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

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

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

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

متن پیام اطلاعاتی... var alert = document.querySelector("#alert"); // عنصر را دریافت کنید

بر اساس آن، نحوه به دست آوردن ویژگی های 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 = "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.

مثال با ویژگی مقدار var name = document.querySelector("input"); // عنصر را دریافت کنید

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

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

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

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

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

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

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

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

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

Name.defaultValue; //تام

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

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

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

var page2 = document.querySelector("#link"); page2.getAttribute("href"); // page2.html page2.href; // URL کامل، به عنوان مثال: http://localhost/page2.html

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

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

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

مثال با ویژگی انتخاب شده

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

بدون رتبه 1 2 3 4 5 // دریافت عنصر select var mark = document.querySelector("#mark"); // 1 way mark.querySelector("option:checked").value; // روش 2 mark.value;

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

بدون رتبه 1 2 3 4 5 // دریافت عنصر انتخاب var mark = document.querySelector("#مارک"); // روش 1 (با ایجاد یک آرایه و پر کردن آن با مقادیر گزینه های انتخاب شده) var arr = ; برای (var i = 0، طول = mark.options.length؛ i< length; i++) { if (mark.options[i].selected) { arr.push(mark.options[i].value); } } // 2 способ (более современный, с использованием DOM-свойства selectedOptions) var arr = Array.from(mark.selectedOptions, option =>option.value)

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

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

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

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

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

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

// دریافت عنصر با پیام شناسه آن var message = document.querySelector("#message"); // دریافت ویژگی های آن var attrs = message.attributes; // تمام صفات را با استفاده از یک حلقه (attrs.length – تعداد مشخصه ها) برای (var i = 0, length = attrs.length; i) مرور کنید< length; i++) { // attrs[i] или attrs.item(i) – обращение к атрибуту в коллекции по его порядковому номеру // attrs[i].name – имя атрибута // attrs[i].value – значение атрибута (с помощью него можно также изменить значение атрибута) console.log(attrs[i].name + " = " + attrs[i].value); // или с помощью метода item console.log(attrs.item(i).name + " = " + attrs.item(i).value); // пример как можно изменить значение через свойство value // if (attrs[i].name === "class") { // attr[i].value = "اطلاعات"; // } } // в результате выполнения: // id = message // class = text // style = text-align: center;

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

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

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

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

// دریافت عنصر توسط پیام شناسه آن var message = document.querySelector("#message"); // دریافت ویژگی های آن var attrs = message.attributes; // کار شماره 1. مقدار ویژگی id console.log(attrs.getNamedItem("id")) را دریافت کنید. // کار شماره 2. ویژگی را تنظیم کنید (اگر وجود دارد، مقدار آن را تغییر دهید، در غیر این صورت یک ویژگی جدید اضافه کنید) // ویژگی style را ایجاد کنید و آن را در متغیر attrStyle ذخیره کنید var attrStyle = document.createAttribute("style"); // با استفاده از ویژگی مقدار attrStyle.value = "text-align: left;"; // устанавливаем атрибут элементу attrs.setNamedItem(attrStyle); // Задача №3. удалить атрибут class у элемента attrs.removeNamedItem("class"); !}

وظایف

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