ページロードとしてDOM要素を処理する

Question

ヘッダーにプレーンJavaScriptを挿入して、ページロードをフックさせて、各タグまたは要素がロードされて見えるようにする方法を探しています特定の名前、ID、またはクラスを定義し、条件を満たす場合は何らかの操作を行います。あるいは、ダウンロードしたページの新しいチャンクごとにDOMが更新された後に起動させることもできます。その間、もちろん、ページはロードされ続けるでしょうが、私はデバッグを行い、警告と問題を把握しています。

ブラウザが私のためにフィルタリングを行うならば、すばらしいことです。そうでなければ、要素タイプと名前を毎回テストする必要があります。最悪の場合、ページのレンダリングが遅くなることがわかります。私はGreasemonkeyスクリプトを作成しようとしているので、主にFirefoxに関心がありますが、クロスプラットフォームは素晴らしいでしょう。

この理由は、間違ったスタイルのページを最後まで読み込んでから、新しいスタイルにジャンプさせないようにするためです。 DOMの完成まで使用できない他の多くのサイトも、初期のjavascriptの恩恵を受ける可能性があります。

Answer 1

DOMNodeInsertedイベントにフックする必要があります。このイベントにより、ドキュメントレベルでイベントを登録してドキュメント全体を監視することができます。

最新のブラウザでのみサポートされるため、定期的に新しいDOM要素を確認するためにインターバルタイマを実行する必要があります。あなたのコードはあまりにも非効率的ではないことに注意してください。前回チェックした要素が15個あったとすると、16番目以降の要素（document.getElementsByTagName（ '*'）検索など）を確認するだけで済みます。

Answer 2

GreasemonkeyとFirefoxでは、最初の要素のいくつかをキャッチすることはできません。要素を停止するためにEG <style>を読み込んだり、解析したりすることはできません。

できるだけ早く、の後にの要素を削除するか、後のコードでその効果を上書きしてください。

DOMエレメントを（ほとんど）キャッチすることができるそのようなアプローチのアイディアをthis answerで得ることができます。

しかし、「それは新しいスタイルに飛び込むている、最後まで間違ったスタイルでページをロードするから保つために」、はるかに簡単かつちらつき方法は、問題のあるスタイルを上書きするStylish add-onを使用することです。スタイリッシュで、Greasemonkeyよりも速くて簡単で、ページが実際にロードされるときに効果を発揮します。スタイリッシュなスクリプトは、!importantキーワードを使用するのに適した場所であることを忘れないでください。

最後に、外部から読み込まれたスタイルやスクリプトの場合は、Fiddler utilityに簡単に置き換えることができます。