Question

以下是我的问题的一些代码：

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);
});

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

任何人都可以建议我，我必须做什么才能将content更改为：<p><img src="assets/logo.jpg"><img src="assets/background.jpg"></p>？

Answer 1

您应该使用类似的东西来序列化DOM：

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

正如Bergi在评论中指出jsdom操作的是一个DOM树， jsdom不会回到源HTML并改变它。你需要做的是序列化DOM树和你使用通常的DOM方法做到这一点。 window.document.body.firstChild位获取您的段落。 .outerHTML位是您获取段落序列化的方式。

另一种方法是：

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

在您的情况下，它与第一种方法完全相同。这不是要求段落的序列化，而是要求序列化body元素的内容（恰好是段落的父元素）。

如果你想知道为什么我们不得不对body大惊小怪，这是因为jsdom充当了浏览器：它接受你提供的东西并清理它以使它看起来像正确的HTML。一旦jsdom解析了你的源代码，但在你修改它之前，这就是它的结构：

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

（以上内容非常精美，以突出显示结构。元素之间的空白当然是关闭的。）

通过参考传递forEach

1 个答案: