Detaillierte Erläuterung der HTML-Elementoperationen anhand von JavaScript-Beispielen

Dieser Artikel vermittelt Ihnen relevantes Wissen über Javascript, in dem hauptsächlich Fragen im Zusammenhang mit der Bedienung von HTML-Elementen vorgestellt werden, einschließlich der Frage, wie die bedienten Elemente abgerufen werden, dem Inhalt der bedienten Elemente, den Attributen und Stilen der Elemente usw. Ich hoffe, es hilft allen.

Verwandte Empfehlungen: Javascript-Tutorial

1. Holen Sie sich die Elemente der Operation

Methoden und Eigenschaften des Dokumentobjekts

Das Dokumentobjekt bietet einige Methoden zum Suchen von Elementen. Diese Methoden können verwendet werden um Elemente basierend auf den Elementen zu finden. Die Attribute id, name und class sowie der Tag-Name werden verwendet, um das Element der Operation zu erhalten.

Zusammenfassung

Mit Ausnahme der Methode document.getElementById(), die das Element mit der angegebenen ID zurückgibt, geben die anderen Methoden eine Sammlung zurück, die die Anforderungen erfüllt. Um eines der Objekte zu erhalten, können Sie es durch Subskription erhalten, die standardmäßig bei 0 beginnt.

Das Dokumentobjekt stellt einige Eigenschaften bereit, die zum Abrufen von Elementen im Dokument verwendet werden können. Rufen Sie beispielsweise alle Formular-Tags, Bild-Tags usw. ab.

• Das Body-Attribut des Dokumentobjekts wird verwendet, um das Body-Element zurückzugeben.
• Die documentElement-Eigenschaft des Dokumentobjekts wird verwendet, um das Stammknoten-HTML-Element des HTML-Dokuments zurückzugeben.

Hinweis

Die durch die Methoden des Dokumentobjekts erhaltenen Operationselemente und die Eigenschaften des Dokumentobjekts repräsentieren dasselbe Objekt. Beispielsweise ist document.getElementsByTagName(‘body’)[0] identisch mit document.body.

Neue Dokumentobjektmethoden in HTML5

Um das Abrufen von Elementen für den Betrieb zu erleichtern, werden in HTML5 dem Dokumentobjekt zwei neue Methoden hinzugefügt, nämlich querySelector() und querySelectorAll(). Die Methode

• querySelector() wird verwendet, um einen Verweis auf das erste Objekt im Dokument zurückzugeben, das mit dem angegebenen Element oder CSS-Selektor übereinstimmt. Die Methode
• querySelectorAll() wird verwendet, um eine Sammlung von Objekten im Dokument zurückzugeben, die dem angegebenen Element oder CSS-Selektor entsprechen.

Da diese beiden Methoden auf die gleiche Weise verwendet werden, wird im Folgenden die Methode document.querySelector() als Beispiel verwendet.

Methoden und Eigenschaften des Elementobjekts

Bei DOM-Operationen stellt das Elementobjekt auch Methoden zum Abrufen bestimmter Elemente innerhalb eines Elements bereit. Die beiden häufig verwendeten Methoden sind getElementsByClassName() und getElementsByTagName(). Sie werden genauso verwendet wie die gleichnamigen Methoden im Dokumentobjekt.

Darüber hinaus stellt das Elementobjekt auch das Kinderattribut bereit, um die untergeordneten Elemente des angegebenen Elements abzurufen. Rufen Sie beispielsweise die untergeordneten Elemente von ul im obigen Beispiel ab.

• Das Children-Attribut des Elementobjekts gibt auch eine Sammlung von Objekten zurück. Wenn Sie eines der Objekte erhalten möchten, müssen Sie es auch durch Subskription abrufen.
• Darüber hinaus verfügt das Dokumentobjekt auch über das Attribut „Children“, und sein erstes untergeordnetes Element ist normalerweise ein HTML-Element.

HTMLCollection-Objekt

• HTMLCollection-Objekt: Der Satz von Objekten, die durch Aufrufen der Methode getElementsByClassName(), der Methode getElementsByTagName(), des untergeordneten Attributs usw. über das Dokumentobjekt oder Elementobjekt zurückgegeben werden.
• NodeList-Objekt: Wenn das Dokumentobjekt die Methode getElementsByName() aufruft, wird das NodeList-Objekt in Chrome- und Firefox-Browsern und das HTMLCollection-Objekt in IE11 zurückgegeben.

Der Unterschied zwischen HTMLCollection- und NodeList-Objekten:

• HTMLCollection-Objekt wird für Elementoperationen verwendet.
• NodeList-Objekt wird für Knotenoperationen verwendet.

Tipps: Für die Sammlung, die von der Methode getElementsByClassName(), der Methode getElementsByTagName() und dem untergeordneten Attribut zurückgegeben wird, können ID und Name automatisch in ein Attribut umgewandelt werden.

2. Elementinhalt

Wenn Sie in JavaScript den erhaltenen Elementinhalt bearbeiten möchten, können Sie die vom DOM bereitgestellten Attribute und Methoden verwenden.

