Question

在我的一个测试单元中，我需要构建一个DOM对象

describe('client/blog', () => {
  let htmlDoc;

  beforeEach(() => {
    htmlDoc = window.document;
  });

  it('set the DeletePostHandler', function () {
      var x = htmlDoc.createElement('p'); // Create a <p> element
      var t = htmlDoc.createTextNode('This is a paragraph.'); // Create a text node
      x.appendChild(t); // Append the text to <p>
      htmlDoc.body.appendChild(x);  
      console.log('DOM body: ', JSON.stringify(htmlDoc.body));
      ...
   });
   ...
});

但是我无法在控制台中显示DOM主体... 诀窍是什么？...

感谢您的反馈

更新

我尝试过：

console.log('DOM body: ', htmlDoc.body);

但是我只能得到：

console.log tests/client/blog.spec.js:30
DOM body:  {}

Answer 1

要在控制台中查看DOM节点，请不要尝试对其进行字符串化。只需记录变量本身。

console.log('DOM body: ', htmlDoc.body);

Answer 2

重新更新：听起来您需要为自己的目的执行一项特殊功能。 JSON.stringify仅具有 own ， enumerable 属性，这可能就是为什么您看不到想要看到的内容（DOM元素上的许多属性都不是'拥有自己的可枚举属性；例如innerHTML不在Chrome上。）

一个选择是登录innerHTML或outerHTML，这将以HTML形式向您显示元素或元素的内容：

console.log('DOM body: ', htmlDoc.body.innerHTML);
// or
console.log('DOM body: ', htmlDoc.body.outerHTML);

如果您想做一些更量身定制的事情，（大概）您将拥有DOM的全部功能……

显示DOM对象内容

2 个答案: