javascript - 是否有等效的 elem.innerHTML 获取标记正文中的代码？

Question

如果我有以下内容:

<p class="demo" id="first_p">
    This is the first paragraph in the page and it says stuff in it.
</p>

我可以用

document.getElementById("first_p").innerHTML

得到

This is the first paragraph in the page and it says stuff in it. 

但是有没有什么简单的东西可以运行，它会以字符串形式返回

class="demo" id="first_p"

我知道我可以遍历元素的所有属性以单独获取每个属性，但是是否有返回 tagHTML 或类似内容的函数？

Answer 1

下面的代码有些冗长:我把它写成一行，但在这里我把它分成了几行。但是这将为您提供一个普通对象，其中键是属性名称，值是相应属性的值:

Array.prototype.reduce.call(
    document.getElementById('first_p').attributes,
    function (attributes, currentAttribute) {
        attributes[currentAttribute.name] = currentAttribute.value;
        return attributes;
    },
    {}
);

通过这个过程，document.getElementById('first_p').attributes 为您提供元素属性的 NamedNodeMap。 NamedNodeMap 不是数组，但是 Array.prototype.reduce.call(...) 调用 NamedNodeMap 上的 Array.prototype.reduce 就像它是一个数组一样。我们可以这样做，因为 NamedNodeMap 被编写成可以像数组一样访问它。

但我们不能就此打住。我提到的 NamedNodeMap 是一个 Attr 对象数组，而不是名称-值对的对象。我们需要转换它，这是 Array.prototype.reduce 的其他参数发挥作用的地方。

当它没有以一种奇怪的方式被调用时，Array.prototype.reduce 有两个参数。第二个参数(由于我们调用它的方式，对我们来说是第三个)是我们想要构建的对象。在我们的例子中，这是一个全新的裸对象:您在最后看到的 {}。

Array.prototype.reduce 的第一个参数(对我们来说也是第二个参数)是另一个函数。该函数将为循环中的每个项目调用一次，但它需要两个参数。 第二个参数是当前循环项，很好理解，但是第一个参数有点野。 第一次 我们调用该函数时，它的第一个参数是我们要构建的对象(即 Array.prototype.reduce 的最后一个参数)。之后每次，第一个参数是函数上次调用时返回的任何内容。Array.prototype.reduce 返回最后一次调用其内部函数返回的任何内容。

所以我们从一个空对象开始。然后对于元素属性中的每个 Attr，我们向对象添加一些东西，然后返回它。当最后一次调用结束时，对象完成，所以我们返回它。这就是我们制作属性列表的方式。

如果您想要标签中的确切代码，例如字符串，恐怕没有标准函数可以准确地获取它。 但我们可以获得该代码的近似值，具有类似的设置:

Array.prototype.map.call(
    document.getElementById('first_p').attributes,
    function (currentAttribute) {
        return currentAttribute.name + '=' + JSON.stringify(currentAttribute.value);
    }
).join(' ');

基本原理是相同的:我们采用 NamedNodeMap 并在其上调用 Array 函数，但这次我们使用 map 而不是 reduce。您可以将 map 视为 reduce 的特例:它始终构建一个数组，每个元素对应原始数组中的每个元素。因此，您甚至不需要提及正在构建的对象:回调函数只有一个参数，我们只需返回要放入新数组的对象。完成后，我们就有了一个“name="value"”字符串数组，然后我们只需将其与“”连接起来。