Как одной строчкой кода одновременно выполнить два действия с элементом?

Question

[Dimazsever]

Можно ли одной строчкой кода удалить текст из элемента и установить фокус на нём?
el.previousSibling.innerText = "".focus();
Код выше не рабочий. Можно сделать двумя строчками. В этом случае будет два обращения к DOM?

el.previousSibling.innerText = "";
el.previousSibling.focus();

Answer 1

[Евгений Петров]

1. Я бы ещё понял попытку взять свойство innerText после обращения к методу focus. Но попытка вызвать этот метод у пустой строки?) Это выходит за рамки.

2. Составлять выражения можно, если понимать, что стоит слева от точки. В данном конкретном случае с помощью нативного Javascript ничего не выйдет. Насчёт пустой строки уже выяснили, а метод focus() вернёт undefined.

3. Если вы нацелились на нативный Javascript, то надо знать, что previousSibling вернёт ссылку на предыдущий узел.
Во-первых, его просто может не быть, если элемент — первый ребёнок.
Во-вторых, этот узел может быть текстовой нодой, появившейся в результате форматирования. Ей-то точно фокус не передать.
Для получения ссылки на предыдущий элемент в интерфейсе Node есть свойство previousElementSibling.

4. Можете пока писать с помощью jQuery, где многие методы возвращают ссылку на абстрактный объект, отвечающий за найденный элемент. Типа такого:

$('#test').prev().text('').focus();

Comments

[Dimazsever]

всё просто) предыдущий элемент это параграф с атрибутом contenteditable. В нём написано: "введите ваше имя". Почему не использовал тег input? Потому что так задумано) красивше смотрится в моём случае)
Не совсем понял, что значит его может просто не быть? Как это? У меня в коде чётко прописано, что этот элемент идёт за кнопкой. И не быть его там не может)
Второй код работает. Просто я думал, что можно объединить всё это в одну строку. Пишу на нативном JS. Так всё таки. Во втором примере будет два обращения к DOM? Или нет?

[Евгений Петров]

У каждого узла при парсинге HTML такие свойства заполняются ссылками на узлы. Если вы сохранили в el ссылку на узел, то обращайтесь к этим свойствам, ради бога.

Насчёт соседнего узла — он может быть текстовой нодой. Задумайтесь ещё раз:) И применяйте для гарантированного нахождения именно элемента другое свойство, название которого я уже написал. Это позволит обходиться без проверки nodeType.

[Dimazsever]

Евгений Петров: честно говоря ничего не понял)) В каких случаях соседний узел может быть текстовой нодой? приведит пример, плиз. я не въезжаю) на работе утомился..

[Евгений Петров]

Проще показать jsfiddle.net/petroveg/e494a4j7/1

[Dimazsever]

спасибо) понял. странно, но в моём коде работает и previousSibling тоже элемент. сначала идёт div с текстом, под ним кнопка. Однако на jsfiddle сделал также - сначала div, под ним кнопка, но nodeName почему то текст) Вообще не понимаю, как так?

[Евгений Петров]

Потому что при парсинге текст между элементами (пробельные символы в нашем случае) формируют текстовый узел.

[Dimazsever]

Понял. Вообще странно, почему так происходит, но previousSibling является элементом в том случае, если он был создан и добавлен на страницу через createElement. Если он был изначально на странице, т.е. добавлен без использования JS, тогда он текстовая нода) Вот рабочий пример jsfiddle.net/cckz7hnc

[Евгений Петров]

Блин, если написать всё в одну строчку без переносов, табуляции и пробелов, то бишь без форматирования, то не будет между элементами текстовых узлов. Это и так понятно.

Короче. Хотите получать всегда элемент? Тогда previousElementSibling и nextElementSibling. Хотите нарываться на текстовые узлы? Тогда продолжайте использовать previousSibling и nextSibling.

[Dimazsever]

Евгений Петров: да понял я) просто интересно почему когда через JS создаешь элемент, тогда другое поведение

[Bhudh]

Потому, что через JS элемент создаётся СРАЗУ за другим элементом, то есть БЕЗ ПРОБЕЛОВ и, таким образом, БЕЗ ТЕКСТОВОГО УЗЛА,