ilyachalov (ilyachalov) wrote,
ilyachalov
ilyachalov

Categories:

JavaScript: задача подсчета элементов в ветках списка

Решил задачу «Выведите список потомков в дереве» к подразделу 1.7 «Изменение документа» второй части учебника по JavaScript.

Название задачи странное, не отражает сути задания. На HTML-странице уже задан сложный (из нескольких уровней) список (по структуре — дерево), созданный с помощью HTML-элементов ul и li. Требуется с помощью скрипта на языке JavaScript добавить к тексту пунктов, имеющих потомков, число потомков в квадратных скобках.

Например, если задан такой список:
  • Стороны света
    • Север
    • Юг
    • Запад
    • Восток
То после работы скрипта он должен стать таким:
  • Стороны света [4]
    • Север
    • Юг
    • Запад
    • Восток

В принципе, для тех, кто читает упомянутый учебник, задача несложная. Тут не нужны алгоритмы обхода дерева, можно справиться с помощью методов DOM.

Моё решение такое:
let elements = document.querySelectorAll("li"); // находим на странице нужные HTML-элементы

for (let elem of elements) {                    // перебираем эти HTML-элементы в цикле
    let str = elem.firstChild.textContent;
    str = str.trim(); // необязательно
    
    if ( elem.firstElementChild ) {             // если у HTML-элемента есть потомки
        let n = elem.firstElementChild.children.length;
        elem.firstChild.textContent = str + " [" + n + "]"; // добавляем то, что требуется
    }
}

Решение авторов задачи, в принципе, такое же, только они используют для этого несколько другие инструменты. Например, метод document.getElementsByTagName("li") вместо document.querySelectorAll("li"). Инструментарий для работы с DOM-деревом в JavaScript довольно обширный, позволяет для любой задачи придумать несколько вариантов решения.
Tags: Образование, Программирование
Subscribe

  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your IP address will be recorded 

  • 0 comments