代码之家  ›  专栏  ›  技术社区  ›  user762579

显示DOM对象内容

  •  0
  • user762579  · 技术社区  · 6 年前

    在我的一个测试单元中,我需要构建一个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:  {}
    
    2 回复  |  直到 6 年前
        1
  •  0
  •   T.J. Crowder    6 年前

    更新:听起来你需要为自己的目的做一个特殊的功能。 JSON.stringify 只做 拥有 , 可枚举的 属性,这可能是您没有看到希望看到的内容的原因(dom元素上的许多属性不是自己的可枚举属性;例如, innerHTML 不是镀铬的)。

    一种选择是记录 内层HTML outerHTML ,它将以HTML形式显示元素或元素的内容及其内容:

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

    如果你想做一些更为量身定制的事情,你(大概)拥有 DOM 您可以使用…

        2
  •  1
  •   Hydrothermal    6 年前

    要在控制台中查看一个DOM节点,不要尝试将其串接。只需记录变量本身。

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