javascript奇怪的兒童行為

Question

我通過獲取以下html字符串：

<div class="card pink-bg alt-4 white-text border-0" data-user="4614" data-media="4614-15639902298038.jpg">
    <div class="carousel slide" data-ride="carousel" id="card-4614">
        <div class="carousel-inner card-img-top">
            <div class="carousel-item active" data-media="4614-15639902298038.jpg">
                <img class="card-img-top img-fluid w-100 to-animate" src="/assets/user-media/0/4/4614/likethumbs/4614-15639902298038.jpg">
            </div>
            <div class="carousel-item" data-media="4614-15639902295051.jpg">
                <img class="card-img-top img-fluid w-100" src="/assets/user-media/0/4/4614/likethumbs/4614-15639902295051.jpg">
            </div>
        </div>
        <div class="card-img-overlay p-1 pt-5 pink-gradient gradient-alt-4 to-bottom start-60"></div>
        <a class="carousel-control-prev" href="#card-4614" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        </a>
        <a class="carousel-control-next" href="#card-4614" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
        </a>
    </div>
    <div class="card-body  small text-center py-2 py-sm-3">
        <h6 class="mb-0">User has no headline</h6>
        <h5 class="mb-0">nikka</h5>
    </div>
</div>
<div class="card pink-bg alt-4 white-text border-0" data-user="2318" data-media="2318-15639888014617.jpg">
    <div class="carousel slide" data-ride="carousel" id="card-2318">
        <div class="carousel-inner card-img-top">
            <div class="carousel-item active" data-media="2318-15639888014617.jpg">
                <img class="card-img-top img-fluid w-100 to-animate" src="/assets/user-media/0/2/2318/likethumbs/2318-15639888014617.jpg">
            </div>
            <div class="carousel-item" data-media="2318-15639888026627.jpg">
                <img class="card-img-top img-fluid w-100" src="/assets/user-media/0/2/2318/likethumbs/2318-15639888026627.jpg">
            </div>
        </div>
        <div class="card-img-overlay p-1 pt-5 pink-gradient gradient-alt-4 to-bottom start-60"></div>
        <a class="carousel-control-prev" href="#card-2318" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        </a>
        <a class="carousel-control-next" href="#card-2318" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
        </a>
    </div>
    <div class="card-body  small text-center py-2 py-sm-3">
        <h6 class="mb-0">User has no headline</h6>
        <h5 class="mb-0">baribie20160</h5>
    </div>
</div>
<div class="card pink-bg alt-4 white-text border-0" data-user="7909" data-media="7909-15639920880841.jpg">
    <div class="carousel slide" data-ride="carousel" id="card-7909">
        <div class="carousel-inner card-img-top">
            <div class="carousel-item active" data-media="7909-15639920880841.jpg">
                <img class="card-img-top img-fluid w-100 to-animate" src="/assets/user-media/0/7/7909/likethumbs/7909-15639920880841.jpg">
            </div>
            <div class="carousel-item" data-media="7909-15639920886970.jpg">
                <img class="card-img-top img-fluid w-100" src="/assets/user-media/0/7/7909/likethumbs/7909-15639920886970.jpg">
            </div>
        </div>
        <div class="card-img-overlay p-1 pt-5 pink-gradient gradient-alt-4 to-bottom start-60"></div>
        <a class="carousel-control-prev" href="#card-7909" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        </a>
        <a class="carousel-control-next" href="#card-7909" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
        </a>
    </div>
    <div class="card-body  small text-center py-2 py-sm-3">
        <h6 class="mb-0">User has no headline</h6>
        <h5 class="mb-0">xxxsasha</h5>
    </div>
