javascript奇怪的孩子行为答案

【问题标题】：javascript strange children behaviorjavascript奇怪的孩子行为
【发布时间】：2019-07-27 16:51:38
【问题描述】：

我正在通过 fetch 检索以下 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> 的子属性时，它显示长度为 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]);
    }
});

有谁知道对此的解释？非常感谢任何帮助。

【问题讨论】：

Don't use for…in to iterate! 并声明变量i。
我更改了它，但仍然只记录第一、第三和第五张卡。但是不会像以前那样记录最后三行（2 和 2 函数）
嗨。首先，这一行是否记录了所有检索到的正确 HTML？ console.log(text);
@Sarah 是的，这里的代码是从控制台复制的。
好的。你需要第二个承诺，即代码：.then(newCards => {...})... 吗？你可以尝试在 newCards.innerHTML = text; 之后循环遍历 newCards.children 吗？并且在行前：返回 newCards；看看它打印了什么？

标签： javascript fetch children

【解决方案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);
  });

【讨论】：