В чем заключается аспект определения объема и правил назначения Javascript и DOM, которые не позволяют коду работать над вторым блоком html?

Question

HTML-код ниже - это экспортированная форма orgmode, и функция Javascript предназначена для преобразования блока <pre class="src src-emacs-lisp"> в <pre><code class="lisp">, чтобы он был выделен синтаксисом с помощью highlightjs .

Для некоторой причуды Javascript я не понимаю, что функция не работает во втором блоке. Я думал, что это был синтаксис HTML-кода в нем, но когда я переставляю блоки, ошибка всегда происходит на втором. Должно быть что-то в правилах Javascript, которые я не понимаю. Код для определения местоположения блоков работает нормально, и если я распечатываю их без обработки, все работает. Когда я применяю преобразования, все идет не так. Какую особенность Javascript я не понимаю?

Код, который просто распечатывает их, работает нормально. Все они обнаружены.

document.addEventListener('DOMContentLoaded', (event) => {
var lispBlocks = document.getElementsByClassName('src src-emacs-lisp');
alert(lispBlocks.length);
for (i=0;i<lispBlocks.length;i++){
    var iHtml = lispBlocks[i].outerHTML;
    //alert(lispBlocks[i].outerHTML);
    alert(iHtml);
  };
});

С кодом, который преобразует их, дела идут на юг

document.addEventListener('DOMContentLoaded', (event) => {
var lispBlocks = document.getElementsByClassName('src src-emacs-lisp');
alert(lispBlocks.length);
var iHtml;
var lBlockText;
for (i=0;i<lispBlocks.length;i++){
    //lispBlocks[i].className = '';
    iHtml = lispBlocks[i].innerHTML;
    alert(lispBlocks[i].innerHTML);
    alert(lispBlocks[i].outerHTML);
    lBlockText = '<pre><code class="lisp">' + iHtml + '

'; оповещения (lBlockText); lispBlocks [i] .outerHTML = lBlockText; //alert(lispBlocks[i].outerHTML); //hljs.highlightBlock(lispBlocks[i]); }; }); <! - language: lang-html ->

;; after splitting a frame automatically, switch to the new window (unless we
;; were in the minibuffer)
(setq split-window-preferred-function 'my/split-window-func)
(defun my/split-window-func (&optional window)
(let ((new-window (split-window-sensibly window)))
    (if (not (active-minibuffer-window))
    (select-window new-window))))

 (defun split-window--select-window (orig-func &rest args)
"Switch to the other window after a `split-window'"
(let ((cur-window (selected-window))
      (new-window (apply orig-func args)))
  (when (equal (window-buffer cur-window) (window-buffer new-window))
    (select-window new-window))
  new-window))
  (advice-add 'split-window :around #'split-window--select-window)

;; settings for default frames
(add-to-list 'default-frame-alist '(font . FONT ))
;;or

;; set-face-atribute, ='default nil= for all existing frames and new frames
;; ='default t= for new frames only
;; function sets a number of attributes besides :font see docs
(set-face-attribute 'default nil :font FONT )

;;set frame font
(set-frame-font FONT nil t)

Answer 1

Проблема в том, что getElementsByClassName возвращает live list

Следовательно, при изменении outerHTML вы изменяете список, потому что вы изменили класс элемента, который находится в реальном списке

В этом примере у вас будет список элементов, [a, b, c] и i == 0

Вы изменяете a так, что он исчезает из списка, теперь список равен [b, c], но i увеличивается до 1, поэтому следующая итерация изменится c, пропуская b

использовать

var lispBlocks = document.querySelectorAll('.src.src-emacs-lisp');

вместо

В качестве альтернативы вы можете использовать цикл while

while(lispBlocks.length) {
    iHtml = lispBlocks[0].innerHTML; // note, the hard coded `0` here
    // etc
}