Replace HTML using JavaScript

Seite 1 von 2 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/replace-html-using-javascript_252446/page_1 - zur Vollversion wechseln!

Ich bin gerade dabei mir gerade ein kleines (TamperMonkey-)Script zu basteln um ein paar Elemente bestimmter Websites zu ändern. Style-Sheets zu ändern ist recht leicht, ich habe aber nur sehr wenig JavaScript Erfahrung.

Derzeit versuche ich gerade ein DIV Element zu ändern, leider haben die alle keine ID (es sind quasi lauter verschachtelte DIV tags ineinander die verschiedene Klassen besitzen).

Das was ich versuche zu ändern sieht so aus:

Code:

<div class="slds-grid slds-gutters_small mdp cols-2 forcePageBlockSectionRow" data-aura-rendered-by="871:0" data-aura-class="forcePageBlockSectionRow">

Code:

<div class="slds-gutters_small mdp cols-2 forcePageBlockSectionRow" data-aura-rendered-by="871:0" data-aura-class="forcePageBlockSectionRow">

Code:

(function() { 

'use strict';
   document.body.innerHTML = document.body.innerHTML.replace("slds-grid slds-gutters_small mdp cols-2 forcePageBlockSectionRow\" data-aura-rendered-by=\"872",
                                                             "slds-gutters_small mdp cols-2 forcePageBlockSectionRow\" data-aura-rendered-by=\"872");
})();

ev. so:

Code:

var elems = document.querySelectorAll(".signature"); 
[].forEach.call(elems, function(element) { 
  element.classList.remove("sfb"); 
});

Bin auch ein n00b, aber meine Idee dazu:
Sind die klassen auf den verschiedenen div´s einmalig? Wenn ja, jquery einbinden und mit $( "div.slds-gutters_small" ) ansprechen, .removeClass() zum entfernen.

Ich würds auch so wie meepmeep machen.
Je nach verwendetem Browser kann man die Syntax noch ein bisschen einfacher machen, aber ein Iterieren über eine NodeList, die du dir über eine gemeinsame Klasse holst, ist sicher die am einfachsten zu verstehende Lösung.

Code:

let elems = document.querySelectorAll('.slds-grid');
elems.forEach( (elem) => { elem.classList.remove("slds-grid") });

Das Script macht zumindest bei mir (Chrome v70) nichts sichtbares.
So wie es für mich aussieht würde es die Klasse aber auch überall entfernen? Das wäre auch nicht das was ich wollen würde.


Bei mir im Browser sieht es so aus (es ist leider eine interne Website, deswegen kann ich nicht einfach eine URL posten und es hätte auch keiner Zugang).


Das "Description" Feld wollte ich prinzipiell einfach breiter machen und das geht indem man von dem einen DIV Tag die slds-grid Klasse wegnimmt (die restlichen Felder darüber und darunter sollten das behalten), die prinzipiell lt. CSS einfach display:flex drauf klatscht.

Code:

.slds-grid{
    display:flex
}

Du kannst ja auch erst das parent suchen (zb slds-form) und auf das dann querySelectorAll. Dann wirds nicht überall entfernt sondern nur unterhalb von slds-form.

Bin grad in der ubahn, sonst würd ichs schöner posten

Ich check deine Frage irgendwie ned . Du hast eine Anzahl an HTML-Elementen mit einer CSS-Klasse "slds-grid" und du möchtest eben diese Klasse von jedem Element entfernen. Dann ist das Snippet von ill das richtige. Aber du sagst du willst es nicht auf der gesamten Seite entfernen?

Ich will nur genau von dem einen DIV Tag (identifizierbar durch data-aura-rendered-by="872:0") die slds-grid Klasse wegnehmen, alle anderen können (oder sollen) so bleiben wie sie sind.

Ich versuche es gerade mit:

Code:

var descr = document.$('div[data-aura-rendered-by="872:0"]');
descr.classList.remove("slds-grid");

Dann suchs mit doc.findElementByAttribute("data-aura-rendered-by", "872:0"); und lösch die klasse raus

verwendest du ein javascript framework welches das dom nach dem laden verändert?
falls ja, pack deine manipulationen in eine function und ruf sie als callback auf

Code: JAVASCRIPT

$('div[data-aura-rendered-by="872:0"]').removeClass('slds-grid');

Pfui, ihr mit eurem jQuery immer .

Code: JAVASCRIPT

document.querySelectorAll('[data-aura-rendered-by="987:0"] .slds-grid').forEach(element => {
  element.classList.remove('slds-grid');
});

Zitat aus einem Post von -=Willi=-

Pfui, ihr mit eurem jQuery immer .

Code: JAVASCRIPT

document.querySelectorAll('[data-aura-rendered-by="987:0"] .slds-grid').forEach(element => {
  element.classList.remove('slds-grid');
});

Code: JAVASCRIPT

// ==UserScript==
// @name         Title
// @namespace    [url]http://tampermonkey.net/[/url]
// @version      0.1
// @description  Description!
// @author       Author
// @match        [url]https://myurl/[/url]
// @grant        none
// ==/UserScript==

(function() {
  'use strict';

  document.querySelectorAll('[data-aura-rendered-by="871:0"] .slds-grid').forEach(element => {
  element.classList.remove('slds-grid'); });

  document.querySelectorAll('[data-aura-rendered-by="872:0"] .slds-grid').forEach(element => {
  element.classList.remove('slds-grid'); });

})();

Zitat aus einem Post von Snoop

verwendest du ein javascript framework welches das dom nach dem laden verändert?

Zitat aus einem Post von Snoop

verwendest du ein javascript framework welches das dom nach dem laden verändert?
falls ja, pack deine manipulationen in eine function und ruf sie als callback auf

overclockers.at v4.thecommunity
© all rights reserved by overclockers.at 2000-2026