Javascript 如何找到body元素后面的每个子元素，并获取包含特定类的元素的html

这听起来可能有点混乱，但基本上我有一些html看起来像这样（它是动态创建的）

你好! 我是另一个元素

哇！
哈哈！

我想创建一个对象数组，其中包括组件的唯一id和元素中类名为“wanttthis”（它将始终被称为“wanttthis”）的原始HTML，因此数组如下所示

[{
 id: "465a496s5498",
 html: "<div class='wantThisHTML'>Hello!<p>I'm another element!</p></div>"
},{
 id: "683fg5865448",
 html: "<div class='wantThisHTML'>Wow!</div>"
},{
 id: "247487294js5",
 html: "<div class='wantThisHTML'>Haha!</div>"
}]

[{
id:“465a496s5498”，
html：“你好！我是另一个元素！
”
},{
id:“683fg5865448”，
html：“哇
},{
id:“247487294js5”，
html：“哈哈！”
}]

至于我所尝试的，我使用

var elements=$（body.children

）将元素拆分成一个数组，我知道使用

$（.wantThis.HTML（）

）获取元素中的HTML，但是如何从我从子元素获取的每个元素中获取id和HTML呢

此外，在WANT元素中可能有多个元素，将

$（.wanttthis.html（）

获取所有子元素的原始html吗？

var data=$（'>.component'，document.body）.map（函数（组件）{
返回{
id:this.id，
html:$（this.find（'.wantthishhtml'）.html（）
}
})
.toArray（）；
控制台日志（数据）

你好
我是另一个元素

哇！
哈哈！
一种方法是

使用“querySelectorAll”选择节点（元素）

让nodeListOfComponentElements=document.querySelectorAll（'.component'）

这会给你一个节点列表

您可以通过以下方式将其转换为节点数组：

let noderray=[].slice.call（nodeListOfComponentElements）

然后，使用该节点数组。您可以将其“映射”到所需的结构

let result = nodeArray.map(function(item, index) {
  let targetElement = item.querySelector('.wantThisHTML')
  return {
    id: item.id,
    html: targetElement.innerHTML
  }
})

注意：每个“项”都是一个元素/节点，querySelector方法可用于选择该元素的子元素。我的目标是你提到的班级。然后，只需为map函数执行的每个迭代返回一个对象。选择映射函数返回的键和值。这里我将id键设置为元素的id，html键设置为每个主元素中目标子元素的“innerHTML”

由此产生的结构如下：

(3) [{…}, {…}, {…}]
0: {id: "465a496s5498", html: "Hello!<p>I'm another element!</p>"}
1: {id: "683fg5865448", html: "Wow!"}
2: {id: "247487294js5", html: "Haha!"}
length: 3

（3）[{…}，{…}，{…}]
0:{id:“465a496s5498”，html:“你好！我是另一个元素！
”}
1:{id:“683fg5865448”，html:“哇！”
2:{id:“247487294js5”，html:“哈哈！”
长度：3

代码笔：

别忘了投票并批准我的答案，这很有帮助
谢谢

要素
警报（元素）；//id为=“elem”的DOM元素
警报（window.elem）；//像这样访问全局变量也可以
//对于elem内容来说，事情有点复杂
//里面有破折号，所以不能是变量名
警报（窗口['elem-content']）；/。。。但可使用方括号[…]访问

引用：
以确保.component需要“.want此”子项

var data = $('.wantThis').map(function() {
  return {
    id: $(this).parents('.component').attr('id'),
    html: $(this).html()
  }
});
console.log(data);


var data=$（'.wanttthis'）.map（函数（）{
返回{
id:$（this）.parents（'.component'）.attr（'id'），
html:$（this.html（））
}
});
控制台日志（数据）

你好! 我是另一个元素

哇！
哈哈！
code>$（'>.component'，document.body）的意义是什么？不仅仅是
$（“.component”）
是相同的，但更简单吗？或者至少是
$（document.body）。如果要使
正文成为参数，请查找（“.component”）
。
$（“.component”）
将起作用，但它会使您面临获得具有相同类的其他可能元素的风险，这些元素可能不会直接位于body元素之后，而
$（“>.component'，document.body）
直接在body元素下搜索具有此类的任何元素。我怀疑
.component
作为一个直接子元素实际上不是一个要求，而是当前布局的一个意外事件，但我明白你的意思。此外，
$
（jQuery别名）后面的内容实际上是一个CSS选择器，在我们的例子中，我们希望类
component
的所有元素都是由第一个选择器（
document.body
用作子选择器）匹配的子元素，因此是字符。@nstanard，查看标记和问题，OP使用jQuery。我不确定在这种情况下提供非jQuery的答案是否更好。请注意，您可以使用
outerHTML
属性而不是
innerHTML
来包含
wantthishHTML
类元素的标记信息。注释不错！我几乎添加了一个关于这个的注释。你好，Clifford，欢迎来到Stack Overflow。学习JavaScript是件好事，但不幸的是，这并不是问题的答案。
<div id="elem">
    <div id="elem-content">Element</div>
</div>

<script>
    alert(elem); // DOM-element with id="elem"
    alert(window.elem); // accessing global variable like this also works

    // for elem-content things are a bit more complex
    // that has a dash inside, so it can't be a variable name
    alert(window['elem-content']); // ...but accessible using square brackets [...]
</script>

var data = $('.wantThis').map(function() {
  return {
    id: $(this).parents('.component').attr('id'),
    html: $(this).html()
  }
});
console.log(data);