query selector לפי תוכן טקסט של אלמנט

שלום עולם 0

במדריכים השונים (ובדברי רבותינו הבוטים) אני שומע על בורר query

:cotains("text")

שאמור להחזיר את אלמנט הHTML שהטקסט שלו מכיל "text". אולם בפועל, כשאני משתמש בו במתודת JS המובנית document.querySelector הדפדפן טוען שזו שגיאה ו"is not a vaild selector ...".

האם הבורר הזה נתמך בעבר וננטש?

בCSS וJQuery המקוריים נראה שהוא עדיין בשימוש.

אם זה לא עובד כבר בjs רגיל (או שמעולם לא עבד? זכור לי שהשתמשתי), יש תחליף (מלבד לולאות וכל כי האי גוונא)?

נ.ב. טרם פרסמתי את השאלה מיציתי את האפשרות למצוא את התשובה בעצמי. חיפשתי בכל לשון שעלה בדעתי והפכתי בכל האתרים הרלוונטיים, ועם זאת, לא ברירא מילתא. לכן, בתשובות אסור כל שימוש בצורות של השורש גגל.

dovid

הבאת לינק לאתר caniuse
https://caniuse.com/?search=contains
והבאת משמה ראיה שזה נראה קיים בCSS, לא מדברים שמה על CSS.
זה לא קיים בCSS (תוכל לקרוא על זה פה).

בjQuery זה קיים ואין סיבה שלא, אתה יכול גם לכתוב קוד לבצע את זה.
בJS רגיל אין contains בquerySelector אבל אתה יכול לעשות קוד (בלי לולאה...)
הנה דוגמה,
במקום לכתוב בjQuery

$('div:contains("text")').hide();

אתה יכול לכתוב בJS:

  [...document.querySelectorAll('div')]
         .filter(x => x.innerText.includes('text'))
         .forEach(x => x.style.setProperty('display', 'none'));

Elhanan

לפי הבנתי, אכן querySelector - אינו תומך ב״:contains״, לכאורה זה תכונה שה API של ה DOM לא חושף לאלמנטי HTML שמכילים טקסט. זה תחביר ששמור ל״JQuery״ ואכן בו הוא עובד, לדוגמא: $("div:contains('text')").css("font-size", "100px");

מחיפוש ברשת נראה שכן יש לquerySelector תמיכה ב״:contains״ אבל, כל הניסיונות שלי לתפוס עם querySelectorAll את אלמנט שמכיל את הטקסט הנבחר עם :contains לא צלחו עד כה (ניסיתי לעבור על כל המערך עם לולאה, להשתמש בתכונת childNodes כדי לתפוס את התתי אלמנטים וכד׳), מה שכן, אם אתה רוצה באמצעות JS טהור לתפוס רק את האלמנטים שמכילים ״text״, אפשר לתפוס את האלמנט אב באמצעות ״getElementsBy....״, ולעבור בלולאה על כל אלמנט, לאחמ״כ תוכל לבדוק אם הוא מכיל טקסט באמצעות innerText.includes("text"), ובמידה וכן לשנות לו את הCSS או כל דבר אחר שתרצה..

לדוגמא:

	var divs = document.getElementsByTagName("div");
		var elements = divs[0].getElementsByTagName("*");
		for (var j = 0; j < elements.length; j++) {
			if (elements[j].innerText.includes("Test")) {
				elements[j].style.fontSize = "100px";
			}
		}