Die beiden Kernmethoden von SelectorsAPI sind: querySelector() und querySlelctorAll(). In kompatiblen Browsern können sie über Instanzen der Typen Domcument und Element aufgerufen werden.
11.1.1 querySelector()-Methode:
querySelector()-Methode empfängt einen CSS-Selektor und gibt das erste Element zurück, das mit dem Selektor übereinstimmt. Wenn es keine Übereinstimmung gibt, gibt sie null zurück.
Durch Aufrufen der querySelector()-Methode über document werden übereinstimmende Elemente innerhalb des Bereichs der Dokumentelemente gefunden.
Elementquery, das die Methode querySelector() aufruft, findet nur übereinstimmende Elemente in den Nachkommenelementen des Elements
11.1.2querySelectorAll()
var body=document.querySelector("body");
var p=body.querySelector(".menu_1")
// var li=p.querySelector("li");
var li=p.querySelectorAll("li");
for(var i=0;i<li.length;i++){
var list={};
list[i]=li[i].innerHTML;
alert(list[i]);
}
Nach dem Login kopieren
11.1.3matchesSelector
Diese Methode empfängt einen Parameter, den CSS-Selektor, und gibt true zurück, wenn die aufgerufene Methode mit dem Element übereinstimmt.
11.2 Element Traversal
Die Element Traversal API fügt DOM-Elementen die folgenden 5 Attribute hinzu.
1: childElementCount: gibt die Anzahl der untergeordneten Elemente zurück
2: firstElementChild: zeigt auf das erste untergeordnete Element, firstChild-Elementversion;
3: lastElementChild: zeigt auf das letztes untergeordnetes Element, lastChild-Elementversion;
4: previousElementSibling: zeigt auf das vorherige Geschwisterelement
5: nextElementSibling: zeigt auf das nächste Geschwisterelement; HTML5
11.3.1 Klassenbezogene Erweiterungen
1: getElementByClassName() Diese Methode empfängt einen Parameter, eine Zeichenfolge mit einem oder mehreren Klassennamen, und gibt eine NodeList mit allen angegebenen Elementen zurück.
Das classList-Attribut ist eine Instanz des neuen Sammlungstyps DOMTokenList. Ähnlich wie bei anderen DOM-Sammlungen. Verfügt über die folgenden Methoden:
add(value): Fügt die angegebene Zeichenfolge zur Liste hinzu.
contains(value): Gibt an, ob der angegebene Wert in der Liste vorhanden ist. Wenn ja, wird true zurückgegeben, andernfalls wird false zurückgegeben.
remove(value) Entfernt die angegebene Zeichenfolge aus der Liste
toggle (Wenn der angegebene Wert in der Liste vorhanden ist, entfernen Sie ihn. Wenn der angegebene Wert nicht vorhanden ist, fügen Sie ihn hinzu.)
An diesem Punkt können Sie die oben beschriebene Methode verwenden, um die darin enthaltenen Parameter zu manipulieren.
<p id="select" class="aa ss dd ff hh "></p>
<script>
var elem = document.getElementById("select");
var classNum =elem.classList;
console.log(classNum);
</script>
Nach dem Login kopieren
11.3.2 Fokusverwaltung
HTML5 fügt außerdem die Funktion der zusätzlichen DOM-Verwaltung hinzu. Die erste ist die Eigenschaft document.activeElement, die sich immer auf das aktuell fokussierte Element des DOM bezieht. Ruft das Element ab, auf das der aktuelle Benutzer den Fokus hat.
Verwenden. focus()-Methode
11.3.3 Änderungen im HTMLDocument
1: readyState-Attribut
Dieses Attribut hat zwei Werte
1; Laden, Laden Dokument
2: abgeschlossen, das Dokument wurde geladen.
Die geeignetste Art, die Eigenschaft document.readyState zu verwenden, besteht darin, damit einen Indikator dafür zu implementieren, dass das Dokument geladen wurde. Zeigt an, dass das Dokument geladen wurde.
2: Kompatibilitätsmodus:
if(document.readyState=="complete"){
//执行操作
}
Nach dem Login kopieren
Da IE6 begann zu unterscheiden, ob der Modus zum Rendern der Seite Standard oder gemischt ist, fügte IE dem Dokument ein Attribut namens compatMode hinzu, um es dem Entwickler mitzuteilen Die Seite verwendet diesen Rendering-Modus.
hat zwei Rückgabewerte: CSS1compat und BackComapat.
entspricht dem Standardmodus bzw. dem gemischten Modus.
3: Wenn das Head-Attribut
nicht über document.head verwendet werden kann, verwenden Sie document.getElementByTagName();
11.3.4 Zeichensatzattribut
durch document .charSet=""; um das Codierungsformat der Seite zu ändern;
1: innerHTML-Attribut
Im Lesemodus Das innerHTML-Attribut gibt die HTML-Tags des aufrufenden Elements zurück, die allen untergeordneten Knoten entsprechen. Im Schreibmodus erstellt innerHTML einen neuen DOM-Baum basierend auf dem angegebenen Wert.
Sie können dieses Attribut verwenden, um Tags zu bestimmten Tags hinzuzufügen, aber nicht alle Tags werden unterstützt
2: OuterHTML-Attribut
Im Lesemodus gibt OuterHTML das HTML-Tag von zurück Das aufrufende Element und alle seine untergeordneten Knoten erstellen im Schreibmodus einen neuen DOM-Baum basierend auf den angegebenen HTML-Zeichen und ersetzen dann das aufrufende Element vollständig durch diesen DOM-Teilbaum.
Lesemodus: Alle HTML-Tags zurückgeben Schreibmodus: Die entsprechenden DOM-Elemente ersetzen.
var val = elem.outerHTML;
Nach dem Login kopieren
3: insertAdjeacentHTML()-Methode
<p id="select" class="aa ss dd ff hh ">
<p>this is a test Demo</p>
</p>
Nach dem Login kopieren
Die letzte Methode zum Einfügen von Markup.
elem.outerHTML="<p>这是一个测试的demo</p>"
Nach dem Login kopieren
erhält zwei Parameter: die Einfügeposition und den einzufügenden HTML-Text. Das erste Element muss einer der folgenden Werte sein.
1: Vor Beginn ein benachbartes Geschwisterelement vor dem aktuellen Element einfügen.
2: afterbegin, fügen Sie ein neues untergeordnetes Element unter dem aktuellen Element ein oder fügen Sie ein neues Element vor dem ersten Element ein.
3: beforeend, fügen Sie ein neues untergeordnetes Element unter dem aktuellen Element ein ein neues Element nach dem letzten Element
4: Nach dem Ende ein benachbartes Geschwisterelement nach dem Element hinzufügen.
4: Speicher- und Leistungsprobleme;
Die Verwendung der in diesem Abschnitt vorgestellten Methode zum Ersetzen untergeordneter Knoten kann zu Speicherproblemen im Browser führen, aber die Verwendung des innerHTML-Attributs wird uns immer noch viele Probleme bereiten Der Grund dafür ist, dass beim Festlegen von innerHTML oder OuterHTML ein HTML-Parser erstellt wird. Dieser Parser wird auf der Basis von Code auf Browserebene ausgeführt und ist daher viel schneller als js.
11.3.7 scrollIntoView-Methode
Scrollen
11.4.1 Dokumentmodus:
Der Dokumentmodus bestimmt, welche CSS-Ebene Sie verwenden können und welche APIs in js verwendet werden können:
Es gibt insgesamt vier Dokumentmodi:
IE5: Rendern der Seite im Promiscuous-Modus , Die neuen Funktionen in IE8 und höheren Versionen können nicht verwendet werden
IE7: Rendern Sie die Seite im IE7-Standardmodus. Die neuen Funktionen in IE8 und höheren Versionen können nicht verwendet werden
IE8: Rendern Sie die Seite Im IE8-Standard-Modal-Rendering sind alle neuen Funktionen in IE8 verfügbar, sodass Sie die SelectorsAPI, weitere CSS2-Level-Selektoren und einige CSS3-Funktionen verwenden können. Es gibt auch einige HTML5-Funktionen
IE9 – IE9-Standardmodus-Renderingseite. Alle neuen Funktionen sind verfügbar. Zum Beispiel die Funktion von EMACSript5.
11.4.2 Kinderattribut
Es gibt fast keinen Unterschied zwischen dem Kinderattribut und der ChildNodes-Methode.
11.4.3 enthält die Methode :
wird verwendet, um zu bestimmen, ob der Knoten ein Nachkomme eines bestimmten Knotens ist. Sie können die wörtliche Bedeutung im Englischen direkt verstehen, einschließlich.
Parent node.contain (ein bestimmter Knoten): Wenn true zurückgegeben wird, wird er eingebunden, andernfalls wird false zurückgegeben.
Sie können auch CompareDocumentPosition() verwenden, um Dateipositionen zu vergleichen. Dadurch werden einige Masken zurückgegeben, um die Positionsbeziehung zu bestimmen.
Um die Methode include() zu imitieren, sollten Sie auf die Rückgabe achten 16;
11.4.4 Text einfügen:
1: Das innerText-Attribut
bearbeitet alle Werte im Element und fügt die Dokumente zusammen flach bis tief. Der Unterschied zwischen
und innerHTML besteht darin, dass innerHTML alle Element-Tags anzeigt, innerText jedoch nur die gespleißte Zeichenfolge zurückgibt.
zeigt beim Schreiben nur einen untergeordneten Textknoten an.
2: OuterText-Attribut
Es gibt grundsätzlich keinen großen Unterschied zwischen OuterText und InnerText, außer dass der Gültigkeitsbereich um die Knoten erweitert wird. Die Ergebnisse sind beim Lesen von Texten genau die gleichen, beim Schreiben jedoch völlig anders. OuterText ersetzt nicht nur die untergeordneten Elemente des Elements, das es aufruft, sondern das gesamte Element. Es wird empfohlen, es nicht zu verwenden.
11.4.5 Scrollen:
1: scrollIntoviewIfNeeded(alignCenter): Scrollen Sie im Browser nur, wenn das Element nicht im Ansichtsfenster sichtbar ist.
2: scrollByLines(lineCount): Scrollen Sie den Inhalt des Elements auf die angegebene Seitenhöhe. lineCount kann ein positiver oder negativer Wert sein.
3: scrollBypage(pageCount): Scrollen Sie den Inhalt des Elements auf die angegebene Seitenhöhe. Die spezifische Höhe wird durch die Höhe des Elements bestimmt.
Hinweis: scrollIntoView() und scrollIntoviewIfNeeded(alignCenter) funktionieren auf dem Elementcontainer, während scrollByLines(lineCount) und scrollBypage(pageCount) auf dem Element selbst funktionieren.
Kapitel 12: DOM2 und DOM3
12.1.1 Änderungen an XML-Namespaces
Mit XML-Namespaces können Elemente verschiedener XML-Dokumente miteinander vermischt werden, keine Sorge Namenskonflikte: Technisch gesehen unterstützt HTML keine XML-Namespaces, XHTML jedoch XML-Namespaces.
1: Änderungen im Knotentyp
Auf der DOM2-Ebene enthält der Knotentyp die folgenden namespacespezifischen Attribute.
localName: Knotenname ohne Namespace-Präfix.
namespaceURL: Die Namespace-URL ist null.
Präfix: Namespace-Präfix oder null.
2: Änderungen im Dokumenttyp
Der Dokumenttyp auf DOM2-Ebene hat sich ebenfalls geändert, einschließlich der folgenden namespacebezogenen Methoden.
createElementNs(namespaceURI,tagName): Erstellen Sie mit dem angegebenen tagName ein neues Element, das zum Namespace namespaceURI gehört.
createAttributeNS(nameSpaceURI, attributeName) Erstellt unter Verwendung des angegebenen attributeName ein neues Attribut, das zum Namespace nameSpaceURI gehört.
getElementByTagNameNs(namespaceURI, tagName) gibt eine NodeList von tagName-Elementen zurück, die zum Namespace-URI gehören.
3: Änderungen im Elementtyp
Änderungen im Zusammenhang mit Elementen in „DOM Level 2“ betreffen hauptsächlich betriebliche Merkmale. Die neue Methode ist wie folgt.
getAttributeNS (namespaceURI, localName) Ruft das Attribut namens localName ab, das zum Namespace-URI gehört
getAttributeNodeNS (namespaceURI, localName) Ruft den Attributknoten namens localName ab, der zum Namespace-URI gehört
getElementsByTagNameNS(namespaceURI, tagName) gibt die zum Namespace-URI gehörende NodeList zurück
hasAttributeNS(namespaceURI, localName) stellt fest, dass das aktuelle Element ein Attribut mit dem Namen localNaem ist und der Namespace dieses Attributs namespaceURI
< ist 🎜>removeAttributeNS(namespaceURI, localName) löscht das Attribut, das zum Namespace-URI gehört und den Namen localName trägt.setAttributeNS(namespaceURI, qualifizierterName, Wert): legt den Attributwert fest, der zum Namespace-URI gehört und den Namen qualifizierteName trägt auf WertsetAttributeNodeNS (attNode) setzt den Attributknoten, der zum Namespace namespaceURI gehört4: Änderungen im NamedNodeMap-TypDa Attribute durch NamedNodeMap dargestellt werden, sind diese Methoden nur für Feature-Nutzung1: getNamedItemNS(namespaceURI, localName): Holen Sie sich das Element mit dem Namen localName, das zum Namespace-NamespaceURI gehört und den Namen localName trägt2: removeNamedItemNS(namespaceURI, localName): Entfernen Sie das Element, das zum Namespace namespaceURI gehört und den Namen localName trägt. Element mit dem Namen localName 3: setNamedItemNS (Knoten): Knoten hinzufügen, dessen Namespace-Informationen im Voraus angegeben wurden.
Da auf Eigenschaften im Allgemeinen über Elemente zugegriffen wird, werden diese Methoden selten verwendet.
12.1.2 Andere Änderungen
1: Änderungen im documentType-Typ
Drei Attribute hinzugefügt: publicID systemId und internalSubset.
2: Änderungen im Dokumenttyp:
Der Kern von DOM Level 2 ist immer noch Dokument. Das Implementierungsobjekt gibt zwei neue Methoden an: creatDocumentType() und creatDocument()
Ersteres wird zum Erstellen eines neuen DocumentType-Knotens verwendet und akzeptiert drei Parameter: Dokumenttyp, publicID, systemID
Wann Beim Erstellen eines neuen Dokuments müssen Sie die Methode createDocument() verwenden, die außerdem drei Parameter akzeptiert: namesp-aceURI, den Tag-Namen des Dokumentelements und den neuen Dokumenttyp
3: Änderungen im Knotentyp
Fügen Sie einfach die Methode isSupported() hinzu: Wird verwendet, um zu bestimmen, über welche Funktionen der aktuelle Knoten verfügt.
Diese Methode empfängt zwei Parameter: Funktionsname und Funktionsversionsnummer.
12.2 Stil
Es gibt drei Möglichkeiten, Stile in HTML zu definieren: externer , eingebetteter und die Verwendung des Stilattributs zum Ändern im Element-Tag.
12.2.1 Zugriff auf Elementstile
CSS-Eigenschaften; FontFamily
1: DOM-Stilattribute und -Methoden:
"DOM Level 2 Style "Die Spezifikation definiert auch einige Eigenschaften und Methoden für das Stilobjekt. Diese Eigenschaften und Methoden können auch den Stil ändern und gleichzeitig die Stileigenschaften des Elements bereitstellen. Diese Eigenschaften und Methoden sind unten aufgeführt.
cssText: Sie können im Stil auf den CSS-Code zugreifen.
Länge: Die Anzahl der auf Ihr Element angewendeten CSS-Attribute.
parentRule: CSSRule-Objekt, das CSS-Informationen darstellt getPropertyCssValue(propertyName): Gibt ein CssVal-Objekt zurück, das den angegebenen Eigenschaftswert enthält. getPropertyPriority(propertyName): Wenn die Eigenschaft gegeben ist! Wichtige Einstellung, dann zurück! Wichtig, sonst wird eine leere Zeichenfolge zurückgegeben getPropertyValue() gibt den Zeichenfolgenwert der angegebenen Eigenschaft zurück item() gibt den Namen der CSS-Eigenschaft an der angegebenen Position zurück removeProperty (propertyName): Entfernt den angegebenen Stil aus dem Stil setProperty() setzt die angegebene Eigenschaft auf den entsprechenden Wert plus das Prioritätsberechtigungsflag. In der tatsächlichen Entwicklung wird getPropertyValue() häufiger verwendet 2 berechnete Stile getComputedStyle()-Methode. Diese Methode muss zwei Parameter akzeptieren: das Element, um den berechneten Stil zu erhalten, und eine Pseudoelementzeichenfolge. Wenn Sie keine Pseudoelementzeichenfolge benötigen, können Sie null eingeben. Beispiel: Elementstil abrufen 12.2.2 Betriebs-StylesheetCSSStyleSheet erbt von StyleSheet, das als Schnittstelle zum Definieren von Non verwendet werden kann -CSS-Stylesheet. Die von der StyleSheet-Schnittstelle geerbten Eigenschaften lauten wie folgt. disable: Boolescher Wert, der angibt, ob das Stylesheet deaktiviert ist href: Wenn das Stylesheet über eingebunden wird, ist es die URL des Stylesheets, andernfalls ist es so null
Medien: Eine Sammlung aller Medientypen, die vom aktuellen Stylesheet unterstützt werden
ownerNode: ein Zeiger auf den Knoten, der Eigentümer des aktuellen Stylesheets ist
parentStyleSheet: ein Zeiger auf das importierte Stylesheet
title: der Wert des Title-Attributs inownerNode.
Typ: Eine Zeichenfolge, die den Stylesheet-Typ darstellt
cssRules Eine Sammlung von Regeln im CSSRules-Stylesheet
ownerRule: Wenn das Stylesheet über @import importiert wird, ist dies Attribut ist ein Zeiger, der auf die importierte Regel zeigt, andernfalls ist der Wert null
deleteRule(index): Löschen Sie die angegebene Regel
insertRule: (Methode) Fügen Sie die Regelzeichenfolge in die cssRule ein Sammlung
Alle auf das Dokument angewendeten Stile werden durch die document.stylesheets-Sammlung dargestellt
1: CSS-Regeln:
Das CSSStyleSheet-Objekt enthält die folgenden Objekte:
cssText: Gibt den Text zurück, der der gesamten Regel entspricht.
parentRule: Wenn die aktuelle Regel eine Importregel ist, gibt dieses Attribut die Importregel zurück; andernfalls ist es null
parentStyleSheet: Das Stylesheet, zu dem die aktuelle Regel gehört
SelectorText: Gibt die aktuelle Regel zurück. Der Selektortext.
Stil: Ein CSSStyleDeclaration-Objekt, über das Sie das Stylesheet eines bestimmten Stils in der Regel festlegen und abrufen können.
Typ: ein konstanter Wert, der den Regeltyp darstellt.
Die am häufigsten verwendeten Attribute sind cssText, selectorText und Style.
2: Regeln erstellen
DOM-Vorschriften. Um der jetzt gestalteten Tabelle eine neue Regel hinzuzufügen, müssen Sie die Methode insertRule() verwenden. Diese Methode akzeptiert zwei Parameter: Regeltext und eingefügter Index
Um Regeln browserübergreifend einzufügen, können Sie die folgende Funktion verwenden. Diese Funktion akzeptiert vier Werte: das Stylesheet, zu dem die Regel hinzugefügt werden soll, und die gleichen drei Parameter wie addRule(), wie in der Abbildung gezeigt:
3. Entfernen Sie die Regel:
aus dem Stylesheet. Die Methode zum Löschen einer Regel ist deleteRule()
1: offset
Die sichtbare Größe des Elements wird durch seine Höhe und Breite bestimmt, einschließlich aller Abstände und der Größe des Bildlaufleistenrahmens (Anmerkung: Außenränder ausgenommen). Der Versatz des Elements kann durch die folgenden vier Eigenschaften ermittelt werden.
offsetHeight: Die Größe des vom Element eingenommenen Raums in vertikaler Richtung, gemessen in einem Pixel.
offsetWidth: Die Größe des vom Element eingenommenen Raums in horizontaler Richtung, gemessen in Pixel.
offsetLeft: Der Pixelabstand zwischen dem linken Rand des Elements und dem inneren linken Rand des enthaltenden Elements.
offsetTop: Der Abstand zwischen dem äußeren Rand des Elements und dem inneren Rand des Elements.
Die Attribute offsetLeft und offsetTop beziehen sich auf das enthaltende Element, und die Referenz des enthaltenden Elements ist im offsetParent-Attribut vorhanden.
2: Die Größe des Clientbereichs:
Das Box-Modell ist in Ränder (margin), inneren Rand (padding), Rand (border) und Inhaltsbereich (contain) unterteilt.
Der Client-Bereich ähnelt dem enthaltenen Bereich des Box-Modells zwei Attribute, clienWidth und clienHeight
3: Scrollgröße:
Scrollgröße bezieht sich auf die Größe des Elements, das Scrollinhalt enthält
enthält vier Werte:
scrollHeight: Wenn keine Bildlaufleisten vorhanden sind, Die Gesamthöhe des Elementinhalts
scrollWidth: Die Gesamtbreite des Elementinhalts ohne Bildlaufleisten
scrollLeft: Die Anzahl der auf dem verborgenen Pixel linke Seite des Inhaltsbereichs
scrollTop: Die Anzahl der über dem Inhaltsbereich verborgenen Pixel
scrollHeight und scrollWidth werden nur zur Bestimmung der tatsächlichen Größe des Elementinhalts verwendet.
Die Attribute scrollLeft und scrollRgiht können verwendet werden, um den aktuellen Scroll-Status zu bestimmen und die Scroll-Position des Elements festzulegen.
4: Bestimmen Sie die Größe des Elements
Jeder Browser stellt für jedes Element eine getBoundingClientRect()-Methode bereit. Diese Methode gibt ein rechteckiges Objekt zurück, das vier Attribute enthält: links, oben, rechts und unten
12.3 Durchquerung
Das Durchquerungs- und Bereichsmodul auf DOM2-Ebene definiert zwei Typen, die bei der Vervollständigung der sequentiellen Durchquerung der DOM-Struktur helfen: NodeIterator und TreeWalker.
12.3.1 NodeIterator
Der NodeIterator-Typ ist der einfachere der beiden, und Sie können die Methode document.creatNodeIterator() verwenden, um eine neue Instanz davon zu erstellen. Diese Methode empfängt vier Parameter
root: der Knoten im Baum, den Sie als Ausgangspunkt für die Suche verwenden möchten.
whatToshow: Numerischer Code, der angibt, welche Knoten besucht werden sollen.
filter: ist ein NodeFilter-Objekt
entityReferenceExpansion: Boolescher Wert, der angibt, ob die Entitätsreferenz erweitert werden soll.
Durchquerung und Reichweite auf DOM2-Ebene
(1) Durchquerung besteht darin, NodeIterator oder TreeWalker zu verwenden, um eine Tiefendurchquerung von DOM durchzuführen
(2) NodeIterator ist eine einfache Schnittstelle Das erlaubt nur das Vorwärts- und Rückwärtsbewegen in Schritten eines Knotens. Während TreeWalker die gleiche Funktionalität bietet, unterstützt es auch die Bewegung in alle Richtungen der DOM-Struktur, einschließlich übergeordneter Knoten, Geschwisterknoten und untergeordneter Knoten.
(3) Der Bereich ist ein Mittel zum Auswählen eines bestimmten Teils der DOM-Struktur und zum anschließenden Ausführen der entsprechenden Operation.
(4) Verwenden Sie die Bereichsauswahl, um bestimmte Teile des Dokuments zu löschen und dabei die Dokumentstruktur im guten Format zu halten, oder um den entsprechenden Teil des Dokuments zu kopieren.
(5) IE8 und frühere Versionen unterstützen das Modul „DOM2 Level Traversal and Range“ nicht, stellen jedoch ein proprietäres Textbereichsobjekt bereit, mit dem einfache textbasierte Bereichsoperationen ausgeführt werden können. IE9 unterstützt DOM-Traversal vollständig
Kapitel 17: Fehlerbehandlung und Debugging: 17.1.1 IE
IE是唯一一个在浏览器界面窗体中显示JS错误的，发生JS错误时，浏览器左下角会出现一个黄色的图标，旁边显示着Error on page
Das obige ist der detaillierte Inhalt vonDOM-Erweiterung von erweiterten JS-Programmen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
