文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >javascript奇怪的子项行为

问javascript奇怪的子项行为
EN

Stack Overflow用户
提问于 2019-07-28 00:51:38
回答 1查看 71关注 0票数 0

我正在通过fetch检索以下html字符串：

代码语言：javascript
复制
<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集合，但在数组中同样只有第二和第四张卡片。

当我尝试遍历子代并将每个子代记录到控制台时，它会记录第一张、第三张和第五张卡片，并在最后：

代码语言：javascript
复制
2
f item() { [native code] }
f namedItem() { [native code] }

完整的javascript代码是：

代码语言：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]);
    }
});

有人知道这是怎么回事吗？非常感谢您的帮助。

javascript
fetch
children
EN

回答 1

Stack Overflow用户

发布于 2019-07-28 01:50:17

我不认为我可以重现这个问题，控制台日志似乎在所有情况下都没问题(虽然您应该在端点响应中自行关闭您的img标记，但在这里没有什么不同)：

​

代码语言：javascript
复制
// 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);
  });

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/57234207

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档