Fassen Sie Wissenspunkte über DOM-Knotenattribute zusammen und teilen Sie sie

Dieser Artikel bringt Ihnen relevantes Wissen über Javascript, das hauptsächlich Probleme im Zusammenhang mit den Eigenschaften von DOM-Knoten vorstellt. Ich hoffe, dass es für alle hilfreich ist .

【Verwandte Empfehlungen: Javascript-Video-Tutorial, Web-Frontend】

Nachdem ich die vorherigen Artikel studiert habe, habe ich ein gewisses Verständnis von DOM. Dies sind jedoch nur einige Grundkenntnisse über DOM. Wenn Sie mehr über DOM erfahren möchten, müssen Sie ein tieferes Verständnis für DOM-Knoten haben. In diesem Abschnitt konzentrieren wir uns auf die Knotenattribute, Beschriftungen und den Inhalt des DOM. Damit wir mehr darüber erfahren können, was sie sind? und ihre häufigsten Eigenschaften.

DOM-Knotenklasse

Die Eigenschaften von DOM-Knoten hängen von ihrer Klasse ab. Beispielsweise entspricht das Tag <a></a> einem Elementknoten und einem Link a verwandte Attribute. Textknoten unterscheiden sich von Elementknoten, verfügen aber auch über dieselben Eigenschaften und Methoden, da alle DOM-Knoten einen DOM-Baum bilden. <a></a>标签对应的是一个元素节点和链接a相关的属性。文本节点与元素节点不一样，但是它们之间也有相同的属性和方法，因为所有的DOM节点会形成一个DOM树。

每个DOM节点属于相应的内置类。

root是DOM树的EventTarget，它是由Node继承的，而其他DOM节点继承它。

下图可以帮助我们更易于理解：

DOM节点的类主要有：

• EventTarget：是root抽象类（Abstract Class）。该类的对象永远不会创建。它作为一个基础，因此所有的DOM节点都支持所谓的事件（Events），稍后会涉及这个

• Node：也是一个抽象类，作为DOM节点的基础。它提供了核心功能：parentNode、nextSibling、childNodes等（它们是getter）。节点类的对象没有被创建。但是，有一些具体的节点类继承了它，比如：文本节点的Text，元素节点的Element以及注释节点的Comment等

