Поиск первого элемента DOM и присвоение атрибута

Question

Есть огромный html-документ с запутанной структурой. Нужно:

…если первостоящий элемент с классом abc1 или abc2 содержит div и в нём какой-нибудь элемент с классом changed, то присвоить этому элементу атрибут id.
…если элемента с классом changed в диве нет, то присвоить атрибут диву.
…если и дива нет, присвоить атрибут элементам abc1 или abc2.

html:

…
<td class="abc1">
  <div>
    bla bla bla <ins class="changed">bla</ins> bla bla
  </div>
</td>
…

Чтобы в последствии можно было работать с элементом под присвоенным id.

document.getElementById("myid")

Как это проще всего сделать? Можно было бы через querySelector, но он возвращает «не живые» объекты, атрибут получается дохлый. Да и как определить, какой элемент (abc1 или abc2) в документе стоит раньше от начала?

Answer 1

Большую часть кода занимают варианты разметки и комментарии:

console.clear();
// Получаем всё элементы с классом "abc*"
let elems = document.querySelectorAll("[class^=abc]");
/* Перебираем полученную коллекцию */
elems.forEach((el, i) => {
  ( // Находим элемент с нужным классом вложенный в <div> или
    el.querySelector("div > .changed") ||
    // просто вложенный <div> или
    el.querySelector("div") ||
    // элемент с нужным классом или
    el.querySelector(".changed") ||
    // сам родительский элемент
    el
    // Добавляем свойство "id"
  ).id = "myid_" + i;
});

console.log('Первым идёт элемент с классом: ', elems[0].className);
console.log(document.querySelector("table").outerHTML);

<table><tbody><tr>
    
  <!-- ID добавится к элементу с классом "changed" -->
  <td class="abc2">
    <div>
      bla bla bla <ins class="changed">bla</ins> bla bla
    </div>
  </td>

  <!-- ID добавится к элементу с классом "changed" -->
  <td class="abc1">
    <div>
      bla bla bla <ins class="changed">bla</ins> bla bla
    </div>
  </td>

  <!-- ID добавится к вложенному <div> -->
  <td class="abc1">
    <div>
      bla bla bla <ins class="no-changed">bla</ins> bla bla
    </div>
  </td>

  <!-- ID добавится к элементу с классом "changed" -->
  <td class="abc2">
    bla bla bla <ins class="changed">bla</ins> bla bla
  </td>

  <!-- ID добавится к родительскому элементу -->
  <td class="abc1">
    bla bla bla <ins class="no-changed">bla</ins> bla bla
  </td>
      
</tr></tbody></table>

БЛОГ НА HUSL

Поиск первого элемента DOM и присвоение атрибута

Ответы (1 шт):