21
голос
Событие изменения содержимого тега
Введение
Была попытка сделать события на изменения элементов в DOM, да всплыла, уж очень оно сильно влияло на производительность. Называются они в литературе Mutation events:
DOMAttrModified - если ...
10
голосов
Принятый
Стоит ли функцию как-либо называть или оставить анонимной?
Имеет. При отладке эта функция будет выводиться в консоль в том виде, в каком она была в коде, поэтому в случае функции с именем будет сразу ясно, что это за функция. А ещё в ES6 вводится свойство ...
8
голосов
Принятый
Событие изменения содержимого тега
Прослушать можно любой тег. Для прослушки изменения в поддереве нужно использовать DOMSubtreeModified.
В примере ниже есть 2 параграфа <p> - demo1 и demo2. На document установлено событие ...
8
голосов
Как добавить hr после каждой p?
Зачем здесь jquery, так то проще ;)
Pure HTML&CSS:
p{
margin: 3px 0px;
border-bottom: 1px solid black;
}
<article>
<h3>What is Lorem Ipsum?</h3>
<p>...
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 { ...
7
голосов
Принятый
JQuery поиск обработчика события объекта
Начиная с jQuery 1.8, информация о событиях больше не доступна из «public API» для данных. Прочтите это сообщение в блоге jQuery. Теперь, для того чтобы узнать список событий записанных на объекте, ...
7
голосов
Как сократить костыль? Как написать короче данный скрипт?
Как-нибудь так, например.
let p = document.querySelector('p');
let checkbox = document.querySelectorAll('input');
for ( let i = 0; i < checkbox.length; i++ ){
checkbox[i]....
7
голосов
Принятый
Как добавить hr после каждой p?
document.querySelectorAll('p').forEach((elem) => {
elem.insertAdjacentHTML('afterend', '<hr/>');
});
<article>
<h3>What is Lorem Ipsum?</h3>
<p>First</...
6
голосов
Принятый
DOM взять все соседние элементы
Для того, чтобы найти соседние элементы в DOM при помощи Vanilla JS, существуют специальные свойства у элемента:
.nextSibling - возьмет следующий элемент на одном уровне дерева, если такого нет, то ...
6
голосов
Принятый
Найти дочерний элемент по классу на чистом JavaScript
Например так:
var parent = document.querySelector('.list-group-item');
var child = parent.querySelector('.filmname');
console.log(child);
<li class="list-group-item">
<a href="...
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>
<...
6
голосов
Принятый
Вывести дочерние узлы кроме первого и последнего
if (document.body.children) {
const children = document.body.children;
for (var i = 1; i < children.length - 1; ++i) {
console.log(children[i])
}
}
6
голосов
Принятый
Изъять id,динамически созданного инпута
Создав динамически инпута, далее нужно вытянуть данные, а как если два три созданных?
Поставить на их (class) счетчик, вот так first_0, second_1, ....
Мне нужно самому указывать id при ...
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" ...
6
голосов
Принятый
динамическое создание блоков на js
Можете ради тренировки повозиться с document.createElement() и придумать прикольные функции для удобной работы с ним. Но если HTML чуть длинный, легче не заморачиваться и работать со строкой. ...
6
голосов
Как добавить hr после каждой p?
А можно использовать ещё псевдоэлемент ::after
*, *::after, *::before {
box-sizing: border-box;
}
p::after {
content: '';
display: block;
position: static;
width: 100%;
height: 1px;
...
5
голосов
Принятый
Как определить родительский элемент
Есть такое свойство currentScript, но оно поддерживается не везде. Соответственно найти родителя просто:
var parentElement = document.currentScript.parentNode;
Нашелся еще один трюк, работает во ...
5
голосов
Выборка элементов по значению атрибута
можете использовать функции document.querySelector и document.querySelectorAll
document.querySelector('img[src="1.jpg"]')
Пример:
document.body.innerHTML += document.querySelector('img[src="1....
5
голосов
DOM взять все соседние элементы
На нативном JS функции будут выглядить вот так:
function getAllNextSiblings(element) {
var out = [];
while(element.nextSibling) {
out.push(element = element.nextSibling);
}
...
5
голосов
Принятый
Simple HTML DOM Parser найти элемент с двумя классами одновременно
В целом понятно, что данная библиотека не умеет корректно обрабатывать селекторы, где перечисляются два и более класса подряд. Тем не менее, вы в целом смотрите в нужном направлении, используя форму ...
5
голосов
Принятый
JS: удалить атрибуты в конкретном <></>
в первом случае imgRemoveClass - это массив. Чтобы удалить класс, необходимо указать индекс элемента в этом массиве. Например, imgRemoveClass[0].removeAttribute("class"); Либо же циклом.
Во втором ...
5
голосов
Принятый
В массив элементов добавить элемент, созданный с помощью createElement
Предлагаю для начала преобразовать task в обычный массив, далее потом при создании нового блока task мы добавляем его в массив, методом push и сразу же цепляем обработчик закрытия task на task__close, ...
5
голосов
Рендеринг DOM-дерева
Вы рассматриваете слишком простые случаи, типа найти <z> и отрезать до </z>.
Чуть более сложный пример: <tag param1="123" param2='345' param3="678">, просто начните переставлять ...
5
голосов
Принятый
Узнать координаты мыши относительно блока
Чтобы получить координаты внутри элемента, нужно из абсолютных координат мыши (pageY, pageX) вычесть смещение самого элемента. Получить его можно с помощью методов .offsetLeft и .offsetTop
let div ...
5
голосов
Принятый
Как завернуть элементы в блок? JS
Как то так
var ul;
$(".Level-3").each(function(){
if ($(this).find(".link-none").length>0) {
ul = $("<ul>").addClass("link-block");
ul.appendTo($(this).parent());
}
$...
5
голосов
Принятый
Карточки как в Steam
Делается это вот так
Большая работа на css в которой делаем перспективу а вот при наведении в зависимости от курсора меняем угол наклона
Для адаптивности - достаточно просто изменить font с 200px на ...
5
голосов
как сделать анимацию движения таракана
Я никак не могу заставить жука проворачиваться в сторону перемещения последующей позиции.
Решено. Нужно было ставить дельту Y первой, и умножать сами новые X и Y на -1, чтобы жуки не шли задом на ...
4
голоса
Принятый
Допускаются только превышающие минимальную длину ответы с наивысшим рейтингом, не являющиеся общими
Связанные метки
dom × 847javascript × 655
html × 255
jquery × 152
php × 70
css × 51
xml × 41
парсер × 34
java × 31
события × 27
ajax × 24
массивы × 18
html5 × 16
javascript-events × 14
reactjs × 13
функции × 13
vue.js × 12
node.js × 11
объекты × 9
frontend × 9
регулярные-выражения × 8
веб-программирование × 8
iframe × 8
xpath × 8
json × 7