Wie kopiert man selektiv HTML, CSS und JS aus einem bestimmten DOM-Element?

Tools zum selektiven Kopieren von HTML-CSS-JS aus einem bestimmten DOM-Element

Die Überprüfung der Webseitenquelle ist eine gängige Praxis für Webentwickler, aber Das Kopieren bestimmter Abschnitte zum lokalen Basteln kann mühsam sein. In diesem Artikel werden Tools und Techniken zum selektiven Kopieren von HTML CSS JS aus einem gewünschten Element im DOM untersucht.

SnappySnippet: Eine benutzerdefinierte Lösung

Der Autor dieses Artikels hat SnappySnippet erstellt , eine Chrome-Erweiterung, die die Funktionalität zum Extrahieren von HTML-CSS-JS aus dem zuletzt überprüften DOM-Knoten bietet. Dieses Tool bietet zusätzliche Funktionen wie CSS-Optimierung, Codebereinigung und direkte Codefreigabe für CodePen und JSFiddle.

Weitere Funktionen

SnappySnippet umfasst die folgenden Funktionen:

• HTML-Bereinigung und Einrückung
• CSS-Optimierung für bessere Lesbarkeit
• Anpassungs- und Filteroptionen
• Behandlung von Pseudoelementen (::before, ::after )
• Intuitive Benutzeroberfläche

Implementierungsdetails

Die Implementierung von SnappySnippet brachte mehrere Herausforderungen und Lösungen mit sich:

Problem 1: CSS von HTML trennen

Um CSS zu isolieren, hat der Autor den Knoten im ausgewählten Unterbaum IDs zugewiesen und diese IDs verwendet, um entsprechende CSS-Regeln zu erstellen.

Problem 2: Standardwerte entfernen

Die Verwendung von getComputedStyle() führte zu einer großen Anzahl leerer oder mit Standardwerten versehener CSS-Eigenschaften. Um dieses Problem zu beheben, verglich der Autor Elementstile in einem Website-Kontext mit denen in einem leeren Iframe, in dem Standardbrowserstile angewendet werden.

Problem 3: Nur Kurzschrifteigenschaften beibehalten

Kurzschrifteigenschaften (z. B. Rahmenfarbe) wurden in der Ausgabe dupliziert. Der Autor hat diese mithilfe einer Liste von Eigenschaften mit Kurzentsprechungen herausgefiltert.

Problem 4: Vorangestellte Eigenschaften entfernen

Vorangestellte Eigenschaften (z. B. -webkit-transform-origin) wurden für den allgemeinen Gebrauch als unnötig erachtet. Der Autor hat sie der Einfachheit halber alle entfernt.

Problem 5: Kombinieren derselben CSS-Regeln

In der Ausgabe waren mehrere CSS-Regeln mit identischen Eigenschaften und Werten vorhanden. Durch die Kombination dieser Regeln wurde ihre Anzahl erheblich reduziert.

Problem 6: HTML bereinigen

Die Eigenschaft „outerHTML“ gab unformatierten HTML-Inhalt zurück. Der Autor hat eine JavaScript-Bibliothek (jquery-clean) zur Code-Neuformatierung und zum Entfernen unnötiger Attribute integriert.

Problem 7: Filter brechen CSS

Optionale Filter wurden zu SnappySnippet hinzugefügt CSS-Bruch verhindern. Benutzer können diese Filter im Menü „Einstellungen“ deaktivieren.

Der Code für SnappySnippet ist öffentlich auf GitHub zur weiteren Erkundung und Anpassung verfügbar.

Das obige ist der detaillierte Inhalt vonWie kopiert man selektiv HTML, CSS und JS aus einem bestimmten DOM-Element?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!