• Eigenschaften gehören zum Elementobjekt und Methoden gehören zum Dokumentobjekt.
• innerHTML behält bei Verwendung das geschriebene Format und den Tag-Stil bei.
• innerText ist reiner Textinhalt, bei dem alle Formatierungen und Tags entfernt wurden.
• Das textContent-Attribut behält das Textformat nach dem Entfernen des Tags bei.

Zum Beispiel

Code-Implementierung

	nbsp;html>
	
	
	<meta>
	<title>元素内容操作</title>
	
	
	<p>
	The first paragraph...
	</p><p>
	The second paragraph...
	<a>third</a>
	</p>
	
	<script>
	var box = document.getElementById(&#39;box&#39;);
	console.log(box.innerHTML);
	console.log(box.innerText);
	console.log(box.textContent);
	</script>
	
	

Hinweis

Das innerText-Attribut kann bei Verwendung Browserkompatibilitätsprobleme verursachen. Daher wird empfohlen, bei der Entwicklung möglichst viel innerHTML zu verwenden, um den Textinhalt von Elementen abzurufen oder festzulegen. Gleichzeitig gibt es bestimmte Unterschiede zwischen dem innerHTML-Attribut und der document.write()-Methode beim Festlegen des Inhalts. Ersteres wirkt auf das angegebene Element, während letzteres die gesamte HTML-Dokumentseite rekonstruiert. Daher sollten Leser während der Entwicklung die geeignete Implementierungsmethode gemäß den tatsächlichen Anforderungen auswählen.

[Fall] ​​Ändern Sie die Boxgröße .

② Schließen Sie die Änderung der Boxgröße entsprechend der Anzahl der Benutzerklicks ab.

③ Wenn die Anzahl der Klicks eine ungerade Zahl ist, wird das Feld größer, und wenn die Anzahl der Klicks eine gerade Zahl ist, wird das Feld kleiner.

Code-Implementierung

	nbsp;html>
	
	
	<meta>
	<style>
	.box{width:50px;height:50px;background:#eee;margin:0 auto;}
	</style>
	
	
	<p></p>
	<script>
	var box = document.getElementById(&#39;box&#39;);
	var i = 0; // 保存用户单击盒子的次数
	box.onclick = function() { // 处理盒子的单击事件
	++i;
	if (i % 2) { // 单击次数为奇数，变大
	this.style.width = &#39;200px&#39;;
	this.style.height = &#39;200px&#39;;
	this.innerHTML = &#39;大&#39;;
	} else { // 单击次数为偶数，变小
	this.style.width = &#39;50px&#39;;
	this.style.height = &#39;50px&#39;;
	this.innerHTML = &#39;小&#39;;
	}
	};
	</script>
	
	

3. Elementattribute

Um JavaScript das Abrufen, Ändern und Durchlaufen der relevanten Attribute des angegebenen HTML-Elements zu erleichtern, werden Betriebsattribute und -methoden bereitgestellt.

Verwenden Sie das Attribute-Attribut, um alle Attribute eines HTML-Elements sowie die Länge aller Attribute abzurufen.

Zum Beispiel

Code-Implementierung

	nbsp;html>
	
	
	<meta>
	<title>元素属性操作</title>
	<style>
	.gray{background: #CCC;}
	#thick{font-weight: bolder;}
	</style>
	
	
	<p>test word.</p>
	<script>
	// 获取p元素
	var ele = document.getElementsByTagName(&#39;p&#39;)[0];
	// ① 输出当前ele的属性个数
	console.log(&#39;未操作前属性个数：&#39; + ele.attributes.length);
	// ② 为ele添加属性，并查看属性个数
	ele.setAttribute(&#39;align&#39;, &#39;center&#39;);
	ele.setAttribute(&#39;title&#39;, &#39;测试文字&#39;);
	ele.setAttribute(&#39;class&#39;, &#39;gray&#39;);
	ele.setAttribute(&#39;id&#39;, &#39;thick&#39;);
	ele.setAttribute(&#39;style&#39;, &#39;font-size:24px;border:1px solid green;&#39;);
	console.log(&#39;添加属性后的属性个数：&#39; + ele.attributes.length);
	// ③ 获取ele的style属性值
	console.log(&#39;获取style属性值：&#39; + ele.getAttribute(&#39;style&#39;));
	// ④ 删除ele的style属性，并查看剩余属性情况
	ele.removeAttribute(&#39;style&#39;);
	console.log(&#39;查看所有属性：&#39;);
	for (var i = 0; i < ele.attributes.length; ++i) {
	console.log(ele.attributes[i]);
	}
	</script>
	
	

Vier. Elementstil

Überprüfung: Ändern Sie den Stil durch die Operation von Elementattributen.

Syntax des Elementstils: style.Attribute name.

Anforderung: Der horizontale Bindestrich „-“ im CSS-Stilnamen muss entfernt werden und der zweite englische Anfangsbuchstabe muss großgeschrieben werden. Beispiel: Um die Hintergrundfarbe der Hintergrundfarbe festzulegen, muss sie in der Stilattributoperation in „backgroundColor“ geändert werden.

Hinweis

Der Float-Stil in CSS steht in Konflikt mit den reservierten Wörtern von JavaScript und verschiedene Browser

haben Unterschiede in der Lösung. Beispielsweise können IE9-11, Chrome und FireFox „float“ und „cssFloat“ verwenden, Safari-Browser verwendet „float“ und IE6~8 verwenden „styleFloat“.

Frage: Ein Element kann mehrere Klassenselektoren haben. Wie wird die Selektorliste während der Entwicklung bedient?

Ursprüngliche Lösung: Verwenden Sie das className-Attribut des Elementobjekts, um das Ergebnis zu erhalten. Das erhaltene Ergebnis ist ein Zeichentyp und verarbeitet die Zeichenfolge dann entsprechend der tatsächlichen Situation. Die von HTML5 bereitgestellte Methode: die Klassenauswahlliste des neuen classList-Elements (schreibgeschützt).

Beispiel: Wenn der Klassenwert eines p-Elements „Box-Header-Navigationslistentitel“ ist, wie lösche ich den Header?

HTML5-Lösung: p element object.classList.toggle("header");

Zum Beispiel

Code-Implementierung

	nbsp;html>
	
	
	<meta>
	<title>classList的使用</title>
	<style>
	.bg{background:#ccc;}
	.strong{font-size:24px;color:red;}
	.smooth{height:30px;width:120px;border-radius:10px;}
	</style>
	
	
	

• PHP
• JavaScript
• C++
• Java

<script> // 获取第2个li元素 var ele = document.getElementsByTagName(&#39;li&#39;)[1]; // 若li元素中没有strong类，则添加 if (!ele.classList.contains(&#39;strong&#39;)) { ele.classList.add(&#39;strong&#39;); } // 若li元素中没有smooth类，则添加；若有删除 ele.classList.toggle(&#39;smooth&#39;); console.log(&#39;添加与切换样式后：&#39;); console.log(ele); </script> <script> ele.classList.remove(&#39;bg&#39;); console.log(&#39;删除后：&#39;); console.log(ele); </script> Darüber hinaus bietet das classList-Attribut auch viele Methoden und Eigenschaften für andere damit verbundene Tätigkeiten. 5. [Fall] Effekt zum Wechseln der Tab-Leiste bar, wobei „class equal current“ die aktuell angezeigte Beschriftung darstellt, die standardmäßig die erste Beschriftung ist.

② Holen Sie sich alle Tags und den den Tags entsprechenden Anzeigeinhalt.

③ Durchlaufen und fügen Sie für jedes Etikett ein Maus-Rollover-Ereignis hinzu. Durchlaufen Sie im Ereignishandler den gesamten Anzeigeinhalt, der dem Etikett entspricht, und fügen Sie Strom über die Methode add() von classList hinzu. Andernfalls entfernen Sie den Strom über die Methode „remove()“.

Code-Implementierung

	nbsp;html>
	
	
	<meta>
	<title>标签栏切换效果</title>
	<style>
	.tab-box{width:383px;margin:10px;border:1px solid #ccc;border-top:2px solid #206F96;}
	.tab-head{height:31px;}
	.tab-head-p{width:95px;height:30px;float:left;border-bottom:1px solid #ccc;border-right:1px solid #ccc;background:#206F96;line-height:30px;text-align:center;cursor:pointer;color:#fff;}
	.tab-head .current{background:#fff;border-bottom:1px solid #fff;color:#000;}
	.tab-head-r{border-right:0;}
	.tab-body-p{display:none;margin:20px 10px;}
	.tab-body .current{display:block;}
	</style>
	
	
	<p>
	</p><p>
	</p><p>标签一</p>
	<p>标签二</p>
	<p>标签三</p>
	<p>标签四</p>
	
	<!--jkdjfk?-->
	<p>
	</p><p> 1 </p>
	<p> 2 </p>
	<p> 3 </p>
	<p> 4 </p>
	
	
	<script>
	// 获取标签栏的所有标签元素对象
	var tabs = document.getElementsByClassName(&#39;tab-head-p&#39;);
	// 获取标签栏的所有内容对象
	var ps = document.getElementsByClassName(&#39;tab-body-p&#39;);
	for (var i = 0; i < tabs.length; ++i) { // 遍历标签部分的元素对象
	tabs[i].onmouseover = function() { // 为标签元素对象添加鼠标滑过事件
	for (var i = 0; i < ps.length; ++i) { // 遍历标签栏的内容元素对象
	if (tabs[i] == this) { // 显示当前鼠标滑过的li元素
	ps[i].classList.add(&#39;current&#39;);
	tabs[i].classList.add(&#39;current&#39;);
	} else { // 隐藏其他li元素
	ps[i].classList.remove(&#39;current&#39;);
	tabs[i].classList.remove(&#39;current&#39;);
	}
	}
	};
	}
	</script>
	
	

相关推荐：javascript教程

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der HTML-Elementoperationen anhand von JavaScript-Beispielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!