Detaillierte Erläuterung, wie JavaScript Elementattribute, Stile und Klassennamen verwaltet

DOM – Document Object Model

Ein vollständiger Satz von Attributen und Methoden für den Betrieb des Dokumentenflusses

• Operationsseiten-Tags (Elemente)
  Hinzufügen, Löschen, Ändern und Überprüfen von Operations-Tags
  Operations-Tag-Attribute (ID, Klasse, Typ, …)
  Manipulieren Sie den Stil von Tags
  …

• Lernen Sie einige Inhalte kennen
  -Dokument: Dokumentfluss, Seite, Stammknoten, aber kein Element (Tag)
  -HTML: das größte Element, das alle Tags trägt, Wurzelelementknoten
  -head: trägt speziell das Beschreibungs-Tag der aktuellen Seite, der Inhalt wird hier im Allgemeinen nicht auf der Seite angezeigt
  -body: trägt speziell das Anzeige-Tag der aktuellen Seite, den Inhalt, der wird tatsächlich auf der Webseite angezeigt

Holen Sie sich das Element

Verwenden Sie eine Variable, um ein oder mehrere Elemente auf der Seite zu speichern
Die Methoden zum Abrufen von Elementen sind in zwei Kategorien unterteilt
1. Holen Sie sich unkonventionelle Elemente

• html: Dokument .documentElement
• head: document.head
• body: document id auf der Seite, dann ist es dieses Element, wenn nicht, ist es null

Gemäß Get elements by class name

Syntax: document.getElementsByClassName('Element class name')
• Rückgabewert:

  muss ein Pseudo sein array
  
  Wenn es auf der Seite Elemente gibt, die dem Klassennamen entsprechen, holen Sie sich so viele wie möglich und fügen Sie sie in das Pseudo-Array ein. Rückgabe

  Wenn auf der Seite kein Element vorhanden ist, das dem Klassennamen entspricht, ist es leer Pseudo-Array

• 
  Elemente basierend auf dem Tag-Namen abrufen
  Syntax: document.getElementsByTagName('Tag-Name') Rückgabewert: Muss ein Pseudo-Array sein
  
  Wenn es Elemente gibt, die dem Tag-Namen auf der Seite entsprechen, Holen Sie sich dann so viele wie vorhanden, fügen Sie sie in ein Pseudo-Array ein und geben Sie sie zurück.

  Wenn auf der Seite keine Elemente vorhanden sind, die dem Tag-Namen entsprechen, handelt es sich um ein leeres Pseudo-Array.

• 
  Holen Sie es entsprechend dem Selektor A label
  Syntax: document.querySelector('selector') Rückgabewert: Wenn auf der Seite ein dem Selektor entsprechendes Element vorhanden ist, wird das erste dem Selektor entsprechende Element zurückgegeben. Wenn kein dem Selektor entsprechendes Element vorhanden ist die Seite, dann ist sie null
  
  

Erhalten Sie einen Satz von Tags basierend auf dem Selektor
• Syntax: document.querySelectorAll('selector')

  Rückgabewert:
  muss ein Pseudo-Array sein
  
  Wenn es Elemente gibt, die dem entsprechen Selektor auf der Seite, wie viele werden erhalten? Wie viel, geben Sie ein Pseudo-Array ein und geben Sie zurück

  Wenn auf der Seite kein Element vorhanden ist, das dem Selektor entspricht, handelt es sich um ein leeres Pseudo-Array

• 
  Manipulierte Elementstile
  
  Es gibt drei Möglichkeiten, Elementstile in JS zu manipulieren
  1. Inline-Stil des Elements abrufen (nur Inline-Stil kann abgerufen werden)

  2. Nicht-Inline-Stil des Elements abrufen (einschließlich Inline und Nicht-Inline)
3. Stil des Elements festlegen (Nur Inline-Stil kann festgelegt werden)

Hinweis: beinhaltet Unterstreichung. Wenn der Stilname

in Kamel-Schreibweise umgewandelt wird

, verwenden Sie die Array-Assoziationssyntax

• 
  , um den Inline-Stil des Elements zu erhalten
  Syntax: element.style.style name
  
  
  

  console.log(ele.style.width)
  console.log(ele.style.height) // 非行内样式
  console.log(ele.style.fontSize)
  console.log(ele.style['font-size'])

  Nach dem Login kopieren
  
  
  ·Erhalten Sie den Nicht-Inline-Stil des Elements.
Syntax: window. getComputedStyle (Element zum Abrufen des Stils).Stilname .style.Stilname = Stilwert

• console.log(window.getComputedStyle(ele).width)
  console.log(window.getComputedStyle(ele).height)
  console.log(window.getComputedStyle(ele).fontSize)
  console.log(window.getComputedStyle(ele)['background-color'])

  Nach dem Login kopieren
  
  Name der Operationselementklasse

Zweck: Stile stapelweise ändern

• 
  Klassenname
Betrieb nativer Attribute

Weil es in JS einen Schlüssel namens Klasse gibt, um eine Umbenennung zu vermeiden Es heißt className

Hinweis: Der Wert des Klassennamens ist eine Zeichenfolge, die Zeichenfolge kann jedoch mehrere enthalten. Jeder Klassenname
• 
  

classList

Jeder Elementknoten hat ein eigenes Attribut namens classList

Es handelt sich um eine ähnliche Datenstruktur zu einer Gruppe, die alle Klassennamen des Elements speichert. Hinzufügung, Löschung, Änderung und Abfrage sind alle Vorgänge auf classList. Geben Sie eine dedizierte API. Hinzufügen: element.classList.add(Klassenname)

Löschen: element.classList. entfernen(Klassenname)

Schalter: element.classList.toggle(Klassenname)

– Löschen, wenn es ursprünglich vorhanden ist, wenn es vorher nicht vorhanden ist. Einfach hinzufügen

• 
  
  Verwandte Empfehlungen: [
  JavaScript-Video-Tutorial

  ]

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung, wie JavaScript Elementattribute, Stile und Klassennamen verwaltet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!