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

بیایید این API را با جزئیات بیشتری بررسی کنیم:

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

پرس و جوهای DOM

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

Const myElement = document.querySelector ("#foo > div.bar")

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

MyElement.matches("div.bar") === درست است

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

Const myElements = document.querySelectorAll(.bar")

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

Const myChildElemet = myElement.querySelector("ورودی") // به جای: // document.querySelector("#foo > ورودی div.bar")

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

Const element1 = document.querySelectorAll("div") const element2 = document.getElementsByTagName("div") const newElement = document.createElement("div") document.body.appendChild(newElement) element1.length === element2.length // نادرست

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

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

علاوه بر این، .querySelectorAll() دو اخطار کوچک دارد. شما نمی توانید فقط متدها را روی نتایج فراخوانی کنید و انتظار داشته باشید که آنها برای هر یک اعمال شوند (مانند کاری که ممکن است با جی کوئری انجام دهید). در هر صورت، باید تمام عناصر را در یک حلقه تکرار کنید. دوم، شیء برگشتی فهرستی از عناصر است، نه یک آرایه. بنابراین، روش های آرایه کار نمی کنند. البته، متدهایی برای لیست ها وجود دارد، چیزی مانند () .forEach، اما، افسوس، آنها برای همه موارد مناسب نیستند. بنابراین بهتر است لیست را به یک آرایه تبدیل کنید:

// استفاده از Array.from() Array.from(myElements).forEach(doSomethingWithEachElement) // یا نمونه اولیه آرایه (قبل از ES6) Array.prototype.forEach.call(myElements, doSomethingWithEachElement) // Simpler.call(Each) myElements، doSomethingWithEachElement)

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

MyElement.children myElement.firstElementChild myElement.lastElementChild myElement.previousElementSibling myElement.nextElementSibling

از آنجایی که رابط Element از رابط Node به ارث رسیده است، ویژگی های زیر نیز وجود دارد:

MyElement.childNodes myElement.firstChild myElement.lastChild myElement.previousSibling myElement.nextSibling myElement.parentNode myElement.parentElement

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

MyElement.firstChild.nodeType === 3 // این عنصر یک گره متن خواهد بود

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

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

MyElement.classList.add("foo") myElement.classList.remove("bar") myElement.classList.toggle("baz")

افزودن یک ویژگی به یک عنصر مانند هر شیء است:

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

می توانید از متدهای .getAttibute، .setAttribute() و .removeAttribute() استفاده کنید. آنها بلافاصله ویژگی های HTML عنصر را تغییر می دهند (برخلاف ویژگی های DOM)، که باعث رندر مجدد مرورگر می شود (شما می توانید با بررسی عنصر با استفاده از ابزارهای توسعه دهنده مرورگر، تمام تغییرات را مشاهده کنید). چنین ترسیم مجدد نه تنها به منابع بیشتری نسبت به تنظیم ویژگی های DOM نیاز دارد، بلکه می تواند منجر به خطاهای غیرمنتظره شود.

معمولاً برای عناصری استفاده می‌شود که دارای ویژگی‌های DOM متناظر نیستند، مانند colspan. یا اگر استفاده از آنها واقعاً ضروری است، به عنوان مثال برای ویژگی های HTML هنگام ارث بردن (نگاه کنید به).

اضافه کردن سبک های CSS

آنها مانند سایر ویژگی ها اضافه می شوند:

MyElement.style.marginLeft = "2em"

برخی از ویژگی های خاص را می توان با استفاده از .style تنظیم کرد، اما اگر می خواهید مقادیر را پس از محاسبات دریافت کنید، بهتر است از window.getComputedStyle() استفاده کنید. این متد یک عنصر دریافت می‌کند و یک CSSStyleDeclaration حاوی استایل‌های خود عنصر و والد آن را برمی‌گرداند:

Window.getComputedStyle(myElement).getPropertyValue("margin-left")

تغییر DOM

می توانید عناصر را جابجا کنید:

// افزودن عنصر1 به‌عنوان آخرین فرزند عنصر2 element1.appendChild(element2) // عنصر2 را به‌عنوان فرزند عنصر1 قبل از element3 وارد کنید element1.insertBefore(element2, element3)

اگر نمی‌خواهید آن را جابه‌جا کنید، اما نیاز به درج یک کپی دارید، از:

// ایجاد یک کلون const myElementClone = myElement.cloneNode() myParentElement.appendChild(myElementClone)

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

البته می توانید عناصر جدیدی ایجاد کنید:

Const myNewElement = document.createElement("div") const myNewTextNode = document.createTextNode("متن")

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

MyParentElement.removeChild(myElement)

همچنین می توانید به صورت غیر مستقیم تماس بگیرید:

MyElement.parentNode.removeChild(myElement)

روش هایی برای عناصر

هر عنصر دارای ویژگی هایی مانند .innerHTML و .textContent است، آنها حاوی کد HTML و بر این اساس، خود متن هستند. مثال زیر محتوای یک عنصر را تغییر می دهد:

// تغییر HTML myElement.innerHTML = ` محتوای جدید ( el.addEventListener("تغییر"، تابع (رویداد) (consol.log(event.target.value)))))

جلوگیری از اقدامات پیش فرض

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

MyForm.addEventListener("submit"، تابع (رویداد) (const name = this.querySelector("#name") if (name.value === "Donald Duck") { alert("You gotta be kidding!") event.preventDefault() } }) !}

