Популярные ответы с меткой

21 голос

Событие изменения содержимого тега

Введение Была попытка сделать события на изменения элементов в DOM, да всплыла, уж очень оно сильно влияло на производительность. Называются они в литературе Mutation events: DOMAttrModified - если ...
Rolandius's user avatar
  • 3,602
10 голосов
Принятый

Стоит ли функцию как-либо называть или оставить анонимной?

Имеет. При отладке эта функция будет выводиться в консоль в том виде, в каком она была в коде, поэтому в случае функции с именем будет сразу ясно, что это за функция. А ещё в ES6 вводится свойство ...
Qwertiy's user avatar
  • 122k
8 голосов
Принятый

Событие изменения содержимого тега

Прослушать можно любой тег. Для прослушки изменения в поддереве нужно использовать DOMSubtreeModified. В примере ниже есть 2 параграфа <p> - demo1 и demo2. На document установлено событие ...
LEQADA's user avatar
  • 5,185
8 голосов

Как добавить hr после каждой p?

Зачем здесь jquery, так то проще ;) Pure HTML&CSS: p{ margin: 3px 0px; border-bottom: 1px solid black; } <article> <h3>What is Lorem Ipsum?</h3> <p>...
USERNAME GOES HERE's user avatar
8 голосов
Принятый

Поиск по DOM элементам

