如何显示 DOM 元素

Question

当我在测试中使用以下代码时：

const textAreaBefore = document.querySelector('#text-area');

我需要在控制台中检查这个 HTML 元素：

console.log('TAB: ', textAreaBefore);
// or console.log(document.getElementById('text-area'));

我只得到 HTML 对象作为输出：

console.log tests/client/blog.spec.js:77
    HTMLTextAreaElement {}

我怎样才能得到完整的 HTML 字符串输出？

<textarea>.....  </textarea>

Answer 1

const textAreaBefore = document.querySelector('#text-area').innerHTML;

https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

或者 const textAreaBefore = document.querySelector('#text-area').outerHTML;

https://developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML

Answer 2

据我了解你的问题，你只是想检查 HTML 以进行调试，对吗？

document.querySelector 是浏览器源代码中经过良好测试的函数，因此它不会在任何时候引起任何问题。所以如果你想检查你是否正在检索正确的元素，你可以简单地使用你的浏览器的开发者工具，检查器：在检查器中搜索 #text-area，select 它，然后它将是在控制台中作为 [=13=] 可用。然后您可以使用此变量执行检查。

编辑好吧，我错了你的问题。我尝试在 Chrome 开发人员工具中使用 document.getElementById('something')，输出是元素的 HTML。但是，我认为这种行为并不普遍，因此为了确保 HTML 写入控制台，您可以执行以下操作：

var el = document.getElementById('text-area');
el && el.outerHTML;

注意我正在使用逻辑 AND 运算符，以便在尝试访问 outerHTML 属性之前确保它存在。这是为了让您不要出错。

如何显示 DOM 元素

How to display a DOM element

javascript

dom

jsdom