متد .stopPropagation() به شما کمک می کند که یک کنترل کننده رویداد خاص به عنصر فرزند و یک کنترل کننده رویداد دوم برای همان رویداد به والد اختصاص داده شده باشد.

همانطور که قبلا گفته شد، متد ()addEventListener آرگومان سوم اختیاری را در قالب یک شی پیکربندی می گیرد. این شی باید دارای یکی از ویژگی های بولی زیر باشد (همه به طور پیش فرض روی false تنظیم شده اند):

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

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

MyElement.addEventListener (نوع، شنونده، درست)

هندلرها با استفاده از متد .removeEventListener حذف می شوند، که دو آرگومان دارد: نوع رویداد و ارجاع به کنترل کننده برای حذف. به عنوان مثال، ویژگی Once را می توان به صورت زیر پیاده سازی کرد:

MyElement.addEventListener("تغییر"، تابع شنونده (رویداد) (consol.log(event.type + "روی " + این فعال شد) this.removeEventListener("تغییر"، شنونده)))

وراثت

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

MyForm.addEventListener("تغییر"، تابع (رویداد) (const target = event.target if (target.matches("input")) (consol.log(target.value) ))

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

انیمیشن

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

فراخوانی متد window.setTimeout() تا زمانی که انیمیشن به پایان برسد ایده خوبی نیست، زیرا ممکن است برنامه شما مسدود شود، به خصوص در دستگاه های تلفن همراه. بهتر است از window.requestAnimationFrame() برای ذخیره تمام تغییرات تا ترسیم مجدد بعدی استفاده کنید. تابعی را به عنوان آرگومان می گیرد که به نوبه خود مهر زمانی دریافت می کند:

Const start = window.performance.now() const duration = 2000 window.requestAnimationFrame(function fadeIn (اکنون)) ( const progress = now - start myElement.style.opacity = پیشرفت / مدت اگر (پیشرفت< duration) { window.requestAnimationFrame(fadeIn) } }

به این ترتیب انیمیشن بسیار روان به دست می آید. مارک براون در مقاله خود به این موضوع می پردازد.

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

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

Const $ = تابع $ (انتخاب کننده، متن = سند) ( عناصر const = Array.from(context.querySelectorAll(انتخاب کننده)) برگرداندن ( عناصر، html (newHtml) ( this.elements.forEach(element => ( element.innerHTML = newHtml )) این را برگرداند ), css (newCss) ( this.elements.forEach(element => ( Object.assign(element.style, newCss) )) این را برگرداند, در (رویداد، کنترل کننده، گزینه ها) ( this.elements .forEach(element => ( element.addEventListener(رویداد، کنترل‌کننده، گزینه‌ها))) این را برگردانید)))

شبه کد

$(".rightArrow").click(function() (rightArrowParents = this.dom(); //.dom(); تابع شبه است ... باید کل هشدار را نشان دهد(rightArrowParents); ));

پیام هشدار این خواهد بود:

بدن div.lol a.rightArrow

چگونه می توانم این را با استفاده از javascript/jquery دریافت کنم؟

استفاده از jQuery مانند این (به دنبال راه حلی که از jQuery به جز رویداد استفاده نمی کند، اگر این مهم باشد، تابع بسیار کمتری فراخوانی می کند):

مثال زمان واقعی:

$(".rightArrow").click(function() ( var rightArrowParents = ; $(this).parents().addBack().not("html").each(function() ( var entry = this.tagName .toLowerCase(); if (this.className) ( ورودی += "." + this.className.replace(/ /g, "."); ) rightArrowParents.push(entry); )); هشدار(rightArrowParents.join (""))؛ بازگشت نادرست؛ ))؛ اینجا کلیک کنید

(در مثال های زنده، من ویژگی کلاس را در div به روز کردم تا lol multi باشد تا مدیریت چندین کلاس را نشان دهم.)

در اینجا یک راه حل برای تطبیق دقیق عناصر وجود دارد.

درک این نکته مهم است که انتخاب کننده (واقعی نیست) که ابزارهای کروم نشان می‌دهند عنصر موجود در DOM را به‌طور منحصربه‌فرد شناسایی نمی‌کنند. ( برای مثال، بین لیستی از عناصر span متوالی تمایز قائل نمی شود. هیچ اطلاعات موقعیت یابی / نمایه سازی وجود ندارد)

$.fn.fullSelector = تابع () ( var path = this.parents().addBack(); var quickCss = path.get().map(function (مورد) ( var self = $(item), id = item .id ? "#" + item.id: ""، clss = item.classList.length ? item.classList.toString().split(" ").map(function (c) ( return "." + c; )).join(""): ""، name = item.nodeName.toLowerCase()، index = self.siblings(name).length ? ":nth-child(" + (self.index() + 1) + ")" : ""؛ if (name === "html" || name === "body") (نام بازگشتی؛ ) بازگشت نام + فهرست + id + clss; )).join(" > ") بازگشت QuickCss؛ )؛

و می توانید از آن به صورت زیر استفاده کنید:

Console.log($("some-selector").fullSelector());

من یک قطعه از T.J. شلوغ تا کوچک پلاگین جی کوئری. من از نسخه jQuery استفاده کردم، حتی اگر او درست می‌گوید که سربار کاملاً غیرضروری است، اما من فقط از آن برای اهداف اشکال‌زدایی استفاده می‌کنم، بنابراین اهمیتی نمی‌دهم.

استفاده:

دهانه تودرتو دهانه ساده پیش

// نتیجه (آرایه): ["body"، "div.sampleClass"] $("span").getDomPath(false) // نتیجه (رشته): body > div.sampleClass $("span").getDomPath( ) // نتیجه (آرایه): ["body", "div#test"] $("pre").getDomPath(false) // نتیجه (رشته): body > div#test $("pre").getDomPath ()

Var obj = $("#show-editor-button")، مسیر = ""; while (نوع obj.prop("tagName") != "تعریف نشده")( if (obj.attr("کلاس"))( مسیر = "."+obj.attr("کلاس").replace(/\s /g , ".") + path; ) if (obj.attr("id"))( path = "#"+obj.attr("id") + مسیر؛ ) path = " " +obj.prop( "tagName").toLowerCase() + path; obj = obj.parent(); ) console.log(path);

سلام این تابع خطای مربوط به عدم نمایش عنصر فعلی در مسیر را برطرف می کند

هماکنون بررسی اش کن

$j(".wrapper").click(function(event) ( selectedElement=$j(event.target); var rightArrowParents = ; $j(event.target).parents().not("html,body") .each(function() (var entry = this.tagName.toLowerCase(); if (this.className) ( ورودی += "." + this.className.replace(/ /g، "."); )دیگر اگر (this.id)( entry += "#" + this.id; ) entry=replaceAll(entry,.","."); rightArrowParents.push(entry); )); rightArrowParents.reverse(); // if(event.target.nodeName.toLowerCase()=="a" || event.target.nodeName.toLowerCase()=="h1")( var entry = event.target.nodeName.toLowerCase(); if (رویداد .target.className) ( ورودی += "." + event.target.className.replace(/ /g، ".")؛ )دیگر if(event.target.id)( ورودی += "#" + رویداد. target.id; ) rightArrowParents.push(entry); // )

جایی که $j = متغیر jQuery

همچنین مشکل را با .. در نام کلاس حل کنید

در اینجا تابع جایگزینی است:

تابع escapeRegExp(str) ( return str.replace(/([.*+?^=!:$()()|\[\]\/\\])/g، "\\$1"); ) تابع replaceAll(str, find, replace) ( return str.replace (new RegExp(escapeRegExp(find), "g"), جایگزین)؛ )

در اینجا یک نسخه JS بومی است که مسیر jQuery را برمی گرداند. من همچنین شناسه هایی را برای عناصر در صورت وجود اضافه می کنم. این به شما این امکان را می دهد که در صورت مشاهده id در آرایه، کوتاه ترین مسیر را طی کنید.

Var path = getDomPath(element); console.log(path.join(" > "));

Body > section:eq(0) > div:eq(3) > section#content > section#firehose > div#firehoselist > article#firehose-46813651 > header > h2 > span#title-46813651

در اینجا تابع است.

تابع getDomPath(el) ( var stack = ; while (el.parentNode != null) (consol.log(el.nodeName)؛ var sibCount = 0؛ var sibIndex = 0؛ برای (var i = 0؛ i< el.parentNode.childNodes.length; i++) { var sib = el.parentNode.childNodes[i]; if (sib.nodeName == el.nodeName) { if (sib === el) { sibIndex = sibCount; } sibCount++; } } if (el.hasAttribute("id") && el.id != "") { stack.unshift(el.nodeName.toLowerCase() + "#" + el.id); } else if (sibCount >1) ( stack.unshift(el.nodeName.toLowerCase() + ":eq(" + sibIndex + ")")؛ ) else (stack.unshift(el.nodeName.toLowerCase()); ) el = el.parentNode ; ) return stack.slice(1); // عنصر html را حذف می کند)

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

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

شمارش گره های کودک

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

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

Var myList = document.getElementById("myList"); console.log(myList.children.length); // 6 console.log(myList.childElementCount); // 6

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

در مثال دوم، من از متد childElementCount استفاده می‌کنم، که فکر می‌کنم روشی منظم‌تر و بالقوه قابل نگهداری‌تر است (در این مورد بعداً بیشتر بحث کنید، فکر نمی‌کنم در درک این که چه کار می‌کند مشکلی نداشته باشید).

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

Var myList = document.getElementById("myList"); console.log(myList.childNodes.length); // 13

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

بررسی وجود گره های فرزند

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

Var myList = document.getElementById("myList"); console.log(myList.hasChildNodes()); // درست است، واقعی

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

و در اینجا نتیجه اجرای مجدد hasChildNodes() است:

Console.log(myList.hasChildNodes()); // درست است، واقعی

روش همچنان true را برمی گرداند. اگرچه لیست حاوی هیچ عنصری نیست، اما حاوی یک فاصله است که یک نوع گره معتبر است. این روشهمه گره ها را در نظر می گیرد، نه فقط گره های عنصر را. برای اینکه hasChildNodes() false را برگرداند، باید علامت گذاری را دوباره تغییر دهیم:

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

Console.log(myList.hasChildNodes()); // نادرست

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

افزودن و حذف عناصر کودک

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

Var myEl = document.createElement("div"); document.body.appendChild(myEl);

در این حالت، من با استفاده از متد ()creeElement ایجاد می کنم و سپس آن را به بدنه اضافه می کنم. بسیار ساده است و احتمالا قبلا از این تکنیک استفاده کرده اید.

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

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

متن نمونه

با کد زیر می توانم مکان لیست را تغییر دهم:

Var myList = document.getElementById("myList")، container = document.getElementById("c"); container.appendChild(myList);

DOM نهایی به شکل زیر خواهد بود:

متن نمونه

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

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

همچنین می توانم با استفاده از removeChild() یک عنصر فرزند را به طور کامل از DOM حذف کنم. در اینجا نحوه حذف لیست ما از مثال قبلی آمده است:

Var myList = document.getElementById("myList")، container = document.getElementById("c"); container.removeChild(myList);

اکنون عنصر حذف شده است. متد removeChild() عنصر حذف شده را برمی گرداند تا در صورت نیاز بعداً بتوانم آن را ذخیره کنم.

Var myOldChild = document.body.removeChild(myList); document.body.appendChild(myOldChild);

همچنین یک متد ChildNode.remove() وجود دارد که نسبتاً اخیراً به مشخصات اضافه شده است:

Var myList = document.getElementById("myList"); myList.remove();

این روش شیء راه دور را بر نمی گرداند و در IE (فقط Edge) کار نمی کند. و هر دو روش گره های متنی را همانند گره های عنصر حذف می کنند.

جایگزینی عناصر کودک

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

متن نمونه

Var myPar = document.getElementById("par")، myDiv = document.createElement("div"); myDiv.className = "مثال"; myDiv.appendChild(document.createTextNode("متن عنصر جدید")); document.body.replaceChild(myDiv، myPar);

متن عنصر جدید

همانطور که می بینید، متد ()placeChild دو آرگومان می گیرد: عنصر جدید و عنصر قدیمی که جایگزین می شود.

من همچنین می توانم از این روش برای جابجایی یک عنصر موجود استفاده کنم. نگاهی به HTML زیر بیندازید:

متن مثال 1

متن نمونه 2

متن مثال 3

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

Var myPar1 = document.getElementById("par1")، myPar3 = document.getElementById("par3"); document.body.replaceChild(myPar1, myPar3);

اکنون DOM تولید شده به شکل زیر است:

متن نمونه 2

متن مثال 1

انتخاب فرزندان خاص

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

ویژگی های firstElementChild و lastElementChild دقیقاً همان کاری را انجام می دهند که نام آنها نشان می دهد: اولین و آخرین عنصر فرزند را انتخاب کنید. بیایید به نشانه گذاری خود برگردیم:

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

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

Var myList = document.getElementById("myList"); console.log(myList.firstElementChild.innerHTML); // "نمونه یک" console.log(myList.lastElementChild.innerHTML); // "مثال شش"

همچنین اگر بخواهم عناصر فرزندی غیر از اولی یا آخری را انتخاب کنم، می توانم از ویژگی های previousElementSibling و nextElementSibling استفاده کنم. این کار با ترکیب ویژگی های firstElementChild و lastElementChild انجام می شود:

Var myList = document.getElementById("myList"); console.log(myList.firstElementChild.nextElementSibling.innerHTML); // "مثال دو" console.log(myList.lastElementChild.previousElementSibling.innerHTML); // "مثال پنج"

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

درج محتوا در DOM

من قبلاً به روش هایی برای درج عناصر در DOM نگاه کرده ام. بیایید به ادامه مطلب برویم موضوع مشابهو نگاهی به گزینه های جدید برای درج محتوا بیاندازید.

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

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

پاراگراف مثال

به پاراگرافی که می‌خواهم ابتدا حذف کنم و سپس آن را قبل از فهرست درج کنم، توجه کنید، همه اینها در یک لحظه:

Var myList = document.getElementById("myList")، container = document.getElementBy("c")، myPar = document.getElementById("par"); container.insertBefore(myPar, myList);

در HTML حاصل، پاراگراف قبل از لیست ظاهر می شود و این روش دیگری برای بسته بندی عنصر است.

پاراگراف مثال

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

مانند ()placeChild، insertBefore() دو آرگومان می گیرد: عنصری که باید اضافه شود و عنصری که می خواهیم آن را قبل از آن درج کنیم.

این روش ساده است. بیایید اکنون یک روش درج قدرتمندتر را امتحان کنیم: متد insertAdjacentHTML().