Поиск по дом элементам. Правильный ли подход?

24 ноября 2020, 21:20

Кусок кода вырван из контекста, но надеюсь будет понятен. Есть простая форма, и в ней есть textarea. Таких форм на странице неограниченное количество. Я пытаюсь работать с ТЕКУЩЕЙ формой через e.target.form и циклом пробегаюсь по дочерним элементам в поисках нужного, проверяя их классы, пока не совпадет с условием:

const handleSaveTask = (e) => { 
    const newTask = document.createElement('li'); 
    newTask.classList.add('task_item'); 
 
    for (let i = 0; i < e.target.form.children.length; i++) { 
        if (e.target.form.children[i].classList.contains('js-task-area')) { 
            newTask.innerHTML = e.target.form.children[i].value; // записываем в новый таск данные из текущей textarea 
            e.target.form.previousElementSibling.appendChild(newTask); // ищем текущий тасклист и добавляем ему таск 
 
            e.target.form.children[i].value = ''; //очищаем текущую textarea 
        } 
    } 
    handleCheckArea(e); 
};

Вопрос: насколько хороша такая практика? Можно ли ее улучшить?

Answer 1

Можно так:

class Form { 
  constructor(node) { 
    this.node = node; 
 
    if (!this.node) return; 
 
    this.onTextarea = this.onTextarea.bind(this); 
 
    this.textarea = this.node.querySelector('textarea'); 
 
    this.textarea.addEventListener('click', this.onTextarea, false); 
  } 
 
  onTextarea() { 
    console.log(this.textarea.getAttribute('name')); 
  } 
} 
 
[...document.querySelectorAll('[data-widget="form"]')] 
  .forEach(form => new Form(form));

<form data-widget="form" action="#"><textarea name="1" id="1" cols="30" rows="10"></textarea></form> 
<form data-widget="form" action="#"><textarea name="2" id="2" cols="30" rows="10"></textarea></form> 
<form data-widget="form" action="#"><textarea name="3" id="3" cols="30" rows="10"></textarea></form>