通过forEach参考

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

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 。

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

你应该使用这样的东西来序列化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);

在你的情况下，它和第一个方法一样。 而不是要求序列化的段落，这是要求的身体元素（这恰好是段落的父母）的内容序列化。

如果你想知道为什么我们不得不大惊小怪，那是因为jsdom是一个浏览器：它把你给它的东西清理出来，使它看起来像正确的HTML。 一旦jsdom已经parsing了你的源代码，但是在你修改之前，结构如下： 

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

（上面是漂亮的印刷，以突出结构，元素之间的空白当然是closures的。）

Interesting Posts