So ändern Sie HTML-Tag-Attribute in JavaScript

So ändern Sie Attribute in JavaScript: Verwenden Sie zuerst getElementById(), getElementsByName() oder getElementsByTagName(), um das DOM-Objekt abzurufen;

Die Betriebsumgebung dieses Tutorials: Windows 7-System, ECMAScript Version 5, Dell G3-Computer.

HTML-DOM-Objekt

Aus JavaScript-Sicht ist jedes HTML-Tag auf der Webseite ein DOM-Objekt, und die Attribute des Tags sind auch die Attribute des DOM-Objekts. Zum Beispiel:

173dc41b602843afb86eee56ef8f0692

Aus JavaScript-Sicht ist dies bc83fd52c935971e2f7a62b2e0c2499b, f5d188ed2c074f8b944552db028f98a1 usw. verwendet werden. Die entsprechenden DOM-Objekte wie Bildobjekte und Tabellenobjekte verfügen ebenfalls über Randattribute Wertmethoden sind ebenfalls gleich.

Es gibt einige DOM-Attribute, deren Namen sich von denen von HTML-Tags unterscheiden, aber es handelt sich tatsächlich um dasselbe Attribut. Beispielsweise ist das DOM-Attribut, das dem Attribut class des HTML-Tags entspricht, className (beachten Sie die Groß- und Kleinschreibung). Dies liegt daran, dass „Klasse“ in JavaScript ein reserviertes Wort ist und Attributnamen nicht denselben Namen wie reservierte Wörter haben können.

Es gibt auch einige DOM-Attribute, die keine entsprechenden HTML-Attribute haben. Beispielsweise ist innerHTML ein DOM-Attribut, das den in einem Tag enthaltenen Inhalt darstellt. Verwenden Sie dieses Attribut, um den Inhalt zwischen dem öffnenden Tag und dem schließenden Tag eines HTML-Codes zu ändern. Aber für ein einzelnes Tag wie a1f02c36ba31691bcfe87b2722de723b hat das entsprechende Image-Objekt kein innerHTML-Attribut.

Darüber hinaus stellt das DOM-Objekt auch Methoden zur Verfügung, die im Programm aufgerufen werden können.

Tatsächlich ist das DOM-Objekt kein JavaScript-spezifisches Objekt, sondern ein plattformübergreifendes Objekt, und viele Sprachen bieten Unterstützung für den Zugriff auf DOM-Objekte. JavaScript ist nur eines davon.

Abrufen des Objekts

Wenn Sie JavaScript zum Festlegen oder Ändern der Attribute eines HTML-Tags verwenden, müssen Sie zunächst das dem Tag entsprechende DOM-Objekt abrufen. Häufig verwendete Methoden sind:

1. Verwenden Sie die ID, um das DOM-Objekt abzurufen:

Wenn ein Tag das ID-Attribut festlegt, können wir den ID-Wert verwenden, um auf das Tag zuzugreifen:

<code><span class="c2"></span>

<code>document.getElementById( id )<br/></code>

document ist ein BOM-Objekt, das das aktuelle HTML-Dokument darstellt; getElementById ist eine Methode des Document-Objekts; id

ist der ID-Attributwert eines HTML-Tags im Web Seite. Der Rückgabewert von

document.getElementById( id )

sind Objektdaten, also ein DOM-Objekt.

2. Verwenden Sie den Namen, um das DOM-Objekt abzurufen:

Wenn für ein Tag das Namensattribut festgelegt ist, können wir den Namenswert verwenden, um auf das Tag zuzugreifen:

document.getElementsByName( name )

Beschreibung:
Wenn auf einer Webseite das ID-Attribut für ein Tag festgelegt ist, kann der ID-Attributwert jedes Tags nicht gleich sein. Wenn das Namensattribut für das Tag festgelegt ist, kann es in einem Tag mehrere Tags mit demselben Namensattributwert geben Webseite.

Der Rückgabewert von document.getElementsByName( name )

ist also kein einzelnes Objekt, sondern ein Array von DOM-Objekten, das alle Tags mit demselben Namenswert auf dieser Seite enthält.

3. Rufen Sie das DOM-Objekt mithilfe des Tag-Namens ab:

Wir können mithilfe des Tag-Namens direkt auf das angegebene Tag zugreifen:

document.getElementsByTagName( tagname )

Erläuterung: Denn auf einer Webseite , das gleiche A-Tag kann mehrmals vorkommen, daher ist der Rückgabewert von document.getElementsByTagName( tagname )

auch ein Array von DOM-Objekten, das alle Tags des angegebenen Typs auf dieser Seite enthält. 🎜

比如：document.getElementsByTagName( "img" ) 返回的是一个 Image 对象数组，每个元素对应于网页中的一个a1f02c36ba31691bcfe87b2722de723b 标签，数组中的元素按 a1f02c36ba31691bcfe87b2722de723b 标签出现的顺序排列。

比较以上三种方法，document.getElementById( id ) 是最好的也是最快的方法，它可以直接访问到网页中一个指定的 HTML 标签，这也是我们今后最常使用的方法。

设置或修改标签的属性

获取了一个 DOM 对象之后，我们可以为该对象的属性进行赋值，从而修改了它所对应标签的属性值。一般方法是：

DOM对象.属性名 = 值;

DOM 对象的属性名通常和HTML标签的属性名相同，但它要区分大小写，所以在书写时要特别注意。

例1：

<img id="image1" src="./image/2.jpg" border="0" /> 
 <button οnclick="setBorder(0)">border="0"</button> 
 <button οnclick="setBorder(1)">border="1"</button> 
 <button οnclick="setBorder(3)">border="3"</button> 
 <button οnclick="setBorder(8)">border="8"</button> 
 <script type="text/javascript"> 
 function setBorder( n ) 
 { 
     document.getElementById( "image1" ).border = n; 
 } 
 </script>

本例可以通过按钮修改 a1f02c36ba31691bcfe87b2722de723b 标签的 border 属性的值。

首先，为了可以访问这个 a1f02c36ba31691bcfe87b2722de723b 标签，为它定义了 id="image1" 属性。

在按钮中，利用事件句柄 onclick 响应鼠标单击事件，调用 JS 函数 setBorder()。

在 setBorder() 函数中，利用 document.getElementById( "image1" ) 方法获取a1f02c36ba31691bcfe87b2722de723b 标签对应的 Image 对象，并为它的 border 属性设置新值。

例2：

<marquee id="Mar">欢迎光临！</marquee> 
 <p><button οnclick="setDir()">改变方向</button></p> 
 <script type="text/javascript"> 
 var dir = "left"; 
 function setDir() 
 { 
     dir = (dir=="left") ? "right" : "left"; 
     document.getElementById( "Mar" ).direction = dir; 
 } 
 </script>

本例利用按钮修改 ed126914ed1419bab26abf7cf307b7b9 标签的 direction 属性的值。

ed126914ed1419bab26abf7cf307b7b9 标签没有指定 direction 属性时，其默认值为“left”。利用 JS 程序可以修改它的值。

【推荐学习：javascript高级教程】

Das obige ist der detaillierte Inhalt vonSo ändern Sie HTML-Tag-Attribute in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!