在 forEach 上通过引用传递答案

【问题标题】：Passing by Reference on forEach在 forEach 上通过引用传递
【发布时间】：2014-12-03 05:53:22
【问题描述】：

这是我的问题的一些代码：

var jsdom = require('jsdom');

var content = '\
    <p>\
        <img src="assets/logo">\
        <img src="assets/background">\
    </p>\
';

jsdom.env(content, function (error, window) {
    var $ = require('jquery')(window)
    var elements = $.find('img');

    elements.forEach(function(imageElement) {
        var src = $(imageElement).attr('src') + '.jpg';

        $(imageElement).attr('src', src);

        // print "assets/logo.jpg" and "assets/background.jpg"
        console.log($(imageElement).attr('src'));
    });

    console.log(content);
});

我要做的是，将每个img 元素上的src 的内容更改为assets/logo.jpg 和assets/background.jpg。

谁能建议我，我该怎么做才能将content 更改为：<p><img src="assets/logo.jpg"><img src="assets/background.jpg"></p>？

【问题讨论】：

将新的innerHTML 分配给content?查看 jsdom 文档了解如何将 DOM 序列化回 html。
@Bergi：我的意思是，我想从这行代码中更改content $(imageElement).attr('src', src); 但不幸的是它不能直接更改content 的值。
你当然不知道。 content 是一个字符串。 DOM 不存储在字符串中，您正在操作的是一棵节点树。您创建 DOM 的字符串将不受影响。您需要将其序列化回一个新字符串。
@Crazenezz 我已经撤销了你的编辑。请不要在您的问题中添加新问题。否则，您正在创建的是 "chameleon question" 如果您有新问题，请发布新问题。不过，请确保您阅读了与您的问题相关的其他 SO 问题。谢谢你。（在您看来，这可能是同一个问题，但您添加的确实是一个不同问题。）
@Louis：不是新问题，只是想告诉你我用我的代码做了什么，我认为这个问题与stackoverflow.com/questions/9419242/…有关

标签： javascript jquery node.js pass-by-reference jsdom

【解决方案1】：

你应该使用这样的东西来序列化 DOM：

console.log(window.document.body.firstChild.outerHTML);

正如 Bergi 在 cmets 中指出的，jsdom 操作的是 DOM 树，jsdom 不会返回到源 HTML 并更改它。您要做的是序列化 DOM 树并您可以使用通常的 DOM 方法来执行此操作。 window.document.body.firstChild 位为您提供段落。 .outerHTML 位是您获取段落序列化的方式。

另一种方法是：

console.log(window.document.body.innerHTML);

在您的情况下，它与第一种方法的作用相同。这不是要求对段落进行序列化，而是要求对正文元素（恰好是段落的父元素）的内容进行序列化。

如果您想知道为什么我们必须对body 大惊小怪，这是因为 jsdom 充当了浏览器：它获取您提供的内容并对其进行清理，使其看起来像正确的 HTML。一旦 jsdom 解析了你的源代码，但在你修改它之前，它的结构是这样的：

<html>
  <head></head>
  <body>
    <p>        
      <img src="assets/logo">
      <img src="assets/background">
    </p>
  </body>
</html>

（上面的印刷很漂亮以突出结构。元素之间的空白肯定是关闭的。）

【讨论】：