Zusammenfassung der JavaScript- und CSS-Kompatibilität von Front-End-Browsern
1. getElementById
[Standardreferenz]
getElementById ist Die von der Document-Schnittstelle bereitgestellte Methode wird zum Abrufen eines Elements verwendet. Der von dieser Methode übergebene Parameter sollte der Wert des id-Attributs des Zielelements sein. Die ID des Zielelements ist eine Zeichenfolge, bei der die Groß- und Kleinschreibung beachtet wird sollte innerhalb des Dokuments eindeutig sein.
[Problembeschreibung]
Aber in IE6 IE7 IE8(Q) wird es unterstützt, eine APPLET BUTTON FORM IFRAME IMG INPUT zu erhalten, deren Namensattributwert elementName von document.getElementById(elementName) ist. MAP META OBJECT EMBED SELECT TEXTAREA-Element, und bei der ID wird die Groß-/Kleinschreibung nicht beachtet.
【Auswirkungen】
Dieses Problem führt dazu, dass das Zielelement in Nicht-IE-Browsern nicht abgerufen werden kann.
[Lösung]
Bei Verwendung der document.getElementById-Methode zum Abrufen von Seitenelementen sollte der ID-Attributwert des Elements anstelle des Namensattributwerts des Elements übergeben werden Dabei wird strikt auf Groß- und Kleinschreibung geachtet. Bitte beachten Sie gleichzeitig, dass der ID-Attributwert eines Elements auf der Seite nicht mit dem Namensattributwert anderer Elemente wiederholt werden kann.
Außerdem unterscheidet der standardmäßige getElementsByName wie getElementById die Groß-/Kleinschreibung, unter IE ist er jedoch nicht von der Groß-/Kleinschreibung abhängig. Daher ist es am besten, bei der Verwendung strikt auf die Groß-/Kleinschreibung zu achten.
2. IE ignoriert bestimmte Leerzeichen beim Erstellen eines DOM-Baums
[Standardreferenz]
Knoten (Knoten) umfasst nicht nur Elementknoten, sondern auch Textknoten, Anmerkungen Knoten, Attributknoten usw., der Typ der Knoten kann mithilfe von nodeType unterschieden werden.
Im HTML-Quellcode wird Text innerhalb und zwischen Tags (einschließlich Leerzeichen) als Textknoten erstellt.
[Problembeschreibung]
Beim Erstellen des DOM-Baums ignoriert IE einige Leerzeichen, sodass weniger Textknoten erstellt werden als bei anderen Browsern. Andererseits erstellen andere Browser für dasselbe Dokument mehr Textknoten als der IE.
【Auswirkungen】
Skripte, die von Benutzern für IE entwickelt wurden und die Methoden nodeList, firstChild, lastChild, previousSibling oder nextSibling des Knotenobjekts verwenden, funktionieren aufgrund dieses Problems möglicherweise nicht in anderen Browsern denselben Zweck erreichen, beispielsweise ein Skriptausführungsfehler oder eine Operation am falschen Zielobjekt.
[Lösung]
1. Versuchen Sie, die Leerzeichen zwischen den Tags zu entfernen, wenn sie nicht erforderlich sind.
Da Seitenskripte meist auf „Elementknoten“ arbeiten, müssen Sie nur sicherstellen, dass zwischen den Elementen keine Textknoten vorhanden sind (d. h. es gibt keine Leerzeichen zwischen den Tags im Quellcode – einschließlich Leerzeichen und Zeilen). Pausen, Tab), um dafür zu sorgen, dass sich die oben genannten Eigenschaften in allen Browsern konsistent verhalten.
Darüber hinaus sind Elemente, die mithilfe von Skripten erstellt und nacheinander hinzugefügt werden, eng miteinander verbunden. Es gibt keine Textknoten zwischen Elementen, sodass in diesem Fall kein Grund zur Sorge über die oben genannten Kompatibilitätsprobleme besteht, wie zum Beispiel:
2. Treffen Sie beim Erwerb von Knoten eine Typbeurteilung.
Wenn es keine Garantie dafür gibt, dass zwischen Elementen keine Textknoten vorhanden sind, müssen Sie der Operation an den Knoten eine Typbeurteilung hinzufügen.
Darüber hinaus können Sie in Nicht-IE auch previousElementSibling und nextElementSibling verwenden, um den Elementknoten abzurufen. Beispiel: Verwenden Sie Element.nextElementSibling, um den nächsten Elementknoten neben dem Element Element abzurufen.
3. Unterschiede in den Onscroll-Ereignissen von document-, document.body- und document.documentElement-Objekten
[Standardreferenz]
Das Scroll-Ereignis wird ausgelöst, wenn das Dokument bzw ein Element wird gescrollt.
[Problembeschreibung]
Es gibt Unterschiede in der Unterstützung von Onscroll-Ereignissen von document-, document.body- und document.documentElement-Objekten zwischen verschiedenen Browsern
Alle Browser unterstützen Fenster und normal Das Scroll-Ereignis des DIV-Objekts;
In IE und Opera unterstützen die Objekte document und document.body das Scroll-Ereignis. Wird in anderen Browsern nicht unterstützt.
Im IE unterstützt das document.documentElement-Objekt das Scroll-Ereignis. Wird in anderen Browsern nicht unterstützt.
【Auswirkungen】
Nachdem das Onscroll-Ereignis an die Objekte document, document.body und document.documentElement gebunden wurde, wird der entsprechende Ereignishandler in verschiedenen Browsern möglicherweise nicht wie erwartet ausgelöst.
[Lösung]
Wenn Sie das Scroll-Ereignis (Scrollen) an das gesamte Browserfenster binden, binden Sie es an das Fensterobjekt.
4. Nur die createElement-Methode im IE unterstützt die Übergabe von HTML-String als Parameter
[Standardreferenz]
Gemäß der Beschreibung in der W3C DOM Level2 Core-Spezifikation unter Die Document-Schnittstelle Die Methode createElement erstellt eine Elementknotenobjektinstanz. Es kann ein Zeichenfolgenparameter tagName übergeben werden. In HTML kann dieser Parameter eine beliebige Form haben und muss einer kompatiblen Großbuchstabenform zugeordnet werden, die vom DOM implementiert werden kann. Das heißt, tagName sollte ein zulässiger Tag-Name sein. Wenn in tagName unzulässige Zeichen vorkommen, sollte eine INVALID_CHARACTER_ERR-Ausnahme ausgelöst werden.
[Problembeschreibung]
In IE6 IE7 IE8 kann die Methode createElement nicht nur Knotenobjekte über zulässige Tag-Namen erstellen, sondern sie auch durch Übergabe einer zulässigen HTML-Codezeichenfolge als Parameter erstellen Knotenobjekt.
【Auswirkung verursachen】
Wenn Sie die einzigartige Methode des IE zum Erstellen eines Knotenobjekts verwenden, indem Sie eine zulässige HTML-Codezeichenfolge als Parameter an createElement übergeben, wird in anderen Browsern eine Ausnahme ausgelöst und nachfolgender Code wird nicht ausgeführt.
[Lösung]
Verwenden Sie für allgemeine nicht ersetzbare Elemente die Standardmethode der Übergabe des Tag-Namens an die createElement-Methode in jedem Browser gemäß der W3C-Spezifikation.
Bei einigen IE-Verarbeitungsproblemen mit ersetzten Elementen achten Sie auf den Browser. Verwenden Sie für IE seine einzigartige Methode zur Übergabe einer zulässigen HTML-Codezeichenfolge als Parameter an createElement. Nicht-IE-Browser verwenden weiterhin die Standardmethode der W3C-Spezifikation, zum Beispiel:
Inkompatibler Code, nur von IE unterstützt:
Var iframe = document.createElement('
