Javascript-DOM-Zusammenfassung

DOM-Zusammenfassung

1. Die Bedeutung von DOM

DOM ist die Abkürzung für Document Object Model. Gemäß der W3C-DOM-Spezifikation ist DOM eine browser-, plattform- und sprachunabhängige Schnittstelle, die Ihnen den Zugriff auf andere Standardkomponenten der Seite ermöglicht.

Knoten im DOM:

* Das gesamte Dokument ist ein Dokumentknoten.

* Und jedes HTML-Tag ist ein Elementknoten (divElement).

* Der Text im Etikett ist ein Textknoten (div).

* Das Attribut des Labels ist der Attributknoten (divAttribute).

* Alles ist ein Knoten

2. Suchen Sie nach Elementen

1. Holen Sie sich ein Tag nach ID,

document.getElementById('id name');

2. Mehrere Tags nach Typname abrufen

var allA = document.getElementsByClassName('a ') ;

3. Erhalten Sie mehrere Tags über das Namensattribut des Tags (ein oder im Formular)

document.getElementsByName('corresponding name');

4. Mehrere Tags nach Tag-Namen abrufen

var allDiv = document.getElementsByTagName('DIV')

5 , eine bestimmte erhalten Tag durch den Selektor (wenn mehrere Tags vorhanden sind, wird das erste gefundene zurückgegeben)

var aDiv = document.querySelector('div');

6 , Mehrere Tags über Selektoren abrufen

document.querySelectorAll('selector name');

3.DOM node-element

1. Den gesamten Text einschließlich Tags abrufen

alert (tag name.outerHTML) wie li

2. Sie können alle Attributinformationen über den Knoten über dir

console.dir (label) sehen Name) wie li

3.for in können Sie alle Eigenschaften und Methoden zum Knoten sehen

4. Rufen Sie den vorherigen oder nächsten ab Elementknoten eines Knotens

alert(li1. previousElementSibling.innerText);

alert(li1.nextElementSibling.innerText);

5.. Rufen Sie den vorherigen oder nächsten Elementknoten eines Knotens ab (möglicherweise einen leeren Textknoten)

alert(li1. previousSibling.nodeName);

alert(li1.nextSibling.nodeName);

6. Holen Sie sich den ersten untergeordneten Knoten in ul

alert(ul.firstChild);

Holen Sie sich das erste untergeordnete Element in ul! ! ! ! Knoten

alert(ul.firstElementChild);

alert(ul.lastElementChild.innerText);

7. Erstellen Sie einen neuen Li-Knoten

var newLi = document.createElement('li');

newLi.innerText = 'JQuery';

newLi.style.color = 'red';

8. Hängen Sie einen untergeordneten Knoten an das Ende von ul

ul.appendChild(newLi);

9. Ersetzen Sie den vorherigen Knoten

ul.replaceChild(newLi,li1);

10. Entfernen Sie einen untergeordneten Knoten (der zu entfernende Knoten muss ein untergeordneter Knoten von ul sein)

ul.removeChild(newLi. previousElementSibling);

11. Einen neuen Knoten in einen bestimmten untergeordneten Knoten einfügen

ul.

12. Fügen Sie ein neues Knotenobjektpositionsknotenobjekt in ul ein

'beforeBegin', 'afterBegin', 'beforeEnd', 'afterEnd'

ul.insertAdjacentElement('afterEnd',newLi);

13. HTML-Code einfügen

ul.insertAdjacentHTML('beforeBegin' ,'

');

14. Text einfügen

ul.insertAdjacentText('afterBegin','After Begin')

4.DOM node- Text

1.for traverse

for (var i = 0; i

Verwenden Sie die Benennung in Groß- und Kleinschreibung Namensvariablen oder Funktionen goShoppingToMall

var aNode = ulChild[i];

Beurteilen Sie, ob der aktuell durchquerte gespeicherte Punkt ein Knotentypelement eines bestimmten Systems ist. ELEMENT-Attribut ATTRIBUTE Text TEXT

if (aNode.nodeType == Node.ELEMENT_NODE) {

Makrodefinition verwendet Zahlen zur Darstellung von Knotentyp 1, Element 2, Attributknoten 3, Textknoten

warning(aNode .nodeType);

warning(aNode.nodeName);

}

}

2.children Holen Sie sich die internen Kinder ! ! ! Element! ! ! Knoten

childNode ruft die internen untergeordneten Knoten (einschließlich Textknoten) ab.

var cssText = ul.children[1].childNodes[0];

ruft den Textknoten Text ab

alert(cssText.nodeValue);

alert(cssText.textContent);

3. Daten anhängen

cssText . appendData('CSS');

a: Ab welchem ​​Zeichen, beginnend bei 0

b: Wie lange sollen die Daten gelöscht werden

cssText.deleteData(3, 1 );

4. Ersetzen Sie einen Zeichenbereich durch einen anderen Zeichenbereich

cssText.replaceData(1,2,'CCCCC');

5. Fügen Sie ein bestimmtes Zeichen an einer bestimmten Position ein (berücksichtigen Sie die Position nach dem Einfügen)

cssText.insertData(2,'A');

5. Entfernen der Text im Textknoten

cssText.remove();

5.DOM node-attributes

1. Alle Attribute

warning(a. attributes.length);

2. Rufen Sie die get-Methode direkt auf dem Elementknoten auf, um

alert(a.getAttribute('title'));

3 zu erhalten Verwenden Sie auch die set-Methode, um den Wert eines Attributs zu ändern.

a.setAttribute('title','Click me');

4 Sie können auch Folgendes eingeben. Möglichkeit, schnell den Wert eines Attributs zu ermitteln

alert(a.title);

a.title = 'Don't click more';

5. Legen Sie die Tastenkombination

Alt-Umschalttaste A fest. Testen Sie im Browser

a.accessKey = 'A';

6. Ist Kann die Bezeichnung festgelegt werden? Bearbeiten

a.contentEditable = 'true';

7. Bestimmen Sie, ob das Element eine Attributwarnung enthält (a.hasAttribute(' title'))

8. Holen Sie sich den Typ des Elements

alert(a.className)

9 Das Ändern des Elementtyps kann dazu führen, dass der vorherige Typ verloren geht

a.className = 'bigSize yellowText';

Das direkte Hinzufügen eines neuen Typs zur Typliste von a hat keine Auswirkungen auf den vorherigen Typ

a.classList.add('border');

Ein Attribut entfernen

a.classList.remove('bigSize');

10. Wechseln Sie, ob ein bestimmter Typ verwendet werden soll

Wenn er vorhanden ist, entfernen Sie ihn. Wenn er nicht vorhanden ist, fügen Sie ihn hinzu

a.classList.toggle('bigSize'. );

11 Der gerade über js festgelegte Stil kann über

abgerufen werden. Der direkt im Attribut geschriebene Stil kann über

abgerufen werden . Der im Stylesheet geschriebene Stil (Style-Tag) kann mit

a.style.padding = '20px';

alert(a.style.padding) abgerufen werden. ;

12. Berechnen Sie anschließend die Stile (einschließlich der in Attributen, Stylesheets und JS-Änderungen)

var aStyle = window.getComputedStyle(a,': after');

alert(aStyle. border);