let btn_details = document.querySelector('.add'); btn_details.addEventListener('click', (e) => { console.log(e.target.closest('.item-wrapper').querySelector('.item-name').innerText) }) li { ...
UModeL's user avatar
  • 33.1k
7 голосов
Принятый

JQuery поиск обработчика события объекта

Начиная с jQuery 1.8, информация о событиях больше не доступна из «public API» для данных. Прочтите это сообщение в блоге jQuery. Теперь, для того чтобы узнать список событий записанных на объекте, ...
Yuri's user avatar
  • 15.9k
7 голосов

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

Как-нибудь так, например. let p = document.querySelector('p'); let checkbox = document.querySelectorAll('input'); for ( let i = 0; i < checkbox.length; i++ ){ checkbox[i]....
teran's user avatar
  • 29.1k
7 голосов
Принятый

Как добавить hr после каждой p?

document.querySelectorAll('p').forEach((elem) => { elem.insertAdjacentHTML('afterend', '<hr/>'); }); <article> <h3>What is Lorem Ipsum?</h3> <p>First</...
HTMLProgrammer's user avatar
6 голосов
Принятый

DOM взять все соседние элементы

Для того, чтобы найти соседние элементы в DOM при помощи Vanilla JS, существуют специальные свойства у элемента: .nextSibling - возьмет следующий элемент на одном уровне дерева, если такого нет, то ...
Rolandius's user avatar
  • 3,602
6 голосов
Принятый

Найти дочерний элемент по классу на чистом JavaScript

Например так: var parent = document.querySelector('.list-group-item'); var child = parent.querySelector('.filmname'); console.log(child); <li class="list-group-item"> <a href="...
Александр Казаков's user avatar
6 голосов
Принятый

Youtube Api - iframe вместо div player

Уберите параметр origin из src iframe, либо подставь туда свой домен и будет вам счастье) <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <...
Rysinsky Valentine's user avatar
6 голосов
Принятый

Вывести дочерние узлы кроме первого и последнего

if (document.body.children) { const children = document.body.children; for (var i = 1; i < children.length - 1; ++i) { console.log(children[i]) } }
torokhkun's user avatar
  • 3,585
6 голосов
Принятый

Изъять id,динамически созданного инпута

Создав динамически инпута, далее нужно вытянуть данные, а как если два три созданных? Поставить на их (class) счетчик, вот так first_0, second_1, .... Мне нужно самому указывать id при ...
Kosta B.'s user avatar
  • 5,811
6 голосов
Принятый

Как менять цвет placeholder-a через javascript?

.login::placeholder { opacity: 0.2; } .login:focus::placeholder { opacity: 1; color: red; } .login:hover::placeholder { opacity: 1; } <input type="text" class="login" ...
UModeL's user avatar
  • 33.1k
6 голосов
Принятый

динамическое создание блоков на js

Можете ради тренировки повозиться с document.createElement() и придумать прикольные функции для удобной работы с ним. Но если HTML чуть длинный, легче не заморачиваться и работать со строкой. ...
OPTIMUS PRIME's user avatar
6 голосов

Как добавить hr после каждой p?

А можно использовать ещё псевдоэлемент ::after *, *::after, *::before { box-sizing: border-box; } p::after { content: ''; display: block; position: static; width: 100%; height: 1px; ...
Михаил Камахин's user avatar
5 голосов
Принятый

Как определить родительский элемент

Есть такое свойство currentScript, но оно поддерживается не везде. Соответственно найти родителя просто: var parentElement = document.currentScript.parentNode; Нашелся еще один трюк, работает во ...
tutankhamun's user avatar
  • 11.3k
5 голосов

Выборка элементов по значению атрибута

можете использовать функции document.querySelector и document.querySelectorAll document.querySelector('img[src="1.jpg"]') Пример: document.body.innerHTML += document.querySelector('img[src="1....
Grundy's user avatar
  • 80.9k
5 голосов

DOM взять все соседние элементы

На нативном JS функции будут выглядить вот так: function getAllNextSiblings(element) { var out = []; while(element.nextSibling) { out.push(element = element.nextSibling); } ...
Fenex's user avatar
  • 451
5 голосов
Принятый

Simple HTML DOM Parser найти элемент с двумя классами одновременно

В целом понятно, что данная библиотека не умеет корректно обрабатывать селекторы, где перечисляются два и более класса подряд. Тем не менее, вы в целом смотрите в нужном направлении, используя форму ...
teran's user avatar
  • 29.1k
5 голосов
Принятый

JS: удалить атрибуты в конкретном <></>

в первом случае imgRemoveClass - это массив. Чтобы удалить класс, необходимо указать индекс элемента в этом массиве. Например, imgRemoveClass[0].removeAttribute("class"); Либо же циклом. Во втором ...
Dmytro's user avatar
  • 6,741
5 голосов
Принятый

В массив элементов добавить элемент, созданный с помощью createElement

Предлагаю для начала преобразовать task в обычный массив, далее потом при создании нового блока task мы добавляем его в массив, методом push и сразу же цепляем обработчик закрытия task на task__close, ...
Max's user avatar
  • 543
5 голосов

Рендеринг DOM-дерева

Вы рассматриваете слишком простые случаи, типа найти <z> и отрезать до </z>. Чуть более сложный пример: <tag param1="123" param2='345' param3="678">, просто начните переставлять ...
A K's user avatar
  • 28.6k
5 голосов
Принятый

Узнать координаты мыши относительно блока

Чтобы получить координаты внутри элемента, нужно из абсолютных координат мыши (pageY, pageX) вычесть смещение самого элемента. Получить его можно с помощью методов .offsetLeft и .offsetTop let div ...
Grundy's user avatar
  • 80.9k
5 голосов
Принятый

Как завернуть элементы в блок? JS

Как то так var ul; $(".Level-3").each(function(){ if ($(this).find(".link-none").length>0) { ul = $("<ul>").addClass("link-block"); ul.appendTo($(this).parent()); } $...
Talleyran's user avatar
  • 1,543
5 голосов
Принятый

Карточки как в Steam

Делается это вот так Большая работа на css в которой делаем перспективу а вот при наведении в зависимости от курсора меняем угол наклона Для адаптивности - достаточно просто изменить font с 200px на ...
Резидент Казахстана's user avatar
5 голосов

как сделать анимацию движения таракана

Я никак не могу заставить жука проворачиваться в сторону перемещения последующей позиции. Решено. Нужно было ставить дельту Y первой, и умножать сами новые X и Y на -1, чтобы жуки не шли задом на ...
ΝNL993's user avatar
  • 3,348
4 голоса
Принятый

Удаление узлов XML

SET @doc.modify('delete /root/n/t[position()>1]')
user193456's user avatar

Допускаются только превышающие минимальную длину ответы с наивысшим рейтингом, не являющиеся общими