Обрабатывать элементы DOM при загрузке страницы

Question

Я ищу способ поместить кусок простого javascript в заголовок и заставить его перехватывать загрузку страницы так, чтобы при загрузке каждого тега или элемента он мог проверять определенное имя, идентификатор,или класс, и если он соответствует требованиям, то выполнить некоторые манипуляции.Кроме того, он должен срабатывать после обновления DOM с каждым новым фрагментом загруженной страницы.В то же время, страница, конечно, будет продолжать загружаться, но я готов выполнить отладку, чтобы выяснить какие-либо предостережения и проблемы.

Если браузер выполняет фильтрацию для меня, круто, иначе я будуЯ должен каждый раз проверять тип и имя элемента, и я понимаю, что это приведет к замедлению отображения страницы в худшем случае.В первую очередь меня интересует Firefox, потому что я ищу создание сценариев Greasemonkey, но кроссплатформенность была бы отличной.

Причина этого в том, чтобы не загружать страницу с неправильным стилем до конца,тогда сделайте это в новом стиле.Я думаю, что многие другие сайты, которые не могут быть использованы до завершения DOM, также могут получить преимущества от раннего связанного JavaScript.

Answer 1

С Greasemonkey и Firefox вы не можете поймать некоторые из первых элементов, и вы ничего не можете сделать, чтобы остановить элемент, например, EG <style>, от загрузки или анализа (без остановки загрузки всей страницы).

Лучшее, что вы можете сделать, это немедленно удалить элемент после загрузки или переопределить его эффекты более поздним кодом.

Вы можете получить представление о таком подходе - способном (в основном) ловить элементы DOM по мере их поступления - в этот ответ .

Тем не менее, "чтобы не загружать страницу с неправильным стилем до конца, а затем перейти на новый стиль" , гораздо более простой и свободный от мерцания метод - использовать Стильное дополнение для перезаписи оскорбительных стилей. Стильный, быстрее и проще, чем Greasemonkey, и воздействует на страницу практически во время загрузки. Просто помните, что стильный сценарий является приемлемым местом для использования ключевого слова !important.

Наконец, для загруженных извне стилей и сценариев вы можете легко заменить их утилитой Fiddler .

Answer 2

Вам нужно подключиться к событию DOMNodeInserted . Это событие вспыхивает, позволяя вам отслеживать весь документ, регистрируя событие на уровне документа.

Поскольку это будет поддерживаться только в современных браузерах, вам также может понадобиться запустить интервальный таймер, чтобы периодически проверять наличие новых элементов DOM. Вы должны быть осторожны, чтобы ваш код не был слишком неэффективным. Возможно, вы захотите предположить, что если в прошлый раз вы проверяли, скажем, 15 элементов, то вам нужно проверять только начиная с 16-го элемента (в поиске document.getElementsByTagName ('*') или что-то в этом роде).