So verwenden Sie Dom-Attribute

Dieses Mal zeige ich Ihnen, wie Sie das Dom-Attribut verwenden und welche Vorsichtsmaßnahmen bei der Verwendung des Dom-Attributs gelten. Hier ist ein praktischer Fall, schauen wir uns das an.

1. Die drei Kerne von Javascript

1. Grammatikstandard von ECMAScript js

2.DOM Document Objektmodell Das Document Object Model bietet Methoden, mit denen js HTML-Tags

bedienen kann.　3. BOM Browser Object Model Das Browser Object Model bietet Methoden, mit denen js Browser bedienen kann

Hinweis: 1. Der größte Boss in js ist window, document ist nur ein Objekt unter window

1. document.documentElement kann von HTML abgerufen werden

                document(在文档里，document是老大)
                       |
                      html
                      /  \
                     /    \
                    /      \
                   body    head
                   /       / | \
                  /       /  |  \
                 /       /   |   \
               / | \   meta title  style...
              /  |  \
             /   |   \
            p  p   ul...
            /
          /
          a

2. Attribute von DOM

js ---> html

　js betreibt HTML-Tags über DOM

1. childNodes gibt alle untergeordneten Knotenobjekte unter dem aktuellen Objekt zurück und gibt den Textknoten

zurück. Hinweis: Unter ie8 nur Elementknoten

1. nodeType Rückgabeknotentyp, Elementknoten gibt 1 zurück. Textknoten gibt 3 zurück.

   Kommentar Knoten gibt 8 zurück.

2. Kinder Gibt alle untergeordneten Elementknoten unter dem Objekt zurück und es gibt keine Kompatibilitätsprobleme

3. firstChild gibt den ersten untergeordneten Knoten zurück, der sich genauso verhält wie childNodes in IE8

1. lastChild gibt den letzten untergeordneten Knoten wie oben zurück

1. firstElementChild gibt den letzten Elementknoten zurück, nicht kompatibel mit IE8

1. nextSibling Der nächste Geschwisterknoten in Mainstream-Browsern erhält möglicherweise andere Knoten als Elementknoten. Wenn nicht, wird null zurückgegeben 🎜>

previousSibling Der vorherige Geschwisterknoten ist derselbe wie oben
nextElementSibling Wenn es keinen nächsten Geschwisterelementknoten gibt, geben Sie null zurück und er ist nicht kompatibel mit IE678

previousElementSibling PreviousElementSibling Wie oben
2. parentNode *

   Gibt den übergeordneten Knoten ohne Kompatibilität zurück

3. offsetParent

   Gibt das positionierende Elternteil zurück. Wenn keines von beiden gefunden wird, wird es schließlich an den Körper zurückgegeben. Es liegt kein Kompatibilitätsproblem vor.

13.nodeName Gibt den Label-Tag-Namen des Konstruktors zurück

Großbuchstaben

3. Einige Methoden von DOM

createElement('p')

Dies ist das Tag

Um einen neuen Elementknoten zu erstellen, müssen Sie einen Parameter akzeptieren, und der Parameter ist die Bezeichnung, die erstellt werden muss.

CreateTextNode()

Neuen Textknoten erstellen

createComment()

Neuen Kommentarknoten erstellen

Knotenoperation

　Elementknoten hinzufügen

　1. Parent.appendChild(child node)

　Fügen Sie den untergeordneten Knoten zum übergeordneten Knoten hinzu und gehen Sie zu allen untergeordneten Elementknoten des parent

Knoten anhängen

　2. Parent.insertBefore(untergeordneter Knoten, angegebener untergeordneter Knoten)

　An der Vorderseite des angegebenen Knotens hinzufügen

Parent.removeChild (Knoten, der gelöscht werden muss)
　1. Knoten cloneNode klonen

　Knoten klonen, parent.cloneNode() klonen

Die Funktion empfängt einen Parameter, der ein boolescher Wert ist. Der Standardwert ist false, flache Kopie, wahr für tiefe Kopie

Flache Kopie: Kopieren Sie nur das Etikett

Deep Copy: Kopieren Sie die Inline-Informationen einiger Tags, die sich auf dieses Tag-Objekt beziehen, und die benutzerdefinierten Attribute in js werden nicht kopiert.

Dies sind meine Notizen zum DOM-Lernen. Wenn es Ihnen helfen kann, würde ich mich sehr freuen.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

JavaScript-optimiertes DOM

So implementieren Sie die bidirektionale Datenbindung im WeChat-Applet
So verwenden Sie JavaScript-Strings

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Dom-Attribute. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!