セクションをHTMLページから非表示にする必要があります。
<h1 data-ng-show="!menuPinned && !isSaaS" class="logo floatLeft" aria-hidden="false"><span>XXX </span><span style="font-weight: bold;">XXX </span><span>XXXXX</span></h1>
次のコードはChrome dev。toolsで正常に動作します
var ibmlogo = document.querySelectorAll('h1.logo.floatLeft');
ibmlogo[1].remove();
しかし、スクリプトをアクティブにしてページをロードすると、セクション(h1)が消えません。これは、スクリプトの実行時にDOMの読み込みがまだ完了していないため、スクリプトがセレクターを見つけられないためだと思います。
私はさまざまなこと(例:window.onLoad)を試しましたが、それでも私のスクリプトは効果的ではありません。最後の試行(失敗)は次のとおりです。
var logo = document.querySelectorAll('h1.logo.floatLeft');
logo.onload = function() {removeLogo()};
function removeLogo(){
console.log("### logo array lenght: " + logo.length);
logo[1].remove();
};
必須:
@ run-at:document-start userscriptメタブロック内。
// ==UserScript==
..............
// @run-at document-start
..............
// ==/UserScript==
ここで、上記のオプションは次のとおりです。
ロゴを隠すスタイルを挿入するだけです:
(document.head || document.documentElement).insertAdjacentHTML('beforeend',
'<style>h1.logo.floatLeft { display: none!important; }</style>');
MutationObserver を使用して、要素がDOMに追加された直後に要素を検出して削除します。
new MutationObserver(function(mutations) {
// check at least two H1 exist using the extremely fast getElementsByTagName
// which is faster than enumerating all the added nodes in mutations
if (document.getElementsByTagName('h1')[1]) {
var ibmlogo = document.querySelectorAll('h1.logo.floatLeft')[1];
if (ibmlogo) {
ibmlogo.remove();
this.disconnect(); // disconnect the observer
}
}
}).observe(document, {childList: true, subtree: true});
// the above observes added/removed nodes on all descendants recursively