javascript - 使用 jQuery 获取 DOM 节点，然后将它们输出为逗号分隔的字符串

Question

我试图获取所有 DOM 节点，然后将它们输出为字符串，但输出的格式是 HTML Collection:

[html, head, meta, title, body, h1, p]

相反，我想将其输出为一个简单的字符串:

"html, head, meta, title, body, h1, p"

这是我当前的 jQuery:

jQuery(document).ready(function($) {
    var allNodes = document.getElementsByTagName('*');
    console.log(allNodes);
});

Answer 1

正如@Taplar 在我打字时指出的那样，您需要使用Array#map 来检索tagName 属性。但是，缺少一个非常小的额外步骤。

HTMLCollection 没有 .map() 方法。为此，您必须先将 HTMLCollection 转换为 HTMLElement 数组。

不过，这比它的值(value)要多得多。由于您已经在使用 jQuery，更好的解决方案是将您的 vanilla JS 选择器更改为 jQuery 选择器，它可以将所有内容链接在一起。

jQuery(document).ready(function($) {
    console.log($('*').get().map(v=>v.tagName).join(', '));
});

如果您忠于 jQuery，您也可以使用 $.map，但我认为性能充其量是一样的。

jQuery(document).ready(function($) {
    console.log($.map($('*'),v=>v.tagName).join(', '));
});

如果您出于某种原因不想在这里使用 jQuery，下面是我使用 vanilla JavaScript 的初步回答。

jQuery(document).ready(function($) {
    var allNodes = document.getElementsByTagName('*');
    console.log(Array.from(allNodes).map(v=>v.tagName).join(', '));
});