Question

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

-- Sample data: dates duplicates
declare @t table (id int, dt date);
insert into @t values
(1, '2018-01-14'),
(1, '2018-01-14'),
(1, '2018-01-15'),
(1, '2018-01-15');
with cte as (
    select *,
           -- assign row number for each partition consisting of same date
           row_number() over (partition by dt order by dt) as cnt
    from @t
)
-- we're interested only in one row (i.e. first)
select id, dt from cte where cnt = 1;

/*
 Output:
+-------+---------+
| id | dt         |
+----+------------+
|  1 | 2018-01-14 |
|----|------------|
|  1 | 2018-01-15 |
+----+------------+
*/

，我需要使用以下命令在控制台中检查此HTML元素：

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 {}

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，将其选中，然后它将以{{ 1}}。然后，您可以使用此变量执行检查。

编辑，好的，我误解了您的问题。我尝试在Chrome开发者工具中使用$0，并且输出的是元素的HTML。但是，我认为这种行为不是通用的，因此为了确保在控制台中编写HTML，可以执行以下操作：

document.getElementById('something')

注意，我在尝试访问var el = document.getElementById('text-area'); el && el.outerHTML;属性之前正在使用逻辑AND运算符，以确保它存在。这是为了避免您出错。

如何显示DOM元素

2 个答案: