JavaScript HTML对象查询当对象附加到元素时，选择所有搜索是不同的。

现在出现了一个奇怪的问题，我现在得到了一个由JSON代码生成的HTML对象，现在如果我对这个对象进行如下的查询搜索：

var html = buildHTML(json);
html.querySelectorAll('[data-click]');

由于某种原因，我只返回了3个元素。但是，如果我首先将其附加到一个div，然后再附加到同一个

queryselectoral

搜索该div的内容，那么我会得到所有4元素，就像我应该做的那样

var html = buildHTML(json);
document.getElementById('test').append(html);
document.getElementById('test').querySelectorAll('[data-click]');

这是我的HTML：

<div id="marvLightbox" data-click="EventClose">
   <div class="marvLightbox__left" data-click="EventLeft"></div>
   <div class="marvLightbox__right" data-click="EventRight"></div>
   <div class="marvLightbox">
      <div class="marvLightbox__eschint">Press <span>ESC</span> to close</div>
      <div class="marvLightbox__close" data-click="EventClose"></div>
      <img src="https://www.asphaltandrubber.com/wp-content/gallery/ducati-1199-panigale-r-launch-with-jensen-beeler/ducati-1199-panigale-r-launch-cota-jensen-beeler-07.jpg" class="responsive-img image">
   </div>
</div>

---

当您查询不同的元素时，会得到不同的结果。注意

querySelectorAll（）

返回所有下降的元素的列表

在以下查询中，

#不查询marvLightbox

var html = buildHTML(json);
html.querySelectorAll('[data-click]');

var json=`{
“部门”：{
“id”：“marvLightbox”，
“数据点击”：“事件关闭”，
"0": {
“部门”：{
“类”：“marvLightbox__________________左”，
“数据单击”：“EventLeft”
}
},
"1": {
“部门”：{
“类”：“marvLightbox（右）”，
“数据单击”：“EventRight”
}
},
"2": {
“部门”：{
"0": {
“部门”：{
“类”：“marvLightbox_uuuEschint”，
“内容”：“按ESC键关闭”
}
},
"1": {
“部门”：{
“类”：“marvLightbox\uuuuu close”，
“数据单击”：“事件关闭”
}
},
"2": {
“img”：{
“src”：https://www.asphaltandrubber.com/wp-content/gallery/ducati-1199-panigale-r-launch-with-jensen-beeler/ducati-1199-panigale-r-launch-cota-jensen-beeler-07.jpg",
“类别”：“响应式img图像”
}
},
“类别”：“marvLightbox”
}
}
}
}`;
函数buildHTML（代码）{
“严格使用”；
var handleAttribute=函数（元素、属性、值）{
if（HtmleElement的值实例）{
返回元素.appendChild（值）；
}
开关（属性）{
案例“类”：
案例'src'：
案件编号：
案例“数据点击”：
返回元素.setAttribute（属性，值）；
案例“内容”：
return element.innerHTML=值；
//其他键。。。
违约：
console.log（element.tagName、属性、值）；
}
}
var htmleviver=函数（键、值）{
//解析为元素
如果（isNaN（键）&&typeof值==='object'）{
var元素=document.createElement（键）；
var子值；
for（值中的var属性）{
handleAttribute（元素、属性、值[属性]）；
}
返回元素；
//将元素从{index:{tagName:element}}移动到{index:element}
}如果（！isNaN（键））{
返回值[Object.keys（值）[0]]；
//别管财产
}否则{
返回值；
}
}
试一试{
var htmlObject=JSON.parse（代码，htmleviver）；
}捕获（e）{
log（'marv.lightbox（Error）：提供的HTML结构似乎有错误：'+e）；
}
返回htmlObject；
}
（功能（）{
var html=buildHTML（json）；
html.querySelectorAll（“[数据点击]）.forEach（函数（e）{
控制台日志（e）
});
console.log（“用于整个文档”）
document.getElementById（'test'）.append（html）；
document.getElementById（'test'）.querySelectorAll（'[data click]'）.forEach（函数（e）{
控制台日志（e）
});
}());
body>div{
浮动：左；
显示：内联块；
}
img{
显示：无；
}

Ah，我该如何包括这个，只需在手前添加一个额外的div？@MartynBall，是的，添加一个额外的div，这将是最简单的解决方案