querySelectorAll()返回[object NodeList]而非实际元素的问题求助

我在JavaScript里获取HTML div元素时碰到个怪事：两个结构差不多的函数moveDiv1和revealDiv1里，同样调用container.querySelectorAll('.planet-waves-container > div')，在moveDiv1里能返回包含实际元素的列表，但在revealDiv1里只输出[object NodeList]，没法正常操作元素。

相关HTML代码片段 #

<div class="planet-waves" id="planet-waves">
                <div class="titulo1">Planet Waves</div>
                <div class="grupo-botoes">
                    <div class="klee-rad" id="klee" name="checkbox1" value="klee" onclick="toggleButton('klee','grupo-botoes'); moveDiv1('klee');"></div>
                    <div class="ayaka-rad" id="ayaka" name="checkbox1" value="ayaka" onclick="toggleButton('ayaka','grupo-botoes'); moveDiv1('ayaka');"></div>
                    <div class="ningguang-rad" id="ningguang" name="checkbox1" value="ningguang" onclick="toggleButton('ningguang','grupo-botoes'); moveDiv1('ningguang');"></div>
                    <div class="zhongli-rad" id="zhongli" name="checkbox1" value="zhongli" onclick="toggleButton('zhongli','grupo-botoes'); moveDiv1('zhongli');"></div>
                </div>
                <div class="planet-waves-container">
                    <div class="klee">
                        <img src="../Dados/Genshin_html_images/Teams/Planet%20Waves/Character_Klee_Full_Wish.png">
                        <div class="klee-bot">
                            <div class="solar" id="solar" name="checkbox1.1" value="solar" onclick="toggleButton('solar','klee-bot'); revealDiv1('solar','klee')"></div>
                            <div class="shim" id="shim" name="checkbox1.1" value="shim" onclick="toggleButton('shim','klee-bot'); revealDiv1('shim','klee')"></div>
                        </div>
                        <div class="klee-textos">
                            <div class="texto-solar">
                                <div class="titulo3">Solar Pearl</div>
                                <div class="corpo-descricao-4">
                                    <p>Base ATK: 510; CRIT Rate 27.6%</p>
                                    <p>Solar Shine: Normal Attack hits increase Elemental Skill and Elemental Burst DMG
                                        by 20~40% for 6s. Likewise, Elemental Skill or Elemental Burst hits increase Normal
                                        Attack DMG by 20~40% for 6s.</p>
                                </div>
                            </div>
                            <div class="texto-shim">
                                <div class="titulo3">Shimenawa's Reminiscence ④</div>
                                <div class="corpo-descricao-4">
                                    <p>2 Piece: ATK +18%</p>
                                    <p>4 Piece: When casting an Elemental Skill, if the character has 15 or more Energy,
                                        they lose 15 Energy and Normal/Charged/Plunging Attack DMG is increased by 50% for
                                        10s. This effect will not trigger again during that duration.</p>
                                </div>
                            </div>
                        </div>
                    </div>
</div>

JavaScript函数moveDiv1() #

function moveDiv1(character) {
    console.log("moveDiv1 function called with character: " + character);
    var container = document.querySelector('.planet-waves-container');
    var characterDivImg = container.querySelector('.' + character + ' img');
    var characterDivItems = container.querySelector('.' + character + ' .' + character + '-bot');
    var characterDivItemsDescr = container.querySelector('.' + character + ' .' + character + '-textos');
    var allDivs = container.querySelectorAll('div[class$="-rad"]');
    var allCharacterDivsImg = container.querySelectorAll('.planet-waves-container > div img');
    var allCharacters = container.querySelectorAll('.planet-waves-container > div');
    var allCharacterDivsItems = [];

    allCharacters.forEach(function(character) {
        allCharacterDivsItems.push(container.querySelectorAll('.'+character.classList[0]+' > div'));
    });

    console.log("All characters: ", allCharacters);
    console.log("All character div items: ", allCharacterDivsItems);
    console.log("Character Image: ", characterDivImg);
    console.log("Character Items: ", characterDivItems);

    allCharacterDivsImg.forEach(function(div) {
        console.log("Adding hide2 class to all img elements");
        div.classList.add('hide2');
    });

    for (let i = 0; i < allCharacterDivsItems.length; i++) {
        allCharacterDivsItems[i].forEach(function(div) {
            console.log("Adding hide2 class to div items");
            div.classList.add('hide2');
        });
    }

    characterDivImg.classList.remove('hide2');
    characterDivImg.classList.remove('hide1');
    characterDivItems.classList.remove('hide2');
    characterDivItems.classList.remove('hide1');
    characterDivItemsDescr.classList.remove('hide2');
    characterDivItemsDescr.classList.remove('hide1');

    container.classList.remove('show1');

    setTimeout(function() {
        console.log("Adding show1 class to images and items");
            characterDivImg.classList.add('show1');
            characterDivItems.classList.add('show1');
            characterDivItemsDescr.classList.add('show1');
    }, 0);

    return allCharacters;
}

