element.replaceChildを使って上の階層に上書きする

greasemonkey

今回は http://upload0.dyndns.org/up/2/_/ を使い易いように改造していく。

どのファイルでもいいので、適当にクリックして個別のファイルのダウンロードページに進む。

広告バナーがたくさん

ダウンロードページにいくとバナーがたくさんある。目的のファイルをダウンロードするには『ダウンロード』と書かれたリンクをクリックしないといけない。（自動的に『ダウンロード』のリンク先に飛ぶ方法もあるけど。）


firebugでソースをみるとこうなっている。

バナーにid、class、nameが付いていれば、広告不可視化関数を使って簡単にdisplay:none出来るけど今回は使えない。DOM element - MDCを眺めていたらreplaceNodeというのが便利そうなので使ってみることにした。
アイディアとしては、ダウンロードのaタグの部分を上の階層に上げる。上位と下位を入れ替える。そうすれば上書きされて広告バナーの部分が消滅するはず。

ソースコード

var d = document.evaluate('//a[@class="download"]', document, null, 7, null);
d.snapshotItem(0).parentNode.parentNode.parentNode.parentNode.replaceChild(d.snapshotItem(0), d.snapshotItem(0).parentNode.parentNode.parentNode);

まずxpathでaタグを補足する。入れ替え先の親ノードをreplaceChildの前に書いて、第一引数に入れ替えたいノード、第二引数に入れ替え先ノードを書く。


ちょっとだけダイエット。

var d = document.evaluate('//a[@class="download"]', document, null, 7, null);
d.snapshotItem(0).parentNode.offsetParent.replaceChild(d.snapshotItem(0), d.snapshotItem(0).parentNode.parentNode.parentNode);

tdにいくとoffsetParentにtableタグが指定されているのでそれを利用した。（firebugでのDOMツリーツアーは楽しい。）


追記 xpathでor検索して二匹釣る。
snapshotはツリー順に作られるのでsnapshotItem(0)はtable。snapshotItem(1)はa。

var d = document.evaluate('//a[@class="download"]|//table[descendant::a/@class="download"]', document, null, 7, null);
d.snapshotItem(0).parentNode.replaceChild(d.snapshotItem(1), d.snapshotItem(0));

結果

余計なものは消えた。ソースにGM_addStyle('.download { font-size:30pt }');を追加して『ダウンロード』の文字を大きくした。これが一番やりたかったこと。


tableの中身がすっきりした。

次回は、『ダウンロード』のリンク先に舞台を移して「ここから〜ここまで」のようにDOM Rangeを使って複数のノードを上の階層に上書きする方法を模索します。

関連