时间戳

首页 > 解决方案 > 使用 jQuery 获取 DOM 节点，然后将它们输出为逗号分隔的字符串

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

问题描述

我正在尝试获取所有 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);
});

标签： javascriptjquery

解决方案

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

HTMLCollections没有.map()方法。为了解决这个问题，您必须先将 s 转换HTMLCollection为 s 数组HTMLElement。

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

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

$.map如果您对 jQuery 如此忠诚，您也可以使用，但我认为性能充其量是相同的。

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(', '));
});

推荐阅读