JavaScript函数revealDiv1() #

function revealDiv1(item, character) {
    var container = document.querySelector('.planet-waves-container');
    var characterDivItemsDescr = container.querySelector('.' + character + '-textos');
    var itemDescr = characterDivItemsDescr.querySelector('.texto-' + item);
    var allItems = [];
    var allCharacters = container.querySelectorAll('.planet-waves-container > div');
    var allCharacterDivsItems = [];

    console.log("All Characters: " + allCharacters)

    allCharacters.forEach(function(character) {
        allCharacterDivsItems.push(container.querySelectorAll('.'+character.classList[0]+' > div'));
    });


    console.log("All Character Divs Items: " + allCharacterDivItems)

    console.log('All Items: ' + allItems)

    var allCharacterDivItemsDescr = [];

    console.log('All Character Items Descriptions: ' + allCharacterDivItemsDescr);

    allCharacterDivItemsDescr.forEach(function(div) {
        div.classList.add('vanish');
    });

    itemDescr.classList.remove('vanish');
    container.classList.remove('vanish');

    setTimeout(function() {
        itemDescr.classList.add('reveal');
    }, 500);
}

问题根源与解决办法 #

这个问题不是querySelectorAll返回的结果不一样，而是console.log的输出方式不同：

• 在moveDiv1里，你用的是console.log("All characters: ", allCharacters);，逗号分隔参数，浏览器会把NodeList展开成可查看的元素列表；
• 在revealDiv1里，你用的是console.log("All Characters: " + allCharacters)，加号会把NodeList强制转成字符串，也就是[object NodeList]。

另外，revealDiv1里还有个逻辑错误：你定义了allCharacterDivItemsDescr = []，这是个空数组，后面的forEach根本不会执行，应该改成获取所有需要隐藏的描述元素。

修改后的revealDiv1关键部分：

function revealDiv1(item, character) {
    var container = document.querySelector('.planet-waves-container');
    var characterDivItemsDescr = container.querySelector('.' + character + '-textos');
    var itemDescr = characterDivItemsDescr.querySelector('.texto-' + item);
    var allItems = [];
    var allCharacters = container.querySelectorAll('.planet-waves-container > div');
    var allCharacterDivsItems = [];

    // 用逗号分隔参数，正确输出NodeList结构
    console.log("All Characters: ", allCharacters)

    // 注意参数名别和外部的character变量冲突，改成el更清晰
    allCharacters.forEach(function(el) {
        allCharacterDivsItems.push(container.querySelectorAll('.'+el.classList[0]+' > div'));
    });

    // 同样用逗号输出数组内容
    console.log("All Character Divs Items: ", allCharacterDivsItems)

    console.log('All Items: ', allItems)

    // 获取当前角色下所有需要隐藏的描述元素
    var allCharacterDivItemsDescr = container.querySelectorAll('.planet-waves-container > div .'+character+'-textos > div');

    console.log('All Character Items Descriptions: ', allCharacterDivItemsDescr);

    allCharacterDivItemsDescr.forEach(function(div) {
        div.classList.add('vanish');
    });

    itemDescr.classList.remove('vanish');
    container.classList.remove('vanish');

    setTimeout(function() {
        itemDescr.classList.add('reveal');
    }, 500);
}

内容的提问来源于stack exchange，提问作者Luís Cunha