חיפוש אלמנטים בjavascript בצורה היעילה ביותר

[bdoron]

אני יודע שאם אני רוצה לשלוף ערך מאלמנט אני פשוט עושה getelementbyid ככה זה גם לclass או name,מה שהבנתי זה שכאשר אני משתמש בזה הוא למעשה עובר בכל הdom מה שאומר שכל אירוע כל פעם שאני רוצה אלמנט אני בעצם עושה חיפוש על כל הdom, שזה בהחלט לא יעיל, אני מחפש דרך והבנתי שקיימת דרך שאני יכול לחפש אלמנטים ברמת האירוע, זאת אומרת מה שאני רוצה לעשות זה למשל יש לי דף עם כמה divs ובכל דיב יש לי 3 inputs ואני לא רוצה שכל לחיצה על כפתור תגרום לחיפוש בכל הדף , אלא אני רוצה שבמידה ולחצתי על כפתור אז הוא יחפש אלמנט אך ורק בתוך הדיב שהוא נמצא, זה אומר שאם בתוך הdiv קיימים למשל 4 inputs ואחד מהם זה לחצן ושלושה טקסטבוקסים אז ואני רוצה את הנתונים מתוכם אז בלחיצת הכפתור הוא יעבור אך ורק בין 4 אלמנטים , אלא שקיימים איתו באותו הדיב, ולא יעבור על כל האלמנטים בדום

אשמח לדעת אם אני יכול לעשות דבר כזה . חפשתי ואני לא כל כך מוצא לצערי

[IlanF]

getElementById זה הדבר הכי יעיל שאתה יכול להשתמש בו.

אחרי זה יש querySelector שפחות יעיל אבל הרבה יותר גמיש

https://jsperf.com/getelementbyid-vs-queryselector

מה שאתה יכול לעשות זה למצוא את ה- div המקיף הכי קרוב ל- inputים שלך, לשמור אותו במשתנה ואז להריץ את החיפוש על ה- div הזה בלבד.

<div class="wrapper">
  <input name="x" value="1">
  <input name="y" value="2">
  <input name="z" value="3">
</div>
<script>
var wrapper = document.querySelector('.wrapper');

//on event
var inputs = wrapper.querySelectorAll('input');
//loop inputs or whatever
for(var i = 0; i < inputs.length; i++) {
  console.log(inputs[i].value);
}
</script>

querySelector מחזיר אלמנט בודד

querySelectorAll מחזיר אוסף של אלמנטים (nodeList)

[bdoron]

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

מישהו מכיר את הפקודה parentNode?

[shafan81]

מצרף פה פתרון למה שבקשת

תכנס לקישור זה ב- בcodePen

http://codepen.io/YaronMiro/pen/MapBwQ

תמלא את השדות בכל block וכאשר תלחץ על הכפתור של כל block אז תקבל בחלקן התחתון את הפלט של כל ה - Inputs שהוא מכיל בתוכו בלבד!

זו היא דוגמא פשוטה כדי שתבין את הרעיון.