getElementsByTagName returns array with null elements

Question

I have this Tampermonkey script:

// ==UserScript==
// @name         Remove strong tags
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  remove answers
// @author       You
// @match        http://*/*
// @grant        GM_log
// @run-at       document-end
// ==/UserScript==

setTimeout((function() {
    'use strict';

    var allStrong = document.getElementsByTagName("strong");
    GM_log(allStrong);

    for (var i=0, max=allStrong.length; i < max; i++) {
        var strong = allStrong.item(i);
        GM_log(strong);
        if(strong && strong.parentNode.tagName == "LI") {
            strong.parentNode.appendChild(strong.firstChild);
            strong.parentNode.removeChild(strong);
        }
    }
})(), 5000);

Out of 8 strong tags that fit the criteria, it only replaces 4.

This is printed in the Chrome console.

The array when first printed has 8 elements, but then the last 4 elements are printed as undefined.

Why is this happening?

I don't think the problem comes from the code being executed before the full page load, because I put a large timeout.

This is the page where I'm running it.

Answer 1

getElementsByTagName returns a so-called live NodeList, not a static Array - it means that it contains up-to-date results of your query.

So, after each of your iterations, one of the elements is removed as it is no longer <strong> element.

You have 2 choices here:

• Transform NodeList into normal Array (eg. by using Array.from)
• Always access first element of your NodeList