در این درس، روش های شیء سند را در نظر می گیریم که برای جستجو برای یک گره یا مجموعه ای از گره ها در سراسر سند طراحی شده اند. و همچنین روش های شیء گره (گره) که اقدامات مشابهی را انجام می دهند، اما در حال حاضر در میان شرکت های تابعه خود هستند.

روش های طراحی شده برای جستجو برای یک گره یا جمع آوری گره ها در درخت

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

GetElementByid ()

روش GetElementByid (ElementID) یک مورد را در یک سند باز می کند که دارای شناسه مشخص شده (ID \u003d "ElementID")، به عنوان یک جسم گره (گره) است. اگر آیتم با شناسه مشخص شده وجود نداشته باشد، این روش مقدار صفر را به دست می آورد.

با توجه به استاندارد، شما نمی توانید چندین عنصر را با همان مقدار ویژگی شناسه داشته باشید، I.E. مقدار شناسه باید در یک سند منحصر به فرد باشد. با این حال، اگر شما چندین مورد را با شناسه مشخص شده در سند دارید، روش GetElementbyid () اولین عنصر را پیدا می کند.

document.getElementbyid (ElementID)

این روش دارای یک پارامتر مورد نیاز است (ElementID)، که یک رشته حاوی مقدار ویژگی شناسه عنصر شما می خواهید دریافت کنید.

به عنوان مثال، تغییر رنگ متن عنصر داشتن id \u003d "namearticie".

عنوان مقاله

• 1 نقطه
• نقطه 2
• 3 نقطه

روش GetElementsbyclassName ()

روش GetElementsByClassName (ClassName) تمام موارد موجود در سند (برای سند) یا در میان گره های کودک (برای گره) با نام کلاس مشخص شده (class \u003d "classname")، به شکل یک شیء nodelist ( مجموعه گره ها). به عبارت دیگر، این روش یک جسم بدون گره را باز می کند که مجموعه ای از عناصر (گره ها) است که نام کلاس مشخص شده در روش پارامتر را دارند.

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

