تکنسین هایی که با DOM کار می کنند: والدین، کودک و عناصر مجاور. دستکاری با DOM در جاوا اسکریپت خالص بررسی وجود شرکت های تابعه

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

این API را بیشتر در نظر بگیرید:

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

درخواست های DOM

درخواست های DOM با استفاده از روش .queryselector () انجام می شود، که به عنوان یک استدلال یک انتخاب کننده CSS دلخواه دریافت می شود.

const myelement \u003d document.queryselector ("# foo\u003e div.bar")

او اولین عنصر مناسب را باز خواهد کرد. برعکس، ممکن است بررسی کنید که آیا عنصر انتخاب کننده مربوط به:

myelement.matches ("div.bar") \u003d\u003d\u003d درست است

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

const myelements \u003d document.queryselectorall ("نوار")

اگر می دانید که چگونه به عنصر والدین مراجعه کنید، می توانید به راحتی در میان عناصر کودک خود جستجو کنید، به جای جستجوی در سراسر کد:

const mychildelemet \u003d myelement.queryselector ("ورودی") // به جای: // document.queryselector ("# foo\u003e div.bar inport")

سوال مطرح می شود: چرا پس از آن از روش های دیگر، کمتر راحت استفاده کنید مانند .gelementsbytagname ()؟ یک مشکل کوچک وجود دارد - نتیجه خروجی .Queryselector () به روز نمی شود، و هنگامی که یک عنصر جدید اضافه می کنیم (نگاه کنید)، آن را تغییر نخواهد داد.

