JavaScript：如何获取 <div> 的子名称 [关闭]答案

【问题标题】：JavaScript: How to get child-names of <div> [closed]JavaScript：如何获取 <div> 的子名称 [关闭]
【发布时间】：2020-07-08 08:52:54
【问题描述】：

我有一个类似这样的结构：

<div class="tower">
    <div class="E0">abc</div>
    <div class="GU">123</di
</div>

没有我的问题是我想在 javascript 中获取内部 classNames 'E0' & 'GU'，而我只知道外部 className 'tower'。

因此，虽然“塔”保持不变，但“EO”和“GU”可能是其他名称，我希望拥有类名（作为字符串）。

感谢您的帮助（对于这个可能很愚蠢的问题，我们深表歉意）

【问题讨论】：

这能回答你的问题吗？ JavaScript getting an elements class without any libraries

标签： javascript html class-names

【解决方案1】：

您可以使用父节点的children 属性，然后使用数组.map() 方法遍历它们中的每一个以获得类名，如：

const children = document.querySelector('.tower').children;
const classes = [...children].map(el => el.className)
console.log(  classes )

<div class="tower">
    <div class="E0">abc</div>
    <div class="GU">123</di
</div>

【讨论】：

【解决方案2】：

这样的？

let clss = [...document.querySelector(".tower").querySelectorAll("div")]
    .map(div => [...div.classList.values()].map(val => val))
console.log(clss)

<div class="tower">
    <div class="E0 B0">abc</div>
    <div class="GU">123</div>
</div>

【讨论】：

【解决方案3】：

var first = document.querySelector(".tower div:first-child").className;

var last = document.querySelector(".tower div:last-child").className;

【讨论】：

请不要只发布代码作为答案，还要解释您的代码的作用以及它如何解决问题的问题。带有解释的答案通常质量更高，更有可能吸引投票。