Как взять элемент и название тега в div

@Aleks00231 · Регистрация: 05.02.2019

Студворк — интернет-сервис помощи студентам

Всем здравствуйте, я сейчас делаю свой текстовой редактор или WYSIWYG и мне нужно брать элемент и его название, при нажатие на него, как это можно сделать?

HTML:

HTML5
1
<div contenteditable id="editor-container"></div>

@Андрей МСК · 29.06.2019, 00:57

Если вам нужен элемент целиком, то как-то так:

JavaScript
1
2
3
  $("div").on("click", function(){
    alert($(this)[0].outerHTML);
  });

Если нужно только название тега:

JavaScript
1
2
3
  $("div").on("click", function(){
    alert($(this).get(0).tagName);
  });

Если только содержимое

JavaScript
1
2
3
  $("div").on("click", function(){
    alert($(this).html());
  });

@klopp · 29.06.2019, 04:55

не понимаю зачем подключать целую библиотеку, если есть нативные методы языка

Сообщение от Aleks00231

мне нужно брать элемент

JavaScript
1
2
3
let editor = document.getElementById('editor-container');
console.log(editor);
console.log(editor.tagName);//DIV

Сообщение от Aleks00231

при нажатие на него

с кликом всё несколько сложнее

JavaScript
1
editor.addEventListener('click', (e) => console.log(e.target.tagName));

e.target - это элемент на котором произошло событие(click в нашем случае).
Если у вашего дива нет вложенных элементов, то это будет он сам.
А если есть вложенные например, <p> или <span> или другие дивы, то в e.target будет тот элемент на котором произошел клик.

@Андрей МСК · 29.06.2019, 13:42

Сообщение от klopp

не понимаю зачем подключать целую библиотеку

Она вроде не такая большая. Сейчас много плагинов её использует.
И код на мой взгляд проще для понимания

@Mr_Sergo · 29.06.2019, 19:03

Aleks00231,

https://codepen.io/Mr_Sergo/pe... itors=1010

HTML5
1
2
3
4
<span id="spsp">span</span>
<div contenteditable id="editor-container">div</div>
<input type="button" id="inp-btn" value="input">
<button id="btn">button</button>

JavaScript
1
document.addEventListener('click',e => alert(`Тег: ${e.target.tagName.toLowerCase()}\nИд: ${e.target.id}`) );

Новые блоги и статьи Все статьи Все блоги /
Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .	Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача №1: при указании работ (справочник РаботыПоРемонтуСпецтехники),. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .

Как взять элемент и название тега в div

Решение