var lementslist \u003d document.getElementsbyclassName ("لیست")؛ برای (var i \u003d 0؛ i

document.getElementbyClassName (ClassName)؛
گره (گره) .gelementbyclassName (ClassName)؛

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

document.getElementsbyClassName ("Classl Class2")؛

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

عنوان مقاله

• 1 نقطه
• نقطه 2
• 3 نقطه

• 1 نقطه
• نقطه 2

به عنوان مثال، برای به دست آوردن مجموعه ای از عناصر (گره ها) داشتن یک کلاس لیست. بعد از دریافت 2 گره در این مجموعه، I.E. گره دارای شاخص 1. پس از آن، رنگ پس زمینه گره به دست آمده را تغییر دهید.

// دریافت مجموعه ای از عناصر با لیست ElementSlist \u003d document.getElementsbyClassName کلاس ("لیست")؛ // دریافت 2 گره در مجموعه var دوم \u003d عناصر عناصر؛ // تغییر رنگ پس زمینه دوم style.style.backgroundcolor \u003d "قرمز" عنصر؛

روش GetElementsbytagname ()

روش GetElementsytagname (TAGNAME) تمام موارد موجود در سند (برای سند) یا در میان گره های کودک (برای گره) با برچسب مشخص شده، به صورت شیء گره (مجموعه ای از گره ها) را باز می کند. دریافت یک گره خاص در مجموعه توسط شاخص انجام می شود. شمارش عناصر (گره ها) در مجموعه با 0 شروع می شود.

document.getElementsbytagname (tagname)؛
گره (گره) .gelementsbytagname (tagname)؛

این روش دارای یک پارامتر اجباری (tagname) است که یک رشته حاوی نام تگ است که توسط حروف بزرگ نشان داده شده است. اگر یک رشته حاوی Starrel ("*") را به عنوان یک پارامتر مشخص کنید، ما تمام موارد را در سند (برای شیء سند) یا تمام عناصر کودک گره (برای شیء گره) دریافت خواهیم کرد.

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

var lementslist \u003d document.getElementsbytagname ("li")؛ برای (var i \u003d 0؛ i

به عنوان مثال، تغییر رنگ پس زمینه عناصر LI:

عنوان مقاله

• 1 نقطه
• نقطه 2
• 3 نقطه

به عنوان مثال، مجموعه ای از عناصر UL را دریافت کنید. بعد، 1 گره را در این مجموعه دریافت کنید، I.E. گره داشتن شاخص 0. پس از آن، برای به دست آوردن مجموعه ای از شرکت های لیدی برای این گره. و در نتیجه، اندازه فونت هر عنصر را در این مجموعه تغییر دهید.

// دریافت مجموعه ای از عناصر ul var stusesul \u003d document.getElementsbytagname ("ul")؛ // دریافت 1 گره در این مجموعه var elementul \u003d electersul؛ // دریافت مجموعه ای از عناصر کودک Li elementul var lestesli \u003d elementul.gelementsli \u003d elementul.getElementsbytagname ("li")؛ // همه موارد را در For (Var I \u003d 0؛ I

روش GetElementsByName ()

روش GetElementsByName (NAME) همه موارد موجود را در سند دریافت می کند که دارای نام مشخص شده (مقدار مشخصه نام)، به عنوان یک گره Nodelist Object (مجموعه گره ها).

عناصر (گره ها) به مجموعه ای اضافه می شوند که در آنها در درخت یافت می شود. دریافت یک گره خاص در مجموعه توسط شاخص انجام می شود. شمارش عناصر (گره ها) در مجموعه با 0 شروع می شود.

var lementslist \u003d document.getElementsbyname ("تلفن")؛ برای (var i \u003d 0؛ i

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

document.getElementsbyname (نام)

این روش دارای یک پارامتر اجباری (نام) است که یک رشته حاوی مقدار ویژگی نام است.

به عنوان مثال، تغییر رنگ پس زمینه اقلام دارای ویژگی نام با مقدار تلفن (نام \u003d "تلفن"):

تلفن: تلفن دیگر:

روش QuerySelector ()

روش QuerySelector () اولین عنصر موجود در سند (برای سند) یا در میان گره های کودک (برای گره) را باز می کند که مربوط به انتخابگر CSS مشخص شده به عنوان پارامتر این روش است. اگر هیچ آیتم مربوط به انتخاب CSS نیست، این روش NULL را باز می گرداند.

document.queryselector (CSSSsselector)
node.queryselector (CSSssSelector)

این روش دارای یک پارامتر اجباری (CSSsselector) است که یک رشته حاوی انتخاب CSS است، مطابق با آن عنصر انتخاب شده است.

به عنوان مثال، تغییر رنگ متن اولین عنصر یافت شده مربوط به انتخاب #main P:

به عنوان مثال، برای به دست آوردن مجموعه ای از عناصر DIV در سند. بعد، 1 گره را در این مجموعه دریافت کنید، I.E. یک گره دارای شاخص 0. برای این گره، عنصر اول، که مربوط به انتخاب CSS H1 + P است، در میان گره های فرعی آن یافت می شود. پس از آن، اندازه فونت این مورد را تغییر دهید.

// دریافت مجموعه ای از div var lexsdiv \u003d document.getElementsbytagname عناصر ("div")؛ // دریافت 1 گره در این مجموعه var elementdiv \u003d lexsdiv؛ // یک گره P، بلافاصله پس از گره H1 Node // جستجو برای تولید در میان شرکت های وابسته به گره، که در متغیر ElementDiv var elementp \u003d elementdiv.queryserectore ذخیره می شود ("H1 + P") ذخیره می شود؛ // تغییر اندازه عنصر Font ElementP.Style.Fontsize \u003d "30px"؛

queryselectorall ()

روش QuerySelectoral () تمام موارد موجود در سند (برای سند) یا در میان گره های کودک (برای گره) را باز می کند، که مربوط به انتخاب CSS به عنوان پارامتر این روش به عنوان یک شیء گره (مجموعه ای از گره ها) است . تجدید نظر به گره ها در مجموعه توسط شاخص انجام می شود. شمارش عناصر (گره ها) در مجموعه با 0 شروع می شود.

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

var lementslist \u003d document.queryselectorall ("# main p")؛ برای (var i \u003d 0؛ i

document.queryselectorall (CSSssSelector)؛
گره (گره) .queryselectorall (CSSssselector)؛

این روش دارای یک پارامتر اجباری (CSSsSelector) است که یک رشته حاوی انتخاب CSS است، مطابق با عناصر انتخاب شده. برای مشخص کردن چند انتخابگر در پارامتر این روش، آنها باید به یک کاما تقسیم شوند.

به عنوان مثال، تغییر رنگ متن عناصر مربوط به انتخاب #main P را تغییر دهید:

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

// دریافت یک آیتم (گره)، که دارای id \u003d "نوار کناری" var sidebar \u003d document.getElementbyid ("نوار کناری")؛ // دریافت مجموعه ای از گره های مربوط به انتخاب "P" ElementsListp \u003d SideBar.queryselectorall ("P")؛ // همه موارد را در For (Var I \u003d 0؛ I

وظیفه

نوشتن کد در جاوا اسکریپت با استفاده از GetElementByid ()، GetElementsbyClassName ()، GetElementsytagname ()، GetElementsytagname ()، QueryStorTagname ()، QuerySelector ()، Queryselectorall () برای وظایف زیر:

1. تمام عناصر P را در بلوک اصلی قرار دهید؛
2. بلوک کنار گذاشته شده در کانتینر DIV؛
3. بلوک پاورقی را که در کانتینر بدن قرار دارد را دریافت کنید.

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

همانطور که می دانید - در توسعه یک برنامه Voluminous JS که در آن محبوب ترین کتابخانه جی کوئری زمانی رخ می دهد که مشکل عملکرد تیز است. تمام نیروها بر روی Ambrusura از پروفیل پرتاب می شوند، هر چالشی دقیقا مورد بررسی قرار گرفت، هر کدام از آنها به طور قابل ملاحظه ای از فروش جدا شده از فروش از هر طرف و در نظر گرفته شده است. اما مشکل از طرف دیگر نمی آید، از آنجا که 90 درصد از توسعه دهندگان در انتظار آن هستند. انتخاب کننده - چقدر از این کلمه.
بیایید کشف کنیم - چگونه این سحر و جادو کار می کند و چرا جستجو برای عناصر DOM می تواند باعث کاهش بهره وری برنامه شود.

چگونه جی کوئری انتخاب کننده را انتخاب می کند

در کتابخانه خود را به جستجو برای اقلام، موتور Sizzle دارای تعدادی از ویژگی های. ما به آنها نگاه خواهیم کرد.

queryselectorall ()

در مرورگرهای جدید، یک تابع QuerySelectorall عالی () و QuerySelector () ظاهر شد، که می داند که چگونه می توان عناصر را با استفاده از قابلیت های مرورگر جستجو کرد (به ویژه - هنگام استفاده از CSS مورد استفاده قرار می گیرد و خواص را به عناصر اختصاص داده است). این ویژگی در تمام مرورگرها کار نمی کند، اما فقط در FF 3.1+, IE8 +. (فقط در حالت استاندارد IE8), اپرا 9.5+(؟) و Safari 3.1+. بنابراین Siglele همیشه حضور این تابع را تعریف می کند و تلاش می کند تا هر گونه جستجو را از طریق آن انجام دهد. با این حال، در اینجا بدون شگفتی - برای استفاده موفقیت آمیز Queryselectorall ()، انتخاب ما باید معتبر باشد.
من یک مثال ساده خواهم داد:
دو انتخابگر حق بیمه عملا هیچ گونه متفاوت نیستند و همان مجموعه عناصر را باز می گردانند. با این حال، اولین انتخابگر نتیجه عملیات QuerySelectorall () را بازگرداند، و دوم نتیجه فیلتر کردن نرمال توسط اقلام است.
$ ("# ورودی my_form")
$ ("# ورودی my_form")

تجزیه و تحلیل انتخاب و جستجو

اگر شما نتوانید از Queryselectorall استفاده کنید در بیشتر موارد، آنها کافی هستند، اما (SIC!) در IE< 9 getElementByClassName() поломана и использование селектора по классу приведёт к полному перебору элементов в этом браузере.
در مورد کلی، Sizele را انتخاب کنید انتخابگر به سمت راست سمت چپ. برای نشان دادن این ویژگی، چند نمونه را ارائه خواهم کرد:
$ ("divs .my_class")
اول، عناصر یافت می شود .my_class، و پس از آن تنها کسانی که دارای DIVS هستند در والدین فیلتر می شوند. همانطور که می بینیم، این عملیات بسیار هزینه است و استفاده از زمینه مشکل را حل نمی کند (ما در مورد زمینه زیر صحبت خواهیم کرد).
همانطور که گفتم - در اغلب موارد، Sizle انتخابگر را به سمت راست سمت چپ تقسیم می کند، اما نه در مورد استفاده از یک عنصر با شناسه:
$ ("# divs .my_class))
در این مورد، انتخابگر به عنوان انتظار می رود رفتار می کند و بلافاصله عنصر #DIV ها را برای استفاده در قالب یک زمینه انجام می شود.

متن نوشته

پارامتر دوم فرستاده شده همراه با انتخابگر به عملکرد $ ()، متن نامیده می شود. او طراحی شده است تا طیف وسیعی از عناصر را محدود کند. با این حال، هنگام تجزیه اسکریپت های زمینه به ابتدای انتخابگر، برنده شدن به پیروزی اجازه نمی دهد. ترکیب استفاده از زمینه برنده یک انتخاب معتبر برای QuerySelectorall () است، زیرا این تابع را می توان نه تنها به نمایندگی از سند، بلکه از مورد نیز استفاده کرد. سپس انتخابگر با متن شکل گرفته است طراحی زیر:
$ (". divs"، document.getElementbyid ("wrapper"))؛
document.getElementbybyID ("بسته بندی"). QuerySelectorall ("Divs")؛ // اگر شما فرصت استفاده از Queryselectorall ()

در این مثال، اگر امکان استفاده از Queryselectorall () وجود ندارد، Sizele عناصر را با استفاده از انفجار ساده فیلتر می کند.
یکی دیگر از اظهارات در مورد زمینه (نه در مورد انتخاب کنندگان) - اگر پارامتر دوم در انتخاب برای تابع .Live () جی کوئری است - رویداد در سند گرفتار خواهد شد (!)، و اگر شی DOM به پاپ آپ یک رویداد فقط به این مورد. چنین ظرافت هایی که من سعی می کنم حفظ نکنم، اما من استفاده می کنم .delegate ().

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

برای جستجو برای عناصر توپی، می توانید از انتخاب زیر استفاده کنید:
$ ("root\u003e .child")
همانطور که می دانیم - تجزیه و تحلیل سیلر و جستجو بر روی عناصر All.Child در صفحه آغاز می شود (با توجه به اینکه Queryselectorall () در دسترس نیست). چنین عملیاتی بسیار هزینه است و ما می توانیم انتخابگر را تغییر دهیم:
$ ("کودک"، $ ("ریشه"))؛ // استفاده از زمینه، جستجو را تسهیل نمی کند
$ (". ریشه") پیدا کردن ("کودک")؛ // چرا ما باید تمام عناصر را در داخل قرار دهیم؟
$ ("ریشه") کودکان ("کودک")؛ // گزینه صحیح ترین

با این حال، اگر نیاز به استفاده از فیلترها برای هر ویژگی وجود داشته باشد (: Visible، EQ، و غیره) و انتخابگر به نظر می رسد این است:
$ ("some_images: قابل مشاهده")
فیلتر آخرین بار اعمال خواهد شد - I.E. ما دوباره از قانون "راست به سمت چپ" عقب نشینی می کنیم.

نتایج

• در صورت امکان، از انتخابگرهای مناسب مناسب برای QuerySelectorall استفاده کنید ()
• جایگزین وابستگی در داخل انتخابگرها برای subqueries (. کودکان (...)، و غیره)
• متن انتخاب را مشخص کنید
• فیلتر به عنوان یک عنصر کوچکتر به پایان رسید

انتخابگر سریع در سال جدید! همه در آینده!

بر اساس کلاس استاد

سند مدل Object - دلم - این چیزی جز ساختار درختی است که شامل برچسب های موجود در آن نیست HTML سند

ما همه این عناصر را داریم HTMLما در کنار یکدیگر قرار داریم، می خواهیم دریافت کنیم، و سپس داده ها را در آنها یا تغییر دهید. راه های بسیاری برای پیدا کردن این برچسب ها وجود دارد، زیرا آنها در ساختار درخت قرار دارند. در این مقاله شما یاد خواهید گرفت که چگونه از دو توابع ساخته شده استفاده کنید. جاوا اسکریپت، مانند queryselector و queryselectorall برای جستجو hTML برچسب ها

روش QuerySelector

برای درک ماهیت روش های روش ها queryselector و queryselectorall به HTML بعدی نگاه کنید:

در این مثال ما یکی داریم دیا با شناسه اصلی و چهار عنصر در آن سرمایه گذاری کرد دیا و img، که هر کدام دارای ارزش کلاس است ظروف عکس و مشخصات به ترتیب. در چند بخش زیر، ما عمل می کنیم. queryselector و queryselectorall روی این کد HTML و بیایید ببینیم چه اتفاقی می افتد

queryselector

تابع queryselector به شرح زیر عمل می کند:

var lement \u003d document.queryselector ("< CSS selector >");

ویژگی QuerySelector استدلال را می گیرد، و این استدلال است انتخاب CSS برای موردی که می خواهید پیدا کنید. بازگشت ویژگی QuerySelector، این اولین عنصر است که آن را پیدا می کند، حتی اگر عناصر دیگری وجود دارد که می تواند مشابه این انتخاب باشد.

نگاه كردن HTML از مثال قبلی ما، اگر ما می خواهیم به آن دسترسی پیدا کنیم دیاکدام شناسه است اصلیشما باید موارد زیر را بنویسید:

var lement \u003d document.queryselector ("# main")؛

تا آنجا که اصلی شناسه، نحو انتخاب کننده برای به دست آوردن آن خواهد بود #main . به طور مشابه، یک انتخابگر کلاس ظروف عکس :

var lement \u003d document.queryselector ("Pic Container")؛

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

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

این همه، و در مقاله بعدی من در مورد عملکرد زیر توضیح خواهم داد queryselectorall.

جاوا اسکریپت، مانند CSS، دارای قابلیت هایی است که به شما اجازه می دهد تا به موارد HTML دسترسی پیدا کنید تا محتوای صفحه را تبدیل کنید. در CSS آن را با نوشتن انتخاب کنندگان به دست می آید. در جاوا اسکریپت، چندین راه برای سازماندهی این قابلیت وجود دارد، و در اینجا یکی از آنهاست:

var prainialheads \u003d document.getElementsbytagname ("h1")؛

این کد تمام هدر های H1 را استخراج می کند و تقریبا صحبت می کند، آنها را در متغیر اولیه قرار می دهد. اگر چند هدر در صفحه وجود دارد، همه آنها در یک آرایه قرار می گیرند.

var ou812 \u003d document.getElementbyid ("eddie")؛

این کد یک مورد را با id \u003d "eddie" انتخاب می کند.

var guitars \u003d document.getElementsbyClassName ("محورها")؛

ما همچنین می توانیم عناصر را به نام کلاس های خود انتخاب کنیم.

یک عنصر کوچک را اضافه کنید

نوع دیگری از freymworks جاوا اسکریپت قابلیت های خود را از انتخاب کنندگان ارائه می دهد. یکی از موفق ترین Sizzle بود، که بعدها به جی کوئری تبدیل شد. بر خلاف نسل خود، Sizzle تنها می تواند با DOM کار کند و آنها را دستکاری کند. اگر شما به بقیه قابلیت های جی کوئری نیاز ندارید، امروز می توانید Sizzle را به عنوان یک کتابخانه جداگانه دانلود کنید.

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

$ ("# dave"). CSS ()

این کد آیتم HTML را با ID \u003d "Dave" بازیابی می کند و به شما اجازه می دهد تا با سبک های CSS خود کار کنید.

Sizzle تنها کتابخانه جاوا اسکریپت برای دستکاری کد HTML نیست. گزینه های دیگر نیز وجود دارد، به عنوان مثال، Rangy. با این حال، به نظر من، تمام موارد فوق پیش از آن قدیمی شده است، انتظار می رود که شما در این مقاله بیشتر بدانید.

جدول جدید جاوا اسکریپت

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

"JavaScript Selector API" بخش رسمی مشخصات HTML5 است، می توان آن را استفاده کرد و هنگام نوشتن صفحات XHTML استفاده می شود. نحو جدید بسیار ساده است:

document.queryselector ("# eddie")

این کد یک سند کاملا معادل آن است. gottelemybyid ("eddie"). چشمگیر نیست؟ در مورد این چی:

document.queryselector ("# eddie h1 + p")

قابلیت های جدید اجازه می دهد تا شما را به دستکاری DOM، با استفاده از عبارات پیچیده CSS.

روش QuerySelector تنها عنصر اول را بازیابی می کند. برای استخراج همه چیزهایی که باید از Queryselectorall استفاده کنید:

var hifrets \u003d document.queryselectorall ("جدول # frets tr: nth-child (3)")

این کد هر خط سوم را از جدول با id \u003d "frets" بازیابی می کند.

چندین نقطه بسیار مهم

محدودیت های متعددی وجود دارد که باید بدانید اگر از QuerySelector / All روش استفاده می کنید:

نه همه مرورگرها از ویژگی های جدید پشتیبانی نمی کنند. اگر برای شما مهم است که در IE6-7 کار کنید، بهتر است از کتابخانه هایی استفاده کنید که می توانند DOM را دستکاری کنند: Sizzle یا jQuery.

انتخابگرها باید با دقت آماده شوند، در غیر این صورت مرورگرها آنها را درک نمی کنند، و روش های بالا NULL را باز می گرداند. به طور کلی، بسیار مراقب باشید، به خصوص هنگام استفاده از انتخاب کنندگان CSS3.

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

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

آخرین به روز رسانی: 1.11.2015

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

عناصر جستجو

روش های زیر برای جستجو برای اقلام در صفحه اعمال می شود:

getElementByid (Value): یک عنصر را انتخاب می کند که ویژگی ID برابر با ارزش است

getElementsytagname (value): تمام عناصر را انتخاب می کند که برچسب برابر با ارزش است

getElementsbyClassName (ارزش): تمام عناصر موجود را انتخاب می کند

querySlector (ارزش): اولین عنصر را انتخاب می کند که به انتخاب CSS مقدار مربوط می شود

queryselectorall (ارزش): تمام مواردی را که با مقدار انتخاب CSS مطابقت دارند را انتخاب می کند

به عنوان مثال، یک عنصر را با شناسایی پیدا کنید:

با استفاده از document.getElementbyid ("header") یک مورد را پیدا کنید که از آن ID \u003d "header". و با استفاده از اموال InnerText، می توانید متن مورد یافت شده را پیدا کنید.

جستجو بر اساس یک برچسب خاص:

با استفاده از document.getElementsbytagname تماس ("P")، ما تمام عناصر پاراگراف را پیدا می کنیم. این تماس یک آرایه از موارد موجود را باز می کند. بنابراین، برای به دست آوردن عناصر جداگانه ای از آرایه، شما باید آنها را در چرخه اجرا کنید.

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

var phlemle \u003d document.getElementsbytagname ("P")؛ document.write ("Sext Paragraph:" + PeellenerText)؛

گرفتن یک عنصر در کلاس:

انتخاب انتخاب CSS:

بیان document.queryselector (". annotation p") یک عنصر را پیدا می کند که مربوط به Selector.ANnotation P است. اگر صفحه دارای چندین مورد مربوط به انتخابگر باشد، روش اول را انتخاب می کند. در نتیجه، مرورگر برداشته خواهد شد:

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

برای دریافت تمام عناصر در انتخاب، شما می توانید روش document.queryselectorall را دوست دارید، که آرایه ای از موارد یافت می شود:

خروجی مرورگر:

حاشیه نویسی مقاله اول پاراگراف دوم پاراگراف متن انتخاب کننده 0: اولین پاراگراف متن انتخاب 1: پاراگراف دوم