Как отобразить элемент 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

Насколько я понимаю ваш вопрос, вы хотите проверять HTML только для целей отладки, верно?

document.querySelector - это хорошо протестированная функция в исходном коде браузера, поэтому она не может вызвать никаких проблем в любое время. Так что, если вы хотите проверить, что вы получаете правильный элемент, вы можете просто использовать Инструменты разработчика вашего браузера, инспектор: найдите #text-area в Инспекторе, выберите его, и тогда он будет доступен как $0 в Консоль. Затем вы можете выполнить проверки, используя эти переменные.

РЕДАКТИРОВАТЬ Хорошо, я понял ваш вопрос неправильно. Я попытался использовать document.getElementById('something') в моих инструментах разработчика Chrome, и на выходе получился HTML-код элемента. Тем не менее, я предполагаю, что это поведение не универсально, поэтому для обеспечения записи HTML в консоли вы можете сделать:

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

Обратите внимание , что я использую логический оператор AND, чтобы убедиться, что он присутствует, прежде чем пытаться получить доступ к свойству outerHTML. Это для вас, чтобы не получить ошибку.

Answer 2

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