Während des Lernens stoße ich oft auf Probleme mit Javascript-Dom, daher wird dieser Artikel sie erklären.
Neben dem Dokumentobjekt ist das am häufigsten verwendete Element im DOM das Elementobjekt, das HTML-Elemente darstellt.
Elementobjekte können untergeordnete Knoten vom Typ Elementknoten, Textknoten und Kommentarknoten haben. DOM bietet eine Reihe von Methoden zum Hinzufügen, Löschen, Ändern und Abfragen von Elementen
Element Es gibt mehrere wichtige Attribute
nodeName: Element-Tag-Name und ein ähnlicher tagName
nodeType: Elementtyp
className: Klassennamen-ID: Element-ID untergeordnete Elemente: Liste untergeordneter Elemente (HTMLCollection)
childNodes: untergeordnetes Element Elementliste (NodeList)
firstChild: das erste untergeordnete Element
lastChild: das letzte untergeordnete Element
nextSibling: das nächste Geschwisterelement
previousSibling: das vorherige Geschwisterelement
parentNode , parentElement: übergeordnetes Element Die Methode
Abfrageelement
getElementById
gibt den Elementknoten zurück, der mit dem angegebenen ID-Attribut übereinstimmt. Wenn kein passender Knoten gefunden wird, wird null zurückgegeben. Dies ist auch der schnellste Weg, ein Element abzurufen. Die Methode
var elem = document.getElementById("test");getElementsByClassName()
getElementsByClassName gibt ein Array-ähnliches Objekt (Objekt vom Typ HTMLCollection) zurück, einschließlich aller Elemente, deren Klassennamen die angegebenen Bedingungen erfüllen (der Suchbereich umfasst sich selbst). und Änderungen in den Elementen werden in den zurückgegebenen Ergebnissen in Echtzeit widergespiegelt. Diese Methode kann nicht nur für das Dokumentobjekt, sondern auch für jeden Elementknoten aufgerufen werden. Die Methode
var elements = document.getElementsByClassName(names);//getElementsByClassName方法的参数，可以是多个空格分隔的class名字，返回同时具有这些节点的元素。
document.getElementsByClassName('red test');``` * getElementsByTagName()
getElementsByTagName gibt alle Elemente mit dem angegebenen Tag zurück (der Suchbereich schließt sich selbst ein). Der Rückgabewert ist ein HTMLCollection-Objekt, das heißt, die Suchergebnisse sind eine dynamische Sammlung und Änderungen an allen Elementen werden in Echtzeit in der zurückgegebenen Sammlung widergespiegelt. Diese Methode kann nicht nur für das Dokumentobjekt, sondern auch für jeden Elementknoten aufgerufen werden.
var paras = document.getElementsByTagName("p");
//上面代码返回当前文档的所有p元素节点。注意，getElementsByTagName方法会将参数转为小写后，再进行搜索。```getElementsByName() getElementsByName方法用于选择拥有name属性的HTML元素，比如form、img、frame、embed和object，返回一个NodeList格式的对象，不会实时反映元素的变化。
// Angenommen, es gibt ein Formular
var models = document.getElementsByName("x");var el1 = document.querySelector(".myclass");
var el2 = document.querySelector('#myParent > [ng-click]');
//querySelector方法无法选中CSS伪元素。```querySelectorAll() querySelectorAll方法返回匹配指定的CSS选择器的所有节点，返回的是NodeList类型的对象。NodeList对象不是动态集合，所以元素节点的变化无法实时反映在返回结果中。
elementList = document.querySelectorAll(selectors);//querySelectorAll方法的参数，可以是逗号分隔的多个CSS选择器，返回所有匹配其中一个选择器的元素。var matches = document.querySelectorAll("div.note, div.alert");//上面代码返回class属性是note或alert的div元素。elementFromPoint() elementFromPoint方法返回位于页面指定位置的元素。
var element = document.elementFromPoint(x, y);//上面代码中，elementFromPoint方法的参数x和y，分别是相对于当前窗口左上角的横坐标和纵坐标，单位是CSS像素。
elementFromPoint方法返回位于这个位置的DOM元素，如果该元素不可返回（比如文本框的滚动条），则返回它的父元素（比如文本框）。如果坐标值无意义（比如负值），则返回null。
Element erstellen
createElement() createElement方法用来生成HTML元素节点。
var newDiv = document.createElement("div");//createElement方法的参数为元素的标签名，即元素节点的tagName属性。//如果传入大写的标签名，会被转为小写。如果参数带有尖括号（即<和>）或者是null，会报错。createTextNode() createTextNode方法用来生成文本节点，参数为所要生成的文本节点的内容。
var newDiv = document.createElement("div");var newContent = document.createTextNode("Hello");//上面代码新建一个div节点和一个文本节点
createDocumentFragment()//createDocumentFragment方法生成一个DocumentFragment对象。var docFragment = document.createDocumentFragment();```
Das DocumentFragment-Objekt ist ein DOM-Fragment, das im Speicher vorhanden ist, aber nicht zum aktuellen Dokument gehört. Es wird häufig zum Generieren komplexerer DOM-Strukturen verwendet und fügen Sie sie dann in das aktuelle Dokument ein. Dies hat den Vorteil, dass, da das DocumentFragment nicht zum aktuellen Dokument gehört, Änderungen daran nicht dazu führen, dass die Webseite neu gerendert wird, was eine bessere Leistung bietet als das direkte Ändern des DOM des aktuellen Dokuments.
##Elemente ändern
* appendChild()
Ein Element am Ende des Elements hinzufügen
var newDiv = document.createElement("div");var newContent = document.createTextNode("Hello");newDiv.appendChild(newContent);```
insertBefore()Ein Element vor einem Element einfügen
var newDiv = document.createElement("div");var newContent = document.createTextNode("Hello");newDiv.insertBefore(newContent, newDiv.firstChild);replaceChild()
replaceChild() akzeptiert zwei Parameter: das einzufügende Element und das zu ersetzende Element
newDiv.replaceChild(newElement, oldElement);``` * removeChild()
Element löschen
parentNode.removeChild(childNode);``` cloneNode()
Element klonen, die Methode hat ein boolescher Parameter: Wenn true übergeben wird, wird er tief kopiert, d. h. das Element und seine Unterelemente werden kopiert (IE kopiert auch seine Ereignisse), wenn false, wird nur das Element selbst kopiert
node.cloneNode(true);```##属性操作* getAttribute() //getAttribute()用于获取元素的attribute值node.getAttribute('id');``` createAttribute()
//createAttribute()方法生成一个新的属性对象节点，并返回它。attribute = document.createAttribute(name); createAttribute方法的参数name，是属性的名称。
setAttribute()
//setAttribute()方法用于设置元素属性var node = document.getElementById("div1");
node.setAttribute("my_attrib", "newVal");//等同于var node = document.getElementById("div1");var a = document.createAttribute("my_attrib");
a.value = "newVal";
node.setAttributeNode(a);```
* romoveAttribute()removeAttribute()用于删除元素属性 node.removeAttribute('id'); element.attributes
Natürlich kann das, was die obige Methode tut, auch durch Klassenmanipulation des Array-Attributs element.attributes erreicht werden
####HTMLCollection und NodeList Wir wissen, dass das Element-Objekt ein Element darstellt, also eine Sammlung mehrerer Elemente. Es gibt im Allgemeinen zwei Datentypen. Das NodeList-Objekt stellt eine geordnete Liste von Knoten dar. Es stellt Methoden und Attribute bereit das die Liste durchlaufen kann
Die folgende Methode ruft das HTMLCollection-Objekt ab
document.images //所有img元素
document.links //所有带href属性的a元素和area元素
document.anchors //所有带name属性的a元素
document.forms //所有form元素
document.scripts //所有script元素
document.applets //所有applet元素
document.embeds //所有embed元素
document.plugins //document.与embeds相同
document.getElementById("table").children
document.getElementById("table").tBodies
document.getElementById("table").rows
document.getElementById("row").cells
document.getElementById("Map").areas
document.getElementById("f2").elements //HTMLFormControlsCollection extends HTMLCollection
document.getElementById("s").options //HTMLOptionsCollection extends HTMLCollection```Die folgenden Methoden erhalten NodeList-Objekte
document.getElementsByName("name1")
document.getElementsByClassName("class1")
document.getElementsByTagName("a")
document.querySelectorAll("a")
document.getElementById("table").childNodes
document.styleSheets //StyleSheetList，与NodeList类似```#####HTMLCollection与NodeList有很大部分相似性* 都是类数组对象，都有length属性，可以通过for循环迭代* sind alle schreibgeschützt
* sind alle in Echtzeit, das heißt, Änderungen am Dokument werden sofort auf verwandte Objekte übertragen (es gibt eine Ausnahme, die von document.querySelectorAll zurückgegebene NodeList ist nicht in Echtzeit)
* alle haben item()-Methoden, und Elemente können über item(index) oder item("id")# ####Der Unterschied besteht darin, dass * das HTMLCollection-Objekt über die Methode „namedItem()“ verfügt, Sie können id oder übergeben Name zum Abrufen des Elements
* Die item()-Methode von HTMLCollection und das Abrufen des Elements über das Attribut (document.forms.f1) können ID und Name unterstützen, während das NodeList-Objekt nur ID
Das obige ist der detaillierte Inhalt vonVollständige JavaScript-Zusammenfassung der DOM-Elemente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
