Призываю вебмакак. Нужно поменять местами 444 и 999, желательно юзерскрипт или стиль. Хочу научиться менять местами любые элементы.
<div id="111">
<div class="222">
<span jsname="333">
<div>
<div class="444">
<div id="555">
<div class="666">
<div id="777">
<div id="888">
<div id="999">
<div id="111">
<div class="222">
<span jsname="333">
<div>
<div class="444">
<div id="555">
<div class="666">
<div id="777">
<div id="888">
<div id="999">
<div id="111"> и <div id="555">
И дальше спускаются каждый своей лесенкой.
Я не понимаю. Мне нужно на моем примере.
Не работает.
<span class="D6lY4c" jsname="czHhOd">
<span data-ved="randomname" jsname="GY3Xob">
Пробовал
const element1 = document.getElementById('GY3Xob')
const element2 = document.getElementById('D6lY4c')
const element1 = document.getElementById('GY3Xob')
const element2 = document.getElementById('czHhOd')
Ты реально настолько тупой или это жир?
IQ 140
Как вот это поменять местами? Тут нет класса:
<span class="D6lY4c" jsname="czHhOd">
<span data-ved="randomname" jsname="GY3Xob">
Чел, просто кинь это всё во флоат и сортируй так, как тебе надо.
> флоат
иди нахуй, тупая макака.
>>255409859 (OP)
Тут можно менять через CSS, используя гриды и свойство grid-tamplate-areas. Но так как ты тупой вкатун для тебя это слишком сложно, поэтому просто используй решение с клонированием нод анона сверху. можно сделать это без клонирования
>>255416379
>>255412090
Обсерверы и обработчики событий не скопируются.
>флоат
Что это?
>>255416575
Не работает. Я пытаюсь поменять кнопку в гуглопоиске, которая открывает окно "About this result" на кнопку "Cache", которая находит в правом нижнем углу окна "About this result".
>>255416902
Я не вкатун, я пытаюсь исправить говнодизайн гуглодегенератов.
>Я пытаюсь поменять кнопку в гуглопоиске, которая открывает окно "About this result" на кнопку "Cache
В чем проявляется? Кнопка сама перемещается, но при нажатии ничего не происходит? Или вообще остается на одном месте?
>Я пытаюсь поменять кнопку в гуглопоиске, которая открывает окно "About this result" на кнопку "Cache", которая находит в правом нижнем углу окна "About this result".
Кинь скрины кнопок, чтобы было понятно, где они находятся
>Что это?
https://habr.com/ru/post/142486/
Просто берешь и вертишь элементами так, как тебе хочется.
Тут про юзерскрипты речь, а не про разработку
В коде страницы все по-старому, работает кнопка также как и раньше - открывает "About this result"
>>255417219
Первая картинка код кнопки Cache. Вторая картинка код кнопки, которая открывает "About this result". Третья картинка местоположение кнопок.
Браузер фаерфокс старый до версии 57. Был случай, когда некоторые функции юзерскрипта на нем не работали, но работале на 57+.
>>255417416
>>255417629
https://jsfiddle.net/hzko7t0x/29/
Этот вариант сохраняет все обработчики и обсерверы на перемещаемых нодах мб я какой-то эдж кейс не обработал, но мне похуй я в лесополосе под пивом
Поддержу адеквата, рабочий варик, а то я уже было начал писать враппер для addEventListener
>>255409859 (OP)
Есть еще вариант без ебани: на месте второй ноды вставить пустую заглушку-ноду комментария, затем просто свапнуть два раза.
Вроде так даже во vue работает движок при использовании дерективы v-if
>>255409859 (OP)
https://jsfiddle.net/od7gnc69/4/
С нодой-комментом даже намного элегантенее и короче получилось
>ophui
Это куда? Элементы, которые надо поменять местами:
<span class="D6lY4c" jsname="czHhOd">
<span data-ved="randomname" jsname="GY3Xob">
Бля, ты видимо пиздец тупой, либо тролль. Возьми на поменяй значения в коде из жсфиддла под свои селекторы.
Я не понимаю что такое "ophui".
посмотри выше в html код. Там есть кнопка, которая имеет id ophui, в js же мы находим эту кнопку по id через метод document.getElementById и навешиваем на эту кнопку обработчик на событие click
на кой фиг там юзерскрипт ?
на вот https://developer.mozilla.org/ru/docs/Web/CSS/order
order работает только в пределах одного флекс контейнера.
А опушке надо из разных блоков все это менять
См. >>255417416
Там нет такого айди. Что на что менять?
<span class="D6lY4c" jsname="czHhOd">
<span data-ved="randomname" jsname="GY3Xob">
Уникальное и неизменное здесь только jsname="czHhOd" и jsname="GY3Xob"
В первом элементе есть класс, по нему можно найти:
document.getElementsByClassName("D6lY4c")[0]
или по атрибуту jsname
document.querySelector("span[jsname=czHhOd]")
Во втором элементе класса нет, поэтому только искать по атрибутам:
document.querySelector("span[data-ved=randomname]")
или
document.querySelector("span[jsname=GY3Xob]")
или
document.querySelector("span[jsname=GY3Xob][data-ved=randomname]")
Почитай на досуге https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Selectors
Вот список всех методов, которые будут искать элементы на странице:
querySelector - находит первый найденных элемент, соответствующией переданному CSS - селектору
querySelectorAll - находит все найденные элементы, соответствующией переданному CSS - селектору
getElementById - возвращает первый найденных элемент с указанным id
getElementsByClassName - возращает живую коллекцию всех элементов с переданным классом
getElementsByTagName возращает живую коллекцию всех элементов с переданным тэгом (например, div)
getElementsByTagName возращает живую коллекцию всех элементов с переданным тэгом и именным пространством, например.
в последнем getElementsByTagNameNS я имел в виду, да
А ophui это что?
додумайся
Это я?
Че сюда писать? Какой элемент?
сюда это куда?
Вместо ophui
я выше написал че делает метод getElementById, и что ему нужно передавать.
>>255422229
Гугли свойство order
<span data-ved="randomname" jsname="GY3Xob">
Не появляется, пока не нажать на кнопку, которая открывает "About this result". Следовательно скрипт не может поменять. Сами ссылку на webcache хранятся в скрипте (<script>), из которого они прогружаются в этот элемент. Кусок скрипта со ссылкой:
https://webcache.googleusercontent.com/search?q\\u003dcache:SsA6anm1iyEJ:https://www.gfa-group.de/+\\u0026cd\\u003d1\\u0026hl\\u003den\\u0026ct\\u003dclnk\\u0026gl\\u003dru\x22,null,[null,[32,null,2]],null,null,null,[[\x22Cached\x22]]]]]]]','Ao5Tb0','[3,1,null,null,0,0,0,0,0,0,1,1]','Ao5Tbg','[0,2500,\x22/search?hl\\u003den\x22,\x220\x22,\x22inline\x22,2,0,0,null,0,0,0,0]','Ao5Tbs','[null,null,null,null,null,null,[[\x22Source\x22,\x22
Почему бы просто не добавить обёртку, которую и сделать флекс-контейнером.
Поридж открыл для себя SPA.
Тогда реверс-инженерингом смотри, что делает этак кнопка и создавай свою кнопку с таким же поведением. Или просто эмулируй клик на первую кнопку, чтобы появился этот попап и в нем нажми на нужную тебе кнопку, затем скрой попап.
>Почему бы просто не добавить обёртку
Она в совершенно разных блоках находится. Как ты обернешь все эти в блоки, если внутри них есть другие флексбоксы/гриды?
>Почему бы просто не добавить обёртку
>>255423299
https://webcache.googleusercontent.com/search?q=cache:SsA6anm1iyEJ:https://www.gfa-group.de/
После SsA6anm1iyEJ может быть любой сайт, кеш все равно откроется тот, который зашифрован в SsA6anm1iyEJ. Пример:
https://webcache.googleusercontent.com/search?q=cache:SsA6anm1iyEJ:https://2ch.hk
Откроется кеш сайта https://www.gfa-group.de/
Ну тогда пусть скриптом делает, который ему выше кинули. Только пусть от var избавится.
находишь по classname
сохраняешь в отдельную перменную
ищешь место куда хочешь воткунть предвориттельно удалив из прошлого
через некст узел вставляешь
готово
Я не вкатун епт, я просто хочу чтобы кнопка кеш была в удобном месте. Не так давно можно было нажать на эту же иконку из трех точек и там вылезало "cache", причем ссылки тогда не шифровались в скрипте. Ублюдочный гугл.
Та не получится тем скриптом, там же спа на говногуляре. Там этот элемент не появляется в доме пока не кликнешь на эту кнопку.
>>255423422
Ну так просто создай новую кнопку, при нажатии на которую будет клик на троеточие, затем на кэш. Нахуя ты тратишь время уважаемых синьор-вротенд-пиздаболов вроде меня с дебильными задачами вроде поменять кнопки местами? Сразу не мог написать что ты хочешь сделать и нахуя тебе это надо?
Я не знал, что там все так сложно. Я вообще думал, что это меняется стилем, также как меняются местами заголовок результата поиска и адрес сайта:
.g > div[data-hveid] > div.tF2Cxc > div.yuRUbf > a > br:first-child ~ h3 ~ div {
position: static;
margin-top: -0.2em;
}
.Imj78 ~ [data-ved] ~ div
Пытался подставлять свои значения, а это, как оказалось, работает только в пределах одного блока.
Давай начнем с самого начала. Как ты вообще открыл поиск гугла с тремя точками? У меня он так открывается:
Это лишнее.
Гугл еще не перевел тебя на эту бета версию. Куки давно чистил? Айпи давно менял? У меня где-то 2 месяца назад поменялось. Некоторое время удавалось сменой айпи и чисткой кук вернуться на старую версию, но сейчас видимо гугломразь перевела всего моего провайдера на тест своей параши. В любом случае скоро это появится у всех.
>Айпи давно менял?
У меня статчиеский белый ip, уже как несколько лет.
>Куки давно чистил?
Спецом ща првоерил в инкогнито режиме, все так же
>статчиеский белый ip
У меня динамика, скорее всего они весь мой диапазон поставили на тест своего говна. Гугл всегда так делает. Новый уродский дизайн ютуба тоже вводили постепенно, чтобы скот особо не бухтел. На реддите я видел инфу о том, что некоторых посадили на него еще с весны.
Уже выяснили, что один из элементов не появляется до тех пор, пока не нажмешь кнопку, открывающую "about this result"
Информация о том, как перейти на кэш версию так и осталась на странице гугла, кстати.
Вот таким образом:
https://www.google.com/search?q=cache:example.com/your/page.html.
В итоге, получается:
1. После загрузки страницы тебе нужно найти все ссылки в результатах поиска
2. Скопировать адрес этой ссылки
3. Убрать из скопированного адреса ссылки протокол (http:// или https://)
4. Создать новую ссылку
5. Задать новой ссылке target=_blank и href=https://www.google.com/search?q=cache:ССЫЛКАИЗПУКНТА3
6. Поместить ссылку рядом ссылкой поиска, опционально применить стили.
Дерзай.
>Ну так просто создай новую кнопку, при нажатии на которую будет клик на троеточие, затем на кэш
Как это сделать?
>>255424355
Работает, это странно:
http://webcache.googleusercontent.com/search?q=cache:https://www.kinopoisk.ru/film/946943/
Но возможно скоро перестанет, потому что новые ссылки на кеш выглядят вот так, причем они так выглядели даже на старой версии гугла:
https://webcache.googleusercontent.com/search?q=cache:xn8ytpXDvYIJ:https://www.kinopoisk.ru/film/946943/
>1. После загрузки страницы тебе нужно найти все ссылки в результатах поиска
>2. Скопировать адрес этой ссылки
>3. Убрать из скопированного адреса ссылки протокол (http:// или https://)
>4. Создать новую ссылку
>5. Задать новой ссылке target=_blank и href=https://www.google.com/search?q=cache:ССЫЛКАИЗПУКНТА3
>6. Поместить ссылку рядом ссылкой поиска, опционально применить стили.
Я не осилю. Это юзерскриптом делается?
>скоро перестанет
Не перестанет. Гуглу посрать на пару анонов, которые будут открывать кэш по старой ссылке, главное отсеять основную массу.
А выпиливать они не будут, так как явно сломают большое количество сервисов, включая свои.
>Я не осилю
Ну по пунктам приступай, вопросы всегда можешь задавать сюда или в жс тред в программаче, если этот утонет.
>Это юзерскриптом делается?
Ясен хуй, стилями ты такое сделать не сможешь.
>1. После загрузки страницы тебе нужно найти все ссылки в результатах поиска
Я даже это не понял. Я в скриптах ноль, я могу только по аналогии что-то переделать.
Ну смотри, я буду приводитьв пример свою версию гугла, со старым интерфейсом, так как новой нет.
1. Ждем загрузки страницы.
Здесь мы ждем пока закгрузится документ, затем выполняем функцию (она сейчас пустая)
document.addEventListener('load', ()=>{})
2. Ищем все ссылки в результатах поиска:
В этой функции вызываем querySelectorAll, про который я писал выше И сохраянем в констатну links. Селектор .yuRUbf>a находит все ссылки (a), которые находится непосредственно под элементом с классом yuRUbf (см. пикрилейтед)
document.addEventListener('load', ()=>{
const links = document.querySelectorAll(".yuRUbf>a")
})
3. Далее проходимся по нашим ссылкам через цикл for of:
document.addEventListener('load', ()=>{
const links = document.querySelectorAll(".yuRUbf>a");
for (const link of links){}
})
4. Убираем из ссылки протокол и www.:
document.addEventListener('load', ()=>{
const links = document.querySelectorAll(".yuRUbf>a");
for (const link of links){
const {href} = link;
const fixedHref = href.replace(/https?:\/\/(www\.)?/i, "")
}
})
5. СОздаем новую ссылку задаем ей текст, target и href, помещаем сразу за текущей ссылкой. (можешь потом в любое место на странице поместить)
document.addEventListener('load', ()=>{
const links = document.querySelectorAll(".yuRUbf>a");
for (const link of links){
const {href} = link;
const fixedHref = href.replace(/https?:\/\/(www\.)?/i, "")
const newLink = document.createElement(a);
newLink.textContent = "Открыть закешированную версию";
newLink.target = "_blank"; //Что бы открывалось в новой вкладке по умолчанию
newLink.href= `https://www.google.com/search?q=cache:${fixedHref}`.
link.parentElement.insertBefore(newLink, link.nextSibling)
}
})
Я еще не отработал кейс, когда страницы уже загружена. Можешь сам погуглить и написать код, там не сложно.
Исправил код, т.к. там были синтаксические ошибки.
В конце должно получится так:
document.addEventListener('load', ()=>{
const links = document.querySelectorAll(".yuRUbf>a");
for (const link of links){
const {href} = link;
const fixedHref = href.replace(/https?:\/\/(www\.)?/i, "")
const newLink = document.createElement('a');
newLink.textContent = "Открыть закешированную версию";
newLink.target = "_blank"; //Что бы открывалось в новой вкладке по умолчанию
newLink.href= `https://www.google.com/search?q=cache:${fixedHref}`;
link.parentElement.insertBefore(newLink, link.nextSibling)
}
})
Проверил, все работает
Ты это куда ввел? В консоль? У меня не работает ни в консоли, ни в violent monkey.
Ты навешиваешь обработчик на событие load, а оно уже прошло (оно происходит один раз во время загрузки документа).
Я раньше писал, что тебе нужно отработать кейс, когда документ загрузился, а потом уже выполняется скрипт. Этот кейс как раз и подходит под твою проблему. В итоге код должен быть следующим:
const fn = ()=> {
const links = document.querySelectorAll(".yuRUbf>a");
for (const link of links){
const {href} = link;
const fixedHref = href.replace(/https?:\/\/(www\.)?/i, "")
const newLink = document.createElement('a');
newLink.textContent = "Открыть закешированную версию";
newLink.target = "_blank"; //Что бы открывалось в новой вкладке по умолчанию
newLink.href= `https://www.google.com/search?q=cache:${fixedHref}`;
link.parentElement.insertBefore(newLink, link.nextSibling)};
}
document.readyState === 'complete' ? fn() : document.addEventListener('load', fn);
Здесь я вынес основной код в функцию с именем fn. Потом проверяю, загрузился ли документ: если загрузился, то выполняю fn сразу, если нет - жду загрузки и выполняю fn.
Не добавляет кнопку:
// ==UserScript==
// @name New script - jsfiddle.net
// @namespace Violentmonkey Scripts
// @grant none
// @version 1.0
// @include *
// @run-at document-end
// @description 10/2/2021, 4:49:29 PM
// ==/UserScript==
const fn = ()=> {
const links = document.querySelectorAll(".yuRUbf>a");
for (const link of links){
const {href} = link;
const fixedHref = href.replace(/https?:\/\/(www\.)?/i, "")
const newLink = document.createElement('a');
newLink.textContent = "Открыть закешированную версию";
newLink.target = "_blank"; //Что бы открывалось в новой вкладке по умолчанию
newLink.href= `https://www.google.com/search?q=cache:${fixedHref}`;
link.parentElement.insertBefore(newLink, link.nextSibling)};
}
document.readyState === 'complete' ? fn() : document.addEventListener('load', fn);
а ты уверен, что он вообще запускается?
попробуй создать скрипт с кодом alert(123) и попробуй вставить его на страницу
>alert(123)
Работает.
Я вставил alert(123) сверху прям в твой скрипт. Алерт работает, но кнопки нет. У тебя не хромоног случаем?
хуй его знает. Видимо он как-то мутирует значение document.readyState.
Вижу, что обезьянка поддержкивает запуск после загрузки, поэтому можно вообще убрать событие загрузки и вставить следующий код:
я проверил, в обезьяне работает на chrome 94
// ==UserScript==
// @name New script - google.ru
// @namespace Violentmonkey Scripts
// @match https://www.google.ru/search
// @grant none
// @version 1.0
// @author -
// @description 02.10.2021, 17:46:00
// ==/UserScript==
const links = document.querySelectorAll(".yuRUbf>a");
for (const link of links){
const {href} = link;
const fixedHref = href.replace(/https?:\/\/(www\.)?/i, "")
const newLink = document.createElement('a');
newLink.textContent = "Открыть закешированную версию";
newLink.target = "_blank"; //Что бы открывалось в новой вкладке по умолчанию
newLink.href= `https://www.google.com/search?q=cache:${fixedHref}`;
link.parentElement.insertBefore(newLink, link.nextSibling)};
> Как поменять местами элементы страницы?
Где и нахуя? Решение такого дрочева может разнится от сайта к сайту, а где-то может быть вообще нереально (в ютубе или вк например)
>нереально
Все реально, даже если это SPA.
Ура! Работает!
Конеш, только ты умолчал что после этого с ним взаимодействовать больше нельзя будет, ну да ладно
>взаимодействовать больше нельзя будет
Схуяли? Обработчики событий и обсерверы вместе с элементом переносятся.
Добавил в юблок:
www.google.com##[href^="https://www.google.com/search"]:style(margin-left: 10px)
Красота! Че раньше никто не додумался? В один клик гораздо удобнее.
Вы только посмотрите какая красота...
Нахуя ты стиль прописываешь через юблок? В самом скрипте пропиши его.
Я не умею в скрипте прописывать.
// ==UserScript==
// @name New script - google.ru
// @namespace Violentmonkey Scripts
// @match https://www.google.ru/search
// @grant none
// @version 1.0
// @author -
// @description 02.10.2021, 17:46:00
// ==/UserScript==
const links = document.querySelectorAll(".yuRUbf>a");
for (const link of links){
const {href} = link;
const fixedHref = href.replace(/https?:\/\/(www\.)?/i, "")
const newLink = document.createElement('a');
newLink.textContent = "Открыть закешированную версию";
newLink.target = "_blank"; //Что бы открывалось в новой вкладке по умолчанию
newLink.href= `https://www.google.com/search?q=cache:${fixedHref}`;
Object.assign(newLink.style, {marginLeft: "10px"})
link.parentElement.insertBefore(newLink, link.nextSibling)};
Работает! Заметил странность (не относится к скрипту). В результатах поиска на первых 4 страницах новый стиль гугла (кнопка с тремя точками "about this result"), а начиная с 5 страницы старая стрелочка с кнопкой Cached, запрос:
https://www.google.com/search?q=adads&ie=utf-8&oe=utf-8&hl=en
>только сейчас нашелся человек, сумевший это сделать
потому что ты нормально объяснить не можешь че тебе надо.
Ты изначально задал вопрос "Как мне два элемента поменять местами?", а надо было:
"Меня не устраивает что новая ссылка на кеш версию находится в жопе, как её можно поместить куда-нибудь на более видное место?"
и сразу надо было написать, что у тебя скрипт запускается через ViolentMonkey, ибо я, имея 3 года опыта в коммерческой разработке нихзуя не понял, что имеется в виду под юсер скриптом.
Первые две темы я создавал прям как ты описал, но никто не ответил. Я решил, что это слишком сложно, поэтому создал тему с более общим вопросом, чтобы уже самому ковырять конкретно под мой случай.
>>255429858
>что имеется в виду под юсер скриптом
Братан: https://www.google.com/search?q=userscript&ie=utf-8&oe=utf-8&hl=en
Вроде везде так называют скрипт для обезьяны.
>так называют скрипт для обезьяны
так называют скрипт, который будет менять содержимое на веб странице. Скрипт, который ты вставляешь ручками в консоль тоже является юзер скриптом.
А форматы у них разные? Для консоли и для обезьяны.
Пасрал на вайтишек ебаных
Как видишь, да.
>>255427476
через консоль работает, в обезьяне нет.
У меня и через консоль не сработал, лиса пред 57.
Ты ошибся. Мы тут исправляем ошибки криворуких дизайнеров сайтов.
хуй знает, у меня нет лисы на домашнем пк, не могу проверить чому так.
По идее должно работать.