</div>
<div class="card pink-bg alt-4 white-text border-0" data-user="2960" data-media="2960-15639892811277.jpg">
    <div class="carousel slide" data-ride="carousel" id="card-2960">
        <div class="carousel-inner card-img-top">
            <div class="carousel-item active" data-media="2960-15639892811277.jpg">
                <img class="card-img-top img-fluid w-100 to-animate" src="/assets/user-media/0/2/2960/likethumbs/2960-15639892811277.jpg">
            </div>
            <div class="carousel-item" data-media="2960-15639892815552.jpg">
                <img class="card-img-top img-fluid w-100" src="/assets/user-media/0/2/2960/likethumbs/2960-15639892815552.jpg">
            </div>
        </div>
        <div class="card-img-overlay p-1 pt-5 pink-gradient gradient-alt-4 to-bottom start-60"></div>
        <a class="carousel-control-prev" href="#card-2960" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        </a>
        <a class="carousel-control-next" href="#card-2960" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
        </a>
    </div>
    <div class="card-body  small text-center py-2 py-sm-3">
        <h6 class="mb-0">User has no headline</h6>
        <h5 class="mb-0">jova</h5>
    </div>
</div>
<div class="card pink-bg alt-4 white-text border-0" data-user="8066" data-media="8066-15639922094801.jpg">
    <div class="carousel slide" data-ride="carousel" id="card-8066">
        <div class="carousel-inner card-img-top">
            <div class="carousel-item active" data-media="8066-15639922094801.jpg">
                <img class="card-img-top img-fluid w-100 to-animate" src="/assets/user-media/0/8/8066/likethumbs/8066-15639922094801.jpg">
            </div>
        </div>
        <div class="card-img-overlay p-1 pt-5 pink-gradient gradient-alt-4 to-bottom start-60"></div>
    </div>
    <div class="card-body  small text-center py-2 py-sm-3">
        <h6 class="mb-0">User has no headline</h6>
        <h5 class="mb-0">mshoneymoon</h5>
    </div>
</div>

檢索后，我創建一個新的<div>元素，並通過為新創建的<div>設置innerHTML屬性來插入檢索到的HTML字符串。

當我將整個新創建的<div>登錄到控制台時，它表明只包含第二張和第四張卡。

當我登錄新<div> children屬性時，它顯示了長度為5的HTML集合，但在數組中再次僅是第二張和第四張卡片。

當我嘗試遍歷子級並將每個子級登錄到控制台時，它將記錄第一張，第三張和第五張卡，最后是：

2
f item() { [native code] }
f namedItem() { [native code] }

整個javascript代碼如下：

fetch("index.php?action=load-profile-cards", {
    method: 'POST',
    body: data
})
.then(response => response.text())
.then(text => {
    console.log(text);
    let newCards = document.createElement("div");
    newCards.innerHTML = text;
    return newCards;
})
.then(newCards => {
    console.log(newCards);
    console.log(newCards.children);
    for(let i = 0; i < newCards.children.length; i++){
        console.log(newCards.children[i]);
    }
});

有人知道這個的解釋嗎？ 任何幫助，不勝感激。

Answer 1