• Element：是DOM元素的基本类。它提供了元素级的搜索，比如nextElementSibling、childern、getElementsByTagName、querySelector等。在浏览器中，不仅有HTML，还有XML和SVG文档。元素类是更具体类的一些基础，比如SVGElement、XMLElement和HTMLElement

  Jeder DOM-Knoten gehört zur entsprechenden integrierten Klasse. 🎜🎜root ist der root des DOM-Baums ;">EventTarget, das von Node geerbt wird, und andere DOM-Knoten erben es. 🎜🎜Das Bild unten kann uns helfen, es einfacher zu verstehen: 🎜🎜🎜🎜Die Hauptklassen von DOM-Knoten sind: 🎜

  • 🎜EventTarget 🎜: Es handelt sich um die abstrakte Klasse root. Objekte dieser Klasse werden nie erstellt. Es dient als Basis, sodass alle DOM-Knoten sogenannte Ereignisse (Events) unterstützen, auf die später eingegangen wird🎜

  • 🎜Node🎜: Es handelt sich ebenfalls um eine abstrakte Klasse, die als Basis für DOM-Knoten dient. Es bietet Kernfunktionen: parentNode, nextSibling, childNodes usw. (sie sind Getter). Das Objekt der Knotenklasse wird nicht erstellt. Es gibt jedoch einige spezifische Knotenklassen, die es erben, wie zum Beispiel: Text für Textknoten, Element und der KommentarWait🎜

  • 🎜 Element code>🎜: Es ist die Grundklasse der DOM-Elemente. Es bietet eine Suche auf Elementebene, z. B. <code style="font-family:monospace, monospace;font-size:1em;">nextElementSibling, childern, getElementsByTagName, querySelector usw. Im Browser gibt es nicht nur HTML-, sondern auch XML- und SVG-Dokumente. Elementklassen sind die Grundlage für spezifischere Klassen, wie zum Beispiel SVGElement, XMLElement und HTMLElement🎜

  • HTMLElement: Es handelt sich um die Grundklasse von HTML-Elementen, die von verschiedenen HTML-Elementen geerbt wird Elemente. Zum Beispiel HTMLInputElemnt (entsprechend input-Elementklasse), HTMLBodyElement (entsprechend body element's class) und HTMLAnchorElement (entsprechend die Klasse eines-Elements) usw.HTMLElement：是HTML元素的基本类，它由各种HTML元素继承。比如HTMLInputElemnt（对应input元素的类）、HTMLBodyElement（对应body元素的类）和HTMLAnchorElement（对应a元素的类）等

  对于HTMLElement类，还有很多其它种，比如下图所示的这些。

  

  因此，节点的全部属性和方法都是继承的结果！

  例如，DOM对象中的<input>元素。它属于HTMLElement类中的HTMLInputElement类。它将属性和方法叠加在一起：

  • HTMLInputElement：提供了input指定的属性

  • HTMLElement：它提供常用的HTML元素方法（getter和setter）

  • Element：提供元素通用方法

  • Node：提供公共的DOM节点属性

  • EventTarget：提供对事件的支持（覆盖）

  • 最后它继承了Object的方法（纯对象），比如hasOwnProperty

  如果我们想查DOM节点类名，可以使用对象常用的constructor属性。它引用类构造函数，可以使用constructor.name来获取它的name。比如：

  

  或者使用toString把它串起来，比如：

  

  我们还可以使用instanceof来检查继承关系：

  

  正如我们所看到的，DOM节点是常规的JavaScript对象。他们使用基于原型的类来继承。

  在浏览器中使用console.dir(elem)输出元素也很容易。在控制台可以看到HTMLElement.prototype、Element.prototype

Für das HTMLElement-Klasse. Es gibt viele andere Arten, wie zum Beispiel die unten abgebildeten. 🎜

🎜

Daher sind alle Eigenschaften und Methoden des 🎜-Knotens das Ergebnis der Vererbung! 🎜

Zum Beispiel <input> Element. Es gehört zur Klasse HTMLElement. Es überlagert Eigenschaften und Methoden: 🎜

🎜🎜HTMLInputElement: Stellt Attribute bereit, die durch input🎜🎜🎜🎜HTMLElement: Es stellt häufig verwendete HTML-Elementmethoden bereit ( getter und setter)🎜🎜🎜🎜Element: Stellt allgemeine Methoden für Elemente bereit 🎜🎜🎜🎜Nodecode> : Öffentliche DOM-Knotenattribute bereitstellen🎜🎜🎜🎜EventTarget: Unterstützung für Ereignisse bereitstellen (Überschreiben)🎜🎜 🎜🎜Schließlich Es erbt die Methoden von Object (reine Objekte), wie z. B. hasOwnProperty🎜🎜

Wenn wir prüfen wollen Wenn Sie den Klassennamen des DOM-Knotens angeben, können Sie das häufig verwendete Attribut constructor für Objekte verwenden. Es verweist auf den Klassenkonstruktor, der mit constructor.name , monospace;font-size:1em;"> abgerufen werden kann Name. Zum Beispiel: 🎜

🎜 oder verwenden Sie toString Code >Reihen Sie es aneinander, etwa: 🎜<p style="margin-bottom:10px;color:rgb(64,64,64);"><img style="max-width:90%" src="https://img.php.cn/upload/article/000/000/067/c7d86878f2cee6cd5966afc97cf80585-3.png" alt="Fassen Sie Wissenspunkte über DOM-Knotenattribute zusammen und teilen Sie sie">🎜</p> <p style="margin-bottom :10px;color:rgb(64,64,64);">Wir können auch <code style="font-family:monospace, monospace;font-size:1em;">instanceof verwenden, um die Vererbung zu überprüfen Beziehung: 🎜

🎜Wie wir sehen können, sind DOM-Knoten reguläre JavaScript-Objekte. Sie nutzen prototypbasierte Klassen zur Vererbung. 🎜

Verwendung in Ihrem Browser console.dir(elem)Die Ausgabe von Elementen ist ebenfalls einfach. Sie können in der Konsole HTMLElement.prototype, Element.prototype und so weiter. 🎜

DOM-Knotentyp

Im Abschnitt über Browser und DOM wissen wir, dass der Browser das HTML-Dokument basierend auf dem DOM-Modell in eine Reihe von Knoten zerlegt und dann aus diesen Knoten einen DOM-Baum bildet. Die kleinste Komponenteneinheit im DOM heißt Node (Node). Der DOM-Baum besteht aus 12 Knotentypen.

Knoten im DOM müssen mindestens nodeType, nodeName und nodeValue sind die drei Grundattribute. Die Werte dieser drei Attribute unterscheiden sich je nach Knotentyp. nodeType、nodeName和nodeValue这三个基本属性。节点类型不同，这三个属性的值也会不相同。

• nodeType：该属性返回节点类型的常数值。不同的类型对应不同的常数值，12种类型分别对应1到12的常数值，如下面的表格所示

• nodeName：该属性返回节点的名称

• nodeValue：该属性返回或设置当前节点的值，格式为字符串

nodeType节点类型：

而其中元素节点、文本节点和属性节点是我们操作DOM最常见的几种节点类型。

在JavaScript中，我们可以使用instanceof和其他基于类的测试来查看节点类型，但是有时候nodeType可能更简单。

而nodeType是只能属性，我们不能修改它。

DOM节点标签

前面提到过nodeName将会返回节点名称（返回的是HTML标签，并且是大写的）。也就是说，给定的DOM节点，可以通过nodeName属性读取它的标签名称，比如：

document.body.nodeName 
// => BODY

除了nodeName属性之外，还可以通过tagName属性来读取：

document.body.tagName  
// => BODY

虽然nodeName和tagName

• 🎜nodeType🎜: Dieses Attribut gibt den konstanten Wert des Knotentyps zurück. Verschiedene Typen entsprechen unterschiedlichen konstanten Werten, und die 12 Typen entsprechen 1 bis 12s konstanter Wert, wie in der Tabelle unten gezeigt🎜

• 🎜 < code style="font-family:monospace, monospace;font-size:1em;">nodeName🎜: Dieses Attribut gibt den Namen des Knotens zurück🎜

• 🎜nodeValue🎜: Dieses Attribut gibt den Wert des aktuellen Knotens zurück oder legt ihn fest Format der Zeichenfolge🎜

🎜

🎜

Und unter ihnenElementknoten🎜, Textknoten 🎜undAttributknoten 🎜 sind die häufigsten Knoten Typen, mit denen wir DOM betreiben.
🎜🎜In JavaScript können wir instanceof und andere klassenbasierte Tests zum Suchen verwenden am Knotentyp, aber manchmal kann nodeType einfacher sein. 🎜

🎜🎜Und< code style="max-width:90%">nodeType ist nur eine Eigenschaft und wir können sie nicht ändern. 🎜🎜🎜🎜DOM-Knotenbezeichnung🎜🎜Wie bereits erwähnt, wird nodeName zurückgegeben Knotenname (HTML-Tags werden zurückgegeben und in Großbuchstaben geschrieben). Das heißt, für einen bestimmten DOM-Knoten kann sein Tag-Name über das Attribut nodeName gelesen werden, wie zum Beispiel: 🎜

<body>    
<!-- 主内容 -->    
<div id="main">        
<p>The paragraph element</p>        
<div>The div </div>        
<input type="text" id="name" value="User name" />    
</div>
</body>

let ele = document.getElementById('main')
let eleContent = ele.innerHTML; console.log(typeof eleContent, eleContent)

<body>    
<!-- 主内容 -->    
<div id="main">        
<p>The paragraph element</p>        
<div>The div </div>        
<input type="text" id="name" value="User name" />    
</div>
</body>

let ele = document.getElementById('main')
let eleContent = ele.innerHTML; console.log(typeof eleContent, eleContent)

let eleP = document.querySelector(&#39;p&#39;) eleP.innerHTML = &#39;我是一个段落，新修改的内容：<a href="#">我是一个链接</a>&#39;

let eleP = document.querySelector(&#39;p&#39;) eleP.innerHTML += &#39;我是一个段落，新修改的内容：&#39; eleP.innerHTML += &#39;<a href="#">我是一个链接</a>&#39;

let eleP = document.querySelector('p')
let eleInner = eleP.innerHTML
let eleOuter = eleP.outerHTML console.log('>>> innerHTML >>>', eleInner) console.log('>>> outerHTML >>>', eleOuter)

let eleP = document.querySelector(&#39;p&#39;) eleP.outerHTML = &#39;<div class="new">把整个p元素换成div元素</div>&#39;

let eleP = document.querySelector(&#39;p&#39;) eleP.outerHTML = &#39;<div class="new">把整个p元素换成div元素</div>&#39; console.log(eleP.innerHTML)

let eleP = document.querySelector(&#39;p&#39;) eleP.outerHTML = &#39;<div class="new">把整个p元素换成div元素</div>&#39; console.log('>>>> ', eleP) let newEle = document.querySelector('.new') console.log('>>>> ', newEle)

let mainEle = document.querySelector('#main') console.log('>>>> innerHTML >>>>', mainEle.innerHTML) console.log('>>>> outerHTML >>>>', mainEle.outerHTML) console.log('>>>> textContent >>>>', mainEle.textContent)

let mainEle = document.querySelector(&#39;#main&#39;) let content = "我要新内容，并带有一个标签：<b>Boo,Waa!!!</b>" mainEle.textContent = content mainEle.innerHTML = content mainEle.outerHTML = content

<body>    
Hello JavaScript!!!!    
<!-- 主内容 -->    
<div id="main">        
<p>The paragraph element</p>        
<div>The div </div>        
<input type="text" id="name" value="User name" />    
</div>    
<script>        
console.log(&#39;>>> nodeValue >>>&#39;, document.body.firstChild.nodeValue)        console.log(&#39;>>> data >>>&#39;, document.body.firstChild.data)    
</script>
</body>