Heim > Artikel > Web-Frontend > Eine detaillierte Erklärung der Javascript-Klassenauswahlmethoden
Eine detaillierte Erklärung der Javascript-Klassenauswahlmethoden
- 藏色散人nach vorne
- 2022-08-06 14:36:184556Durchsuche
Dieser Artikel stellt Ihnen die Javascript-Klassenauswahlmethode vor. Ich hoffe, dass er Freunden in Not hilfreich sein wird!
Javascript-Klassenauswahlmethode
Als Ökosystem und Plattform stellt der Browser eine Reihe von Funktionsmethoden bereit, die von Programmiersprachen aufgerufen und gesteuert werden können. Für den Browser ist es selbstverständlich, die integrierten Funktionen des Browsers aufzurufen Methoden über die Javascript-Sprache. Für das Betriebssystem können die meisten Sprachen seine API aufrufen.
CSS kann über ID-Selektoren oder Klassenselektoren Stile zu HTML-Elementen hinzufügen. Die Browserplattform bietet wie CSS auch ID-Selektoren und Klassenselektormethoden, die von der Javascript-Sprache aufgerufen werden können. Die zuvor verwendete Methode ist getElementById(). Die in diesem Artikel erläuterte Klassenauswahlmethode ist getElementsByClassName(). Sie können anhand ihrer Namen sehen, was sie ausdrücken möchten werden nicht aus einer Laune heraus benannt. Sie versuchen, den Namen beizubehalten, wie der Name schon sagt. getElementById()， 本文要讲解的类选择器方法是getElementsByClassName()，通过名字你都可以看出他们要表达的意思，标准委员会制定这些标准也不是心血来潮随意命名，都尽量做到顾其名思其义，当然这是针对英语语言的顾名思义。
ID的特点是选择一个，class的点特点批量选择，比如通过Javascript动态地给一些元素批量添加样式属性，就主要用到getElementsByClassName()方法。【相关推荐：JavaScript视频教程】
案例
在一个已经写好的HTML和css的文件基础上添加Javascript代码，实现用户可以在网页上批量自定义元素的样式。
48 <body style="background-color: #777777">
49 <!--自定义颜色功能按钮-->
50 <button style="background-color: #00aaff" id="button1" onclick="fun1()"></button>
51 <button style="background-color: #1abc9c" id="button2" onclick="fun2()"></button>
52 <!--Web应用界面命令-->
53 <div class="command">
54 <!--注释空格-->
55 <div class="bottom padding radius left-radius div">圆弧</div><!--
56 --><div class="bottom padding div">直线</div><!--
57 --><div class="bottom padding div">矩形</div><!--
58 --><div class="bottom padding div">曲线</div><!--
59 --><div class="padding right-radius div">倒角</div>
60 </div>
61 <script>
62 // 批量选中类属性名为div的所有元素，返回所有元素对象组成的数组
63 let arr = document.getElementsByClassName("div");
64 // 定义两个更改颜色的函数fun1和fun2
65 function fun1() {
66 // 遍历所有元素对象
67 for(let i = 0; i<arr.length;i++){
68 // 更改背景颜色
69 arr[i].style.backgroundColor="#00aaff";
70 }
71 }
72 function fun2() {
73 for(let i = 0; i<arr.length;i++){
74 arr[i].style.backgroundColor="#1abc9c";
75 }
76 }
77 </script>
78 </body>代码解析
第53行到第60行代码定义的是一系列应用界面的命令按钮，第50和第51行代码定义的是两个具有自定义其它元素样式的功能按钮button，当你单击其中一个功能按钮button时候，会调用 script标签中的函数fun1()或fun2(),比如执行fun1函数后，第53行到第60行代码定义的元素背景元素颜色会批量修改，由灰色变为#00aaff色。
第63行代码通过类选择器方法getElementsByClassName()选中类属性名是“div”的所有元素，getElementById()方法返回的一个对象，也就是元素本身，getElementsByClassName()方法返回 的是所有元素对象组成的数组。这也就是说，如果你想更改一个元素的属性值，通过数组下标的方式访问元素，比如arr[0]表示第55行代码定义的div元素。 如果直接写arr.style.backgroundColor="#00aaff";更改arr全部元素的背景颜色是不合法的，arr是一个数组，它没有.style样式属性，要通过arr[i].style.backgroundColor="#00aaff这样的形式来重置 元素背景颜色。
要更改的元素比较多，而元素要更改的颜色也一致，所以可以通过for循环结构程序来完成，代码第67行到第70行的作用就是遍历数组arr中的所有div元素，然后更改他们的背景颜色。
第65行和第72行分别定义了函数fun1和fun2，可以通过鼠标单击事件调用，fun1的功能是批量把元素的背景颜色更改为#00aaff，fun1的功能是批量把元素的背景颜色更改为#1abc9c。
<strong>getElementsByTagName()</strong>
getElementsByTagName()方法和getElementsByClassName()
getElementsByClassName() verwendet. [Verwandte Empfehlungen: JavaScript-Video-Tutorial] Hülle
in einem Fügen Sie Javascript-Code basierend auf den bereits geschriebenen HTML- und CSS-Dateien hinzu, damit Benutzer die Stile der Elemente auf der Webseite stapelweise anpassen können.rrreeeCode-Analyse
Die Zeilen 53 bis 60 des Codes definieren eine Reihe von Befehlsschaltflächen für die Anwendungsoberfläche. Die Zeilen 50 und 51 des Codes definieren zwei Funktionsschaltflächen mit benutzerdefinierten Stilen für andere Elemente Über die Funktionsschaltflächen wird beispielsweise die Funktion fun1() oder fun2() im Skript-Tag aufgerufen. Nachdem die Funktion fun1 ausgeführt wurde, werden die Hintergrundelementfarben der in den Zeilen 53 bis 60 des Codes definierten Elemente geändert Grau wechselt stapelweise zur Farbe#00aaff. 🎜🎜Die 63. Codezeile wählt alle Elemente aus, deren Klassenattributname „div“ ist, über die Klassenauswahlmethode getElementsByClassName(). Das von der Methode getElementById() zurückgegebene Objekt ist das Element selbst, Die Methode getElementsByClassName() gibt ein Array aller Elementobjekte zurück. Das heißt, wenn Sie den Attributwert eines Elements ändern möchten, greifen Sie über Array-Indizes auf das Element zu. Beispielsweise stellt arr[0] das in Zeile 55 des Codes definierte div-Element dar. Es ist illegal, arr.style.backgroundColor="#00aaff"; zu schreiben, um die Hintergrundfarbe aller Elemente in arr zu ändern. Es ist ein Array und hat kein .style-Attribut muss übergeben werden arr[i].style.backgroundColor="#00aaffDieses Formular setzt die Hintergrundfarbe des Elements zurück. 🎜🎜Es müssen viele Elemente geändert werden und die Farben der Elemente müssen geändert werden Die Änderungen sind auch gleich, sodass Sie die for-Schleifenstruktur verwenden können. Um das Programm zu vervollständigen, besteht die Funktion der Zeilen 67 bis 70 des Codes darin, alle div-Elemente im Array arr zu durchlaufen und dann ihre Hintergrundfarbe zu ändern 🎜🎜 Zeilen 65 und 72 definieren die Funktionen fun1 und fun2, die aufgerufen werden können. Die Funktion von fun1 besteht darin, die Hintergrundfarbe von Elementen stapelweise zu ändern Farbe von Elementen zu #1abc9c in Stapeln Die Methode getElementsByClassName() ist aus Sicht des Datentyps ein Array-Objekt. Der entsprechende Wissenspunkt von CSS ist der Englischer Tag im getElementsByTagName()-Methodennamen bedeutet Tag 🎜🎜🎜Application🎜🎜🎜Ich habe einige Auswahlmöglichkeiten für Elemente und deren jeweilige Eigenschaften kennengelernt. ) In CSS können Sie im Allgemeinen auf Element- und ID-Selektoren zurückgreifen und den Tag-Namen verwenden, um Elemente auszuwählen. und diese Elemente erfordern unterschiedliche Hintergrundfarben. Sie verwenden beispielsweise versehentlich die Methode getElementsByTagName(). Der Vorteil von getElementsByClassName() besteht darin, dass Sie in tatsächlichen Projekten häufig Wert auf die Wiederverwendung von Code legen Es gibt tatsächlich eine Klassifizierung, z. B. eine Website mit einer bestimmten Hintergrundfarbe. Sie müssen lediglich einen Farbklassenstil definieren und diesen Klassennamen dann auf jeder Seite einführen. 🎜🎜🎜Zusammenfassung🎜🎜In diesem Artikel wird nicht nur die Methode getElementsByClassName() erläutert, sondern auch die drei Methoden zum Auswählen von Elementen in Javascript durch Vergleich, die dem Elementselektor, dem ID-Selektor und dem Klassenselektor in CSS entsprechen. Durch Vergleich des CSS-Selektors und des Javascript-Selektors (DOM-Methode), um die Speicherbelastung beim Lernen zu verringern, Technologie aus Systemperspektive zu lernen und einen technischen Standard aus der Perspektive eines Standardkomiteeentwicklers zu verstehen.
Das obige ist der detaillierte Inhalt vonEine detaillierte Erklärung der Javascript-Klassenauswahlmethoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!