我認為我無法重現該問題，在所有情況下，控制台日志似乎都不錯（盡管您應該在端點響應中自動關閉img標簽，但此處沒有什么不同）：

 // mocking fetch here _fetch = () => { return new Promise((resolve, reject) => { setTimeout(() => { resolve(` <div class="card pink-bg alt-4 white-text border-0" data-user="4614" data-media="4614-15639902298038.jpg"> <div class="carousel slide" data-ride="carousel" id="card-4614"> <div class="carousel-inner card-img-top"> <div class="carousel-item active" data-media="4614-15639902298038.jpg"> <img class="card-img-top img-fluid w-100 to-animate" src="/assets/user-media/0/4/4614/likethumbs/4614-15639902298038.jpg"> </div> <div class="carousel-item" data-media="4614-15639902295051.jpg"> <img class="card-img-top img-fluid w-100" src="/assets/user-media/0/4/4614/likethumbs/4614-15639902295051.jpg"> </div> </div> <div class="card-img-overlay p-1 pt-5 pink-gradient gradient-alt-4 to-bottom start-60"></div> <a class="carousel-control-prev" href="#card-4614" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> </a> <a class="carousel-control-next" href="#card-4614" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> </a> </div> <div class="card-body small text-center py-2 py-sm-3"> <h6 class="mb-0">User has no headline</h6> <h5 class="mb-0">nikka</h5> </div> </div> <div class="card pink-bg alt-4 white-text border-0" data-user="2318" data-media="2318-15639888014617.jpg"> <div class="carousel slide" data-ride="carousel" id="card-2318"> <div class="carousel-inner card-img-top"> <div class="carousel-item active" data-media="2318-15639888014617.jpg"> <img class="card-img-top img-fluid w-100 to-animate" src="/assets/user-media/0/2/2318/likethumbs/2318-15639888014617.jpg"> </div> <div class="carousel-item" data-media="2318-15639888026627.jpg"> <img class="card-img-top img-fluid w-100" src="/assets/user-media/0/2/2318/likethumbs/2318-15639888026627.jpg"> </div> </div> <div class="card-img-overlay p-1 pt-5 pink-gradient gradient-alt-4 to-bottom start-60"></div> <a class="carousel-control-prev" href="#card-2318" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> </a> <a class="carousel-control-next" href="#card-2318" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> </a> </div> <div class="card-body small text-center py-2 py-sm-3"> <h6 class="mb-0">User has no headline</h6> <h5 class="mb-0">baribie20160</h5> </div> </div> <div class="card pink-bg alt-4 white-text border-0" data-user="7909" data-media="7909-15639920880841.jpg"> <div class="carousel slide" data-ride="carousel" id="card-7909"> <div class="carousel-inner card-img-top"> <div class="carousel-item active" data-media="7909-15639920880841.jpg"> <img class="card-img-top img-fluid w-100 to-animate" src="/assets/user-media/0/7/7909/likethumbs/7909-15639920880841.jpg"> </div> <div class="carousel-item" data-media="7909-15639920886970.jpg"> <img class="card-img-top img-fluid w-100" src="/assets/user-media/0/7/7909/likethumbs/7909-15639920886970.jpg"> </div> </div> <div class="card-img-overlay p-1 pt-5 pink-gradient gradient-alt-4 to-bottom start-60"></div> <a class="carousel-control-prev" href="#card-7909" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> </a> <a class="carousel-control-next" href="#card-7909" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> </a> </div> <div class="card-body small text-center py-2 py-sm-3"> <h6 class="mb-0">User has no headline</h6> <h5 class="mb-0">xxxsasha</h5> </div> </div> <div class="card pink-bg alt-4 white-text border-0" data-user="2960" data-media="2960-15639892811277.jpg"> <div class="carousel slide" data-ride="carousel" id="card-2960"> <div class="carousel-inner card-img-top"> <div class="carousel-item active" data-media="2960-15639892811277.jpg"> <img class="card-img-top img-fluid w-100 to-animate" src="/assets/user-media/0/2/2960/likethumbs/2960-15639892811277.jpg"> </div> <div class="carousel-item" data-media="2960-15639892815552.jpg"> <img class="card-img-top img-fluid w-100" src="/assets/user-media/0/2/2960/likethumbs/2960-15639892815552.jpg"> </div> </div> <div class="card-img-overlay p-1 pt-5 pink-gradient gradient-alt-4 to-bottom start-60"></div> <a class="carousel-control-prev" href="#card-2960" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> </a> <a class="carousel-control-next" href="#card-2960" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> </a> </div> <div class="card-body small text-center py-2 py-sm-3"> <h6 class="mb-0">User has no headline</h6> <h5 class="mb-0">jova</h5> </div> </div> <div class="card pink-bg alt-4 white-text border-0" data-user="8066" data-media="8066-15639922094801.jpg"> <div class="carousel slide" data-ride="carousel" id="card-8066"> <div class="carousel-inner card-img-top"> <div class="carousel-item active" data-media="8066-15639922094801.jpg"> <img class="card-img-top img-fluid w-100 to-animate" src="/assets/user-media/0/8/8066/likethumbs/8066-15639922094801.jpg"> </div> </div> <div class="card-img-overlay p-1 pt-5 pink-gradient gradient-alt-4 to-bottom start-60"></div> </div> <div class="card-body small text-center py-2 py-sm-3"> <h6 class="mb-0">User has no headline</h6> <h5 class="mb-0">mshoneymoon</h5> </div> </div> `); }, 1000); }); }; _fetch() .then(text => { //console.log(text); let newCards = document.createElement("div"); newCards.innerHTML = text; console.log(newCards); console.log(newCards.children); for(let i = 0; i < newCards.children.length; i++){ console.log(newCards.children[i]); } document.querySelector('body').appendChild(newCards); });