Как получить текст рядом с тегом ввода с помощью document.querySelector?

У меня есть следующий HTML-код, мне нужно получить текст сразу после ввода тега. Обратите внимание, что текст Some text не заключен ни в один тег.

Вы знаете, как это получить?

<input type = "checkbox" /> Some text

javascript html

10.12.2018 16:11

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

110

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

По сути, вы не можете.

querySelector может возвращать только элемент (или null), а текст не является элементом.

Вы можете получить ввод, а затем получить текстовый узел рядом с ним.

const input = document.querySelector("input");
const text_node = input.nextSibling;
console.info(text_node.data);

<input type = "checkbox" /> Some text

NB: текст рядом с флажком наверное должен быть выражен с помощью элемент метки.

Я согласен с тем, что вам, вероятно, следует заключить текст в тег, если вы можете изменить HTML. Может быть, даже дать этому тегу уникальный идентификатор. Это сделает поиск текста много более надежным. Подумайте, что будет, если кто-нибудь вставит скрытый элемент? <input type = "checkbox" /> <div id = "someDialogContainer" style = "display:none"></div> Some text - внезапно текст больше не является nextSibling, хотя страница выглядит для пользователя так же.

— 10.12.2018 16:16

можно ли сделать это прямо в querySelector?

— 10.12.2018 16:36

@Radex - я отсылаю вас к первому предложению в этом ответе. Нет, не можешь.

— 10.12.2018 16:37

10.12.2018 16:14