این آموزش در تاریخ ۱۴۰۱/۰۶/۲۷ آپدیت شده است.
لیست ویژگی ها و متدهای DOM در جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با لیست ویژگی ها و متدهای DOM در جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
لیست ویژگی ها و متدهای DOM در جاوااسکریپت
در این قسمت میتوانید لیست ویژگی ها و متدهای مربوط به صفات ( Attribute ) و سند / صفحه ( Document ) و عناصر ( Element ) موجود در DOM زبان جاوااسکریپت را مشاهده نمایید.
Free-Learn
مربوط به صفت یا Attribute تگ ها
| نام ویژگی | توضیح | مثال |
|---|---|---|
| isId | آیا یک صفت ID هست یا خیر ( منسوخ شده ) | – |
| name | برگشت نام یک صفت | مثال |
| value | برگشت مقدار یک صفت | مثال |
| specified | آیا یک صفت مشخص شده درون یک تگ وجود دارد یا خیر | مثال |
| length | برگشت تعداد کل ( عددی ) گره های موجود در یک تگ | مثال |
| ()getNamedItem | گرفتن نام یک گره مشخص | مثال |
| ()setNamedItem | ست کردن نام جدید برای یک گره مشخص | مثال |
| ()removeNamedItem | حذف کردن نام یک گره مشخص | مثال |
| ()item | دسترسی به یک گره صفت مشخص شده با استفاده از شماره ایندکس | مثال |
Free-Learn
مربوط به سند یا صفحه یا Document
| نام متد / ویژگی | توضیح | مثال |
|---|---|---|
| activeElement | برگشت عنصری که روش فوکوس ( کلیک ) شده | مثال |
| ()addEventListener | اضافه کردن رویداد به یک عنصر | مثال |
| ()removeEventListener | حذف کردن رویداد از یک عنصر | مثال |
| ()adoptNode | انتقال یک گره از یک صفحه به صفحه دیگر ( حذف شدن گره مبدا ) |
مثال |
| ()importNode | انتقال یک گره از یک صفحه به صفحه دیگر ( باقی موندن گره مبدا ) |
مثال |
| body | برای بدست آوردن تگ body از صفحه | مثال |
| ()open | باز کردن یک جریان خروجی ( یا به اصطلاح Output Stream ) |
مثال |
| ()close | بستن یک جریان خروجی ( یا به اصطلاح Output Stream ) |
مثال |
| characterSet | برگشت کدگذاری کاراکترهای ( Character Encoding ) صفحه | مثال |
| ()createAttribute | برای تعریف یک صفت با یک نام مشخص شده | مثال |
| ()createComment | برای تعریف گره کامنت ( یا Comment ) | مثال |
| ()createElement | برای تعریف یک تگ ( عنصر ) جدید | مثال |
| ()createTextNode | برای تعریف متن داخل یک تگ ( یا گره یا عنصر ) | مثال |
| designMode | آیا یک صفحه ( یا سند ) قابل ویرایش باشد یا خیر | مثال |
| documentElement | برای بدست آوردن مقدار تگ html از صفحه | مثال |
| domain | برای بدست آوردن نام دامنه یا Domain سایت | مثال |
| forms | برای دسترسی به فرم و اینپوت های موجود در صفحه | مثال |
| ()getElementById | انتخاب تگ ها از طریق آی دی ( یا ID ) | مثال |
| ()getElementsByTagName | انتخاب تگ ها از طریق نام تگ | مثال |
| ()getElementsByClassName | انتخاب تگ ها از طریق کلاس ( یا Class ) | مثال |
| ()getElementsByName | انتخاب تگ ها از طریق نام ( مقدار صفت Name ) | مثال |
| ()hasFocus | میتونیم مشخص کنیم که آیا بروی صفحه یا تگ های موجود در صفحه فوکوس یا Focus شده است یا خیر |
مثال |
| head | میتونیم تگ head رو از صفحه برگشت بدیم یا بدست آوریم | مثال |
| images | برای دسترسی به تصاویر ( تگ های IMG ) موجود در صفحه | مثال |
| lastModified | میتونیم تاریخ و ساعت آخرین دستکاری ( یا اصلاح یا Modified ) صفحه رو بدست آوریم |
مثال |
| links | برای دسترسی به لینک های موجود در صفحه | مثال |
| normalize | برای ادغام کردن گره های خالی | مثال |
| ()querySelector | برای انتخاب تگ ها از صفحه ، از طریق انتخابگرهای زبان CSS | مثال |
| ()querySelectorAll | برای انتخاب تگ ها از صفحه ، از طریق انتخابگرهای زبان CSS | مثال |
| readyState | میتونیم وضعیت بارگذاری ( Loading ) صفحه رو بدست آوریم | مثال |
| referrer | برای بدست آوردن آدرس یا URL صفحه ارجاع دهنده | مثال |
| scripts | برای دسترسی به تگ های Script موجود در صفحه | مثال |
| title | برای بدست آوردن / تنظیم کردن عنوان صفحه وب | مثال |
| URL | برای بدست آوردن / تنظیم کردن آدرس یا URL صفحه | مثال |
| ()write | برای نوشتن ( متن ، دستورات HTML و.. ) درون صفحه ( بدون قابلیت شکستن سطر بصورت خودکار ) |
مثال |
| ()writeln | برای نوشتن ( متن ، دستورات HTML و.. ) درون صفحه ( با قابلیت شکستن سطر بصورت خودکار ) |
مثال |
Free-Learn
مربوط به عناصر یا Element
| نام متد / ویژگی | توضیح | مثال |
|---|---|---|
| accessKey | برای گرفتن مقدار صفت accesskey یک عنصر و یا تنظیم مقدار جدید |
مثال |
| ()appendChild | برای درج ( اضافه ) کردن یک گره به گره دیگر | مثال |
| attributes | میتونیم به مجموعه ای از گره های صفت یک عنصر از طریق شماره ایندکس دسترسی پیدا نماییم |
مثال |
| ()blur | برای حذف کردن فوکوس ماوس از روی یک عنصر | مثال |
| ()focus | برای اضافه کردن فوکوس ماوس بر روی یک عنصر | مثال |
| childElementCount | میتونیم تعداد کل ( عددی ) فرزندان ( یا Children ) یک عنصر رو بدست آوریم |
مثال |
| childNodes | میتونیم به مجموعه ای از گره های فرزند یک عنصر ( از جمله گره متن ، گره عنصر ، گره کامنت ) با استفاده از شماره ایندکس دسترسی پیدا نماییم |
مثال |
| ()hasChildNodes | میتونیم چک کنیم ببینیم آیا یک گره دارای گره فرزند ( یا Child Node ) می باشد |
مثال |
| children | میتونیم به مجموعه ای از گره های فرزند یک عنصر ( گره خوده عنصر ) با استفاده از شماره ایندکس دسترسی پیدا نماییم |
مثال |
| classList | میتونیم به کلاس های یک عنصر دسترسی پیدا نماییم ( پیشرفته تر ) |
مثال |
| className | میتونیم به کلاس های یک عنصر دسترسی پیدا نماییم | مثال |
| click | برای شبیه سازی کلیک چپ ماوس | مثال |
| clientWidth | میتونیم اندازه عرض ( Width ) قابل مشاهده ( یا در دسترس ) بهمراه مقدار Padding یک عنصر رو بدست بیاوریم |
مثال |
| clientHeight | میتونیم اندازه ارتفاع ( Height ) قابل مشاهده ( یا در دسترس ) بهمراه مقدار Padding یک عنصر رو بدست بیاوریم |
مثال |
| clientLeft | میتونیم اندازه بوردِر یا Border سمت چپ ( Left ) یک عنصر رو بدست بیاوریم |
مثال |
| clientTop | میتونیم اندازه بوردِر یا Border سمت بالا ( Top ) یک عنصر رو بدست بیاوریم |
مثال |
| ()cloneNode | میتونیم از روی یک گره کپی بگیریم | مثال |
| ()closest | میتونیم نزدیک ترین عنصر والد ( پدر یا پدربزرگ یا جد ) را به یک عنصر خاص جستجو بزنیم |
مثال |
| ()compareDocumentPosition | میتونیم موقعیت قرارگیری ۲ گره رو با هم مقایسه کنیم | مثال |
| ()contains | میتونیم مشخص کنیم که آیا یک گره شامل یک گره دیگر است یا خیر | مثال |
| contentEditable | میتونیم مشخص کنیم آیا محتوای یک عنصر قابل ویرایش باشد یا خیر | مثال |
| isContentEditable | وضعیت قابل ویرایش بودن یک عنصر رو برگشت میده | مثال |
| dir | برای گرفتن و تنظیم مقدار صفت dir یک عنصر | مثال |
| ()requestFullscreen | میتونیم یک عنصر رو در حالت تمام صفحه ( Full Screen ) باز کنیم | مثال |
| ()exitFullscreen | میتونیم یک عنصر رو از حالت تمام صفحه ( Full Screen ) خارج کنیم | مثال |
| firstChild | میتونیم اولین گره فرزند را از یک گره مشخص شده بدست آوریم ( محاسبه تمامی گره ها از جمله گره متن ، گره کامنت ، گره عنصر ) |
مثال |
| lastChild | میتونیم آخرین گره فرزند را از یک گره مشخص شده بدست آوریم ( محاسبه تمامی گره ها از جمله گره متن ، گره کامنت ، گره عنصر ) |
مثال |
| firstElementChild | میتونیم اولین تگ فرزند را از یک تگ مشخص شده بدست آوریم ( محاسبه فقط گره خوده عنصر ) |
مثال |
| lastElementChild | میتونیم آخرین تگ فرزند را از یک تگ مشخص شده بدست آوریم ( محاسبه فقط گره خوده عنصر ) |
مثال |
| ()setAttribute | برای تنظیم صفت + مقدار برای یک تگ | مثال |
| ()getAttribute | برای گرفتن صفت + مقدار از یک تگ | مثال |
| ()removeAttribute | برای حذف صفت + مقدار از یک تگ | مثال |
| ()hasAttribute | میتونیم مشخص کنیم که آیا یک تگ دارای صفت خاصی می باشد یا خیر |
مثال |
| ()hasAttributes | میتونیم مشخص کنیم که آیا یک تگ دارای حداقل ۱عدد صفت می باشد یا خیر |
مثال |
| ()setAttributeNode | میتونیم یک گره صفت جدید را به یک عنصر ( بصورت شئ صفت یا Attr Object ) اضافه نماییم |
مثال |
| ()getAttributeNode | میتونیم یک گره صفت را از یک عنصر ( بصورت شئ صفت یا Attr Object ) دریافت نماییم |
مثال |
| ()removeAttributeNode | میتونیم یک گره صفت را از یک عنصر ( بصورت شئ صفت یا Attr Object ) حذف نماییم |
مثال |
| ()getBoundingClientRect | میتونیم اندازه ( Size ) و موقعیت قرارگیری ( Position ) یک عنصر رو به نسبت ViewPort صفحه برگشت بدیم |
مثال |
| id | برای هم گرفتن و هم تنظیم مقدار صفت ID یک عنصر | مثال |
| innerHTML | برای هم گرفتن و هم تنظیم محتوای درون یک عنصر ( محتوای HTML ) |
مثال |
| outerHTML | برای هم گرفتن و هم تنظیم بخش بیرونی یک عنصر ( تگ ) |
مثال |
| innerText | برای هم گرفتن و هم تنظیم محتوای درون یک عنصر ( محتوای متنی ) |
مثال |
| textContent | برای هم گرفتن و هم تنظیم محتوای درون یک عنصر ( محتوای متنی ) |
مثال |
| ()insertAdjacentElement | میتونیم یک عنصر ( تگ ) مشخص شده را در یک مکان مشخص شده قرار دهیم |
مثال |
| ()insertAdjacentHTML | میتونیم محتوای HTML مشخص شده را در یک مکان مشخص شده قرار دهیم |
مثال |
| ()insertAdjacentText | میتونیم محتوای متنی مشخص شده را در یک مکان مشخص شده قرار دهیم |
مثال |
| ()insertBefore | میتونیم یک گره خاص ( مشخص شده ) را به قبل از یک گره دیگه ( که از قبل وجود داره ) اضافه و یا انتقال بدیم |
مثال |
| ()namespaceURI | میتونیم فضای نامی ( یا NameSpace ) یک گره عنصر را بدست آوریم |
مثال |
| ()isDefaultNamespace | میتونیم مشخص یا چک کنیم که آیا فضای نامی ( یا Name Space ) یک صفحه بصورت پیش فرض تعریف شده است یا خیر | مثال |
| ()isEqualNode | میتونیم چک کنیم که آیا ۲گره باهم برابر ( یا مساوی یا Equal ) هستند یا خیر |
مثال |
| ()isSameNode | میتونیم چک کنیم که آیا ۲گره دقیقا یکی ( شبیه هم ) هستند یا خیر |
مثال |
| lang | میتونیم هم مقدار صفت lang رو بگیریم و هم مقدار جدید براش تنظیم کنیم |
مثال |
| ()matches | میتونیم چک کنیم که آیا یک عنصر با یک یا چندین انتخابگر CSS ( که ما مشخص میکنیم ) مطابقت دارد یا خیر |
مثال |
| nextSibling | میتونیم گره بعدی ( که بلافاصله ) بعد از یک گره مشخص شده قرار دارد را بدست آوریم |
مثال |
| previousSibling | میتونیم گره قبلی ( که بلافاصله ) قبل از یک گره مشخص شده قرار دارد را بدست آوریم |
مثال |
| nextElementSibling | میتونیم تگ بعدی ( که بلافاصله ) بعد از یک تگ مشخص شده قرار دارد را بدست آوریم |
مثال |
| previousElementSibling | میتونیم تگ قبلی ( که بلافاصله ) قبل از یک تگ مشخص شده قرار دارد را بدست آوریم |
مثال |
| nodeName | میتونیم نام یک گره رو بدست آوریم | مثال |
| nodeValue | میتونیم مقدار یک گره رو بدست آوریم | مثال |
| nodeType | میتونیم نوع یا Type یک گره رو بدست آوریم | مثال |
| offsetWidth | میتونیم اندازه عرض ( Width ) یک تگ + مقدار ویژگی های Padding و Border و اسکرول بار رو بدست بیاوریم | مثال |
| offsetHeight | میتونیم اندازه ارتفاع ( Height ) یک تگ + مقدار ویژگی های Padding و Border و اسکرول بار رو بدست بیاوریم | مثال |
| offsetLeft | میتونیم میزان فاصله یک تگ رو از سمت چپ به نسبت عنصر والد یا پدرش بدست آوریم |
مثال |
| offsetTop | میتونیم میزان فاصله یک تگ رو از سمت بالا به نسبت عنصر والد یا پدرش بدست آوریم |
مثال |
| offsetParent | میتونیم نزدیک ترین ، تگ والد ( یا پدر ) یک تگ دیگه رو بدست آوریم | مثال |
| ownerDocument | میتونیم سند مالک یک گره ، را بصورت شئ سند بدست آوریم | مثال |
| parentNode | میتونیم گره پدر یا والد یک گره مشخص شده را بدست آوریم | مثال |
| ()remove | میتونیم یک گره ( تگ ) رو از صفحه حذف نماییم | مثال |
| ()removeChild | میتونیم یک گره فرزند رو از یک گره مشخص شده حذف نماییم | مثال |
| ()replaceChild | میتونیم یک گره فرزند رو جایگزین یک گره فرزند دیگه کنیم | مثال |
| scrollWidth | میتونیم اندازه کل عرض ( Width ) یک تگ رو + مقدار ویژگی Padding بدست آوریم | مثال |
| scrollHeight | میتونیم اندازه کل ارتفاع ( Height ) یک تگ رو + مقدار ویژگی Padding بدست آوریم | مثال |
| scrollLeft | میتونیم مقدار ( اسکرول کردن بصورت افقی ) یک تگ رو بدست آوریم و یا مقدار جدید براش تنظیم نماییم |
مثال |
| scrollTop | میتونیم مقدار ( اسکرول کردن بصورت عمودی ) یک تگ رو بدست آوریم و یا مقدار جدید براش تنظیم نماییم |
مثال |
| ()scrollIntoView | برای اسکرول کردن بروی یک بخش خاص درون صفحه | مثال |
| style | برای گرفتن و یا تنظیم کردن استایل برای تگ های داخل صفحه | مثال |
| tabIndex | برای گرفتن یا تنظیم کردن مقدار صفت TabIndex درون تگ | مثال |
| tagName | برای بدست آوردن نام یک تگ | مثال |
| title | برای گرفتن یا تنظیم کردن مقدار صفت Title درون تگ | مثال |
لیست ویژگی ها و متدهای DOM در جاوااسکریپت