const lestenes1 \u003d document.queryselectorall ("div") const lements2 \u003d document.getelemsybytagname ("div") const newelement \u003d document.createelement ("div" document.bodyeelement ("div") document.body.appendchild (newelement) عناصر 1. طول \u003d\u003d\u003d عناصر 2.length // false

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

چگونه با لیست کار کنیم؟

علاوه بر همه u.queryselectorall () دو تن از تفاوت های کوچک وجود دارد. شما نمی توانید به سادگی با روش های نتایج به نتایج تماس بگیرید و انتظار داشته باشید که آنها به هر یک از آنها اعمال شوند (همانطور که می توانید آن را با جی کوئری انجام دهید). در هر صورت، لازم است تمام عناصر در چرخه را مرتب کنید. دوم - جسم بازگشتی یک لیست از عناصر، نه یک آرایه است. در نتیجه، روش های آرایه ها کار نخواهد کرد. البته، روش هایی برای لیست ها وجود دارد، چیزی شبیه به .oreach ()، اما، افسوس، آنها برای همه موارد مناسب نیستند. بنابراین بهتر است یک لیست را به یک آرایه تبدیل کنید:

// با استفاده از array.from () array.from (myelements) .foreach // zoreach // array نمونه اولیه (تا ES6) Array.Prototype.foreach.call (myelements، dosomethingeacheachelement) // easy: .foreach.call (myelements، dosomething@element )

هر عنصر دارای برخی از خواص است که به "خانواده" اشاره دارد.

myelement.children myelement.firstelmentchild myeelement.lastelementchild myeelement.previouletsiBlings myeLement.NextElementsIblingbling

از آنجا که رابط عنصر (عنصر) از رابط گره (گره) به ارث برده می شود، خواص زیر نیز وجود دارد:

myelement.childnodes myeelement.firstchild myeelement.lastchild myelement.Previousssiblings myelement.nextsibling myelement.Parennode myeLement.ParentElement

اولین خواص به مورد اشاره می شود، و آخرین (به استثنای .Parenelement) می تواند لیست عناصر هر نوع باشد. بر این اساس، شما می توانید نوع مورد را بررسی کنید:

myelement.firstchild.nodetype \u003d\u003d\u003d 3 // این مورد یک گره متن خواهد بود

اضافه کردن کلاس ها و ویژگی ها

اضافه کردن یک کلاس جدید بسیار ساده است:

myElement.ClassList.add ("foo") myeLement.ClassList.Remove ("نوار") myElement.ClassList.Toggle ("BAZ")

اضافه کردن یک ملک برای یک مورد فقط به عنوان هر شیء رخ می دهد:

// به دست آوردن ارزش attribute const value \u003d myelement.Value // ویژگی را به عنوان ویژگی myelement.value \u003d "عنصر) تنظیم کنید (! lang: foo" // Для установки нескольких свойств используйте.Object.assign() Object.assign(myElement, { value: "foo", id: "bar" }) // Удаление атрибута myElement.value = null !}

شما می توانید از روش ها استفاده کنید. [)، .etattribute () i.removeattribute (). آنها بلافاصله ویژگی های HTML از عنصر را تغییر می دهند (در مقایسه با خواص DOM)، که باعث بازپرداخت مرورگر می شود (شما می توانید تمام تغییرات را با مطالعه عنصر با استفاده از ابزارهای توسعه دهنده در مرورگر مشاهده کنید). چنین مترورها نه تنها نیاز به منابع بیشتری نسبت به نصب خواص DOM دارند، بلکه می توانند به اشتباهات غیر منتظره منجر شوند.

به عنوان یک قاعده، آنها برای عناصری استفاده می شود که دارای خواص DOM مربوطه مانند Colspan نیستند. یا اگر استفاده از آنها واقعا ضروری باشد، به عنوان مثال، برای وراثت خواص HTML (نگاه کنید به).

اضافه کردن CSS-styles

آنها را به همان شیوه به عنوان خواص دیگر اضافه کنید:

myelement.style.marginleft \u003d "2em"

برخی از خواص خاص را می توان با استفاده از .style تنظیم کرد، اما اگر می خواهید پس از برخی از محاسبات ارزش دریافت کنید، بهتر است از window.getComptystyle استفاده کنید. این روش یک مورد را دریافت می کند و CSSSTYLEDECLARATION را باز می گرداند، حاوی سبک ها هر دو عنصر و والدین آن است:

Window.GETCOMPUTOMSTYLE (MYELEMENT) .GETPROPERTYVALUE ("حاشیه سمت چپ")

تغییر بخش

شما می توانید موارد را حرکت دهید:

// اضافه کردن element1 به عنوان آخرین عنصر Element2 Element1.appendchild (element2) // insert lement2 به عنوان عنصر عنصر کودک 1 در مقابل عنصر 1 lement1.insertbefore (element2، element3)

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

// ایجاد یک clone const const myelementclone \u003d myelement.clonenode () myparenelement.appendchild (myelementclone)

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

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

const mynewelement \u003d document.createelement ("div") const mynewtextnode \u003d document.createtextnode ("برخی از متن")

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

myparenelement.removechild (myelement)

شما می توانید تماس بگیرید و غیر مستقیم:

myelement.parentnode.removechild (myelement)

روش های عناصر

هر عنصر دارای خواص مانند .innerhtml i.TextContent، آنها حاوی کد HTML هستند و به همین ترتیب، متن خود را دارد. مثال زیر محتویات عنصر را تغییر می دهد:

// تغییر HTML myelement.innerhtml \u003d `

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

const link \u003d document.createelement ("a") const text \u003d document.createtextnode ("ادامه خواندن ...") const hr \u003d document.createelement ("hr") link.href \u003d "foo.html" link.appendchild ( متن) myelement.appendchild (لینک) myelement.appendchild (hr)

با این حال، این دو Redrawrs در مرورگر را شامل می شود، در حالی که .innerhtml تنها به یکی منجر خواهد شد. شما می توانید آن را دور نگه دارید، اگر ابتدا همه چیز را به documentfragment اضافه کنید، و سپس یک قطعه را که نیاز دارید اضافه کنید:

Fragment Const \u003d document.createdocumentfragment () fragment.appendchild (متن) fragment.appendchild (hr) myelement.appendchild (قطعه)

دستگیره های رویداد

یکی از ساده ترین دست ها:

myelement.onclick \u003d function onclick (رویداد) (console.log (event.type + "اخراج شد")

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

برای اضافه کردن دستگیره بهتر است از آن استفاده کنید. addeventlistener (). این سه استدلال طول می کشد: نوع رویداد، تابع که هر زمان که هر زمان که باعث می شود، و شیء پیکربندی نامیده می شود (بعدا به آن بازگردانده می شود).

myelement.addeventlistener ("کلیک"، تابع (console.log))) myelement.addeventlistener ("کلیک"، تابع (رویداد) (console.log (event.type + "دوباره اخراج شد"))

رویداد event.target به عنصر اضافه می شود که رویداد ثابت شده است.

و بنابراین شما می توانید به تمام خواص دسترسی داشته باشید:

// `forms` forms` - آرایه حاوی پیوندها به همه فرم ها const myform \u003d document.forms const myinputelements \u003d myform.queryselectorlall (" ورودی ") array.from (myinputelements) .foreach (el \u003d\u003e (el.addeventlistener (" el.addeventlistener) ، تابع (رویداد) (console.log (event.target.value)))))))

پیش فرض پیش فرض

برای انجام این کار، از Method.PreventDefault () استفاده کنید، که اقدامات استاندارد را مسدود می کند. به عنوان مثال، اگر مجوز در طرف مشتری موفق نبود، ارسال فرم را متوقف کند:

myform.addeventlistener ("ارسال"، تابع (const name \u003d this squeryserector ("# نام") اگر (name.value \u003d\u003d\u003d "(! lang: دونالد اردک") { alert("You gotta be kidding!") event.preventDefault() } }) !}

Method.Stoppropagation () کمک خواهد کرد اگر شما یک دستاورد رویداد خاص، ثابت در پشت عنصر کودک، و دوم دست دوم از همان رویداد اختصاص داده شده به والدین.

همانطور که قبلا ذکر شد، روش .addeventlistener () سومین استدلال اختیاری را به عنوان یک شیء با پیکربندی می گیرد. این شی باید شامل هر یک از خواص بولین زیر باشد (به طور پیش فرض همه در ارزش نادرست):

• ضبط: رویداد قبل از هر مورد دیگری در DOM به این عنصر متصل می شود.
• یک بار: این رویداد تنها می تواند یک بار ثابت شود؛
• passive: Event.PreventDefault () نادیده گرفته خواهد شد (استثنا در هنگام خطا).

شایع ترین اموال .capture، و بسیار شایع است که یک روش کوتاه برای ضبط وجود دارد: به جای عبور آن در شیء پیکربندی، به سادگی مقدار آن را در اینجا مشخص کنید:

myelement.addeventlistener (نوع، شنونده، درست)

پردازنده ها با استفاده از روش M.RemoveeventListener () میزبانی دو استدلال حذف می شوند: نوع رویداد و مرجع به حذف دستیار. به عنوان مثال، اموال ONC را می توان به صورت زیر اجرا کرد:

myelement.addeventlistener ("تغییر"، عملکرد شنونده (رویداد) (CONSOLE.LOG (EVENT.TYPE + "به دست آورد" + این) this.removeeventlistener ("تغییر"، شنونده)))

وراثت

فرض کنید شما یک آیتم دارید و می خواهید برای تمام عناصر فرزند خود، دستیار رویداد را اضافه کنید. سپس شما باید آنها را در چرخه با استفاده از روش myform.queryselectorlall ("ورودی") رانندگی کنید، همانطور که در بالا نشان داده شده است. با این حال، شما می توانید به سادگی موارد را به شکل اضافه کنید و محتوای خود را با استفاده از event.target بررسی کنید.

myform.addeventlistener ("تغییر"، تابع (رویداد) (const target \u003d event.target اگر (target.mats ("ورودی")) (console.log (target.value))))

و یکی دیگر از این روش این است که دستگیره به طور خودکار به عناصر کودک جدید گره خورده است.

انیمیشن

ساده ترین راه برای اضافه کردن انیمیشن با استفاده از CSS با اموال انتقال. اما برای انعطاف پذیری بیشتر (به عنوان مثال، جاوا اسکریپت مناسب است.

با استفاده از روش window.settimeout () تا زمانی که انیمیشن تمام شود، بهترین ایده نیست، زیرا درخواست شما ممکن است آویزان شود، به ویژه در دستگاه های تلفن همراه. بهتر است از Window.RequestanimationFrame () برای صرفه جویی در تمام تغییرات به بازپرداخت بعدی استفاده کنید. این یک تابع به عنوان یک استدلال طول می کشد، که به نوبه خود یک تمبر زمان را دریافت می کند:

const const \u003d window.performance.now () const dury \u003d 2000 window.requestanimationFrame (Const Progress \u003d در حال حاضر - شروع myelement.style.opacity \u003d پیشرفت / مدت اگر (پیشرفت< duration) { window.requestAnimationFrame(fadeIn) } }

به این ترتیب، یک انیمیشن بسیار صاف به دست می آید. در مقاله خود، مارک براون مذاکرات در مورد این موضوع.

ما کتابخانه خود را بنویسیم

این واقعیت که در DOM برای انجام هر گونه عملیات با عناصر باید مرتب شود، ممکن است به نظر می رسد بسیار خسته کننده نسبت به syntax jQuery $ (". foo"). CSS ((رنگ: "قرمز")) . اما چرا چند روش خود را نوشتم، تسهیل این کار؟

Const $ \u003d عملکرد $ (Const Elements \u003d Array.From (Select.QuerySelectorLall (Selector) Return (ElementS، HTML (NewTML) (Element \u003d\u003e Element.innerhtml \u003d newhtml))، CSS (Element \u003d\u003e Object.assign (Element.Style، Newcss))) این را بازگردانید)، در (رویداد، دستیار، گزینه ها) (این leements.poreach (Element \u003d\u003e (Element.AddeventListener (رویداد، دستیار، گزینه ها))) این را بازگردانید))

برنامه های پیچیده و سنگین وب امروز به طور معمول تبدیل شده اند. Crossbox و آسان برای استفاده از کتابخانه های نوع جی کوئری با قابلیت های گسترده آنها می تواند به شدت کمک به دستکاری DOM در پرواز. بنابراین، تعجب آور نیست که بسیاری از توسعه دهندگان از این کتابخانه ها استفاده می کنند که اغلب از آنها با API DOM بومی کار می کنند، که مشکلات زیادی وجود دارد. و اگرچه تمایز در مرورگرها همچنان یک مشکل باقی می ماند، DOM در حال حاضر در شکل بهتر از 5-6 سال پیش، زمانی که جی کوئری محبوبیت را به دست آورد.

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

شمارش شرکت های تابعه

برای نشان دادن، من از نشانه گذاری بعدی HTML استفاده خواهم کرد، در طول مقاله ما آن را چندین بار تغییر خواهیم داد:

• مثال یکی
• مثال دو
• مثال سه
• مثال چهار
• مثال پنج
• مثال شش

var mylist \u003d document.getElementbyid ("MyList")؛ console.log (mylist.children.length)؛ // 6 console.log (mylist.childelementcount)؛ // 6

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

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

من می توانم سعی کنم از childnodes.length استفاده کنم (به جای کودکان)، اما در نتیجه نگاه کنید:

var myList \u003d document.getElementbyid ("MyList")؛ console.log (mylist.childnodes.length)؛ // 13

این 13 را باز می گرداند، زیرا ChildNodes مجموعه ای از تمام گره ها است، از جمله فضاهای - این را در نظر بگیرید اگر شما مهم تر از تفاوت بین شرکت های تابعه و عناصر کودک هستید.

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

برای بررسی حضور عنصر شرکت تابعه، می توانم از روش Haschildnodes () استفاده کنم. این روش یک مقدار منطقی را به دست می دهد، گزارشگری در مورد دسترسی یا غیبت آنها:

var myList \u003d document.getElementbyid ("MyList")؛ console.log (mylist.haschildnodes ())؛ // درست است، واقعی.

من می دانم که در لیست من شرکت های تابعه وجود دارد، اما من می توانم HTML را تغییر دهم تا آنها نباشند؛ در حال حاضر نشانه گذاری به نظر می رسد این است:

و در اینجا نتیجه راه اندازی جدید Haschildnodes ():

console.log (mylist.haschildnodes ())؛ // درست است، واقعی.

این روش همچنان درست است. اگر چه لیست شامل هیچ آیتم نیست، فضای خاصی وجود دارد که نوع معتبر گره است. این روش تمام گره ها را در نظر می گیرد، نه تنها عناصر گره. برای ایجاد haschildnodes () بازگشت نادرست، ما باید دوباره علامت گذاری را تغییر دهیم:

و اکنون نتیجه مورد انتظار در کنسول نمایش داده می شود:

console.log (mylist.haschildnodes ())؛ // false

البته، اگر می دانم که می توانم یک فضا را ببینم، ابتدا من وجود گره های کودک را بررسی خواهم کرد، سپس با استفاده از اموال Nodetype، من تعریف می کنم که عناصر عناصر در میان آنها وجود دارد.

اضافه کردن و حذف شرکت های تابعه

تکنیک هایی وجود دارد که می تواند برای اضافه کردن و حذف عناصر از DOM استفاده شود. معروف ترین آنها بر اساس ترکیبی از روش های CreateElement () و Appendchild () است.

var myel \u003d document.createelement ("div")؛ Document.AppendChild (Myel)؛

در این مورد، من ایجاد می کنم

پیش