Comment modifier les attributs des balises HTML en JavaScript-js tutoriel-php.cn

Comment modifier les attributs en JavaScript : utilisez d'abord getElementById(), getElementsByName() ou getElementsByTagName() pour obtenir l'objet DOM ; puis utilisez "DOM object.Attribute name = value;" pour modifier l'attribut.

Comment modifier les attributs des balises HTML en JavaScript

L'environnement d'exploitation de ce tutoriel : système Windows 7, ECMAScript version 5, ordinateur Dell G3.

Objet HTML DOM

D'un point de vue JavaScript, chaque balise HTML de la page Web est un objet DOM, et les attributs de la balise C'est aussi une propriété de l'objet DOM. Par exemple :

À partir d'un JavaScript perspective Il semble que cette balise soit un objet Image, qui est un type d'objet DOM. Les valeurs de ses attributs id, src, width et border ont été spécifiées et d'autres attributs adoptent des valeurs par défaut.

Vous pouvez utiliser des programmes JavaScript pour accéder aux objets DOM. En fait, vous utilisez des programmes pour accéder à une balise HTML. Vous pouvez modifier les attributs d'un objet DOM par programme, c'est-à-dire utiliser un programme pour modifier les attributs d'une balise HTML afin de rendre la balise contrôlable.

Les attributs de l'objet DOM correspondent généralement aux attributs de la balise HTML correspondante, et les noms sont généralement les mêmes, mais les attributs de l'objet DOM sont sensibles à la casse. Par exemple, l'attribut border peut être utilisé dans des balises telles que ,

, etc., et les objets DOM correspondants tels que en tant qu'objets Image et objets Table, il possède également l'attribut border et la méthode de valeur est la même.

Certains attributs DOM ont des noms différents de ceux des balises HTML, mais il s'agit en réalité du même attribut. Par exemple, l'attribut DOM correspondant à l'attribut class de la balise HTML est className (notez la casse). En effet, la classe est un mot réservé en JavaScript et les noms d'attribut ne peuvent pas avoir le même nom que les mots réservés.

Certains attributs DOM n'ont pas d'attributs HTML correspondants. Par exemple, innerHTML est un attribut DOM, qui représente le contenu contenu dans une balise. Utilisez cet attribut pour modifier le contenu entre la balise d'ouverture et la balise de fermeture d'un code HTML. Mais pour les balises uniques telles que , l'objet Image correspondant n'a pas l'attribut innerHTML.

De plus, l'objet DOM fournit également des méthodes qui peuvent être appelées dans le programme.

En fait, l'objet DOM n'est pas un objet spécifique à JavaScript. Il s'agit d'un objet multiplateforme, et de nombreux langagesfournissent un support pour accéder aux objets DOM. JavaScript n'est que l'un d'entre eux.

Obtention de l'objet

Lorsque vous utilisez JavaScript pour définir ou modifier les attributs d'une balise HTML, la première chose à faire est d'obtenir le objet correspondant à la balise objet DOM. Les méthodes couramment utilisées sont :

1. Utilisez id pour obtenir l'objet DOM :

Si une balise a un attribut id défini, nous pouvons utiliser la valeur id pour y accéder. la balise, et son Le code JavaScript est :

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

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

Copier après la connexion

document est un objet BOM, qui représente le document HTML actuel ; getElementById est une méthode de l'objet Document ; id

est la valeur de l'attribut id d'une balise HTML dans la page Web.

La valeur de retour de document.getElementById( id )

est une donnée de type objet, c'est-à-dire un objet DOM.

2. Utilisez le nom pour obtenir l'objet DOM :

Si une balise a l'attribut name défini, nous pouvons utiliser la valeur du nom pour accéder à la balise. le code est :

document.getElementsByName( name )

Copier après la connexion

Remarque :
Dans une page Web, si l'attribut id est défini pour une balise, la valeur de l'attribut id de chaque balise ne peut pas être la même Si l'attribut name est défini pour la balise, il peut alors y avoir plusieurs balises avec la même valeur d'attribut name dans une page Web.

Donc, la valeur de retour de document.getElementsByName( name )

n'est pas un objet unique, mais un tableau d'objets DOM, qui contient toutes les balises avec la même valeur de nom sur ce page .

3. Utilisez le nom de la balise pour obtenir l'objet DOM :

Nous pouvons utiliser directement le nom de la balise pour accéder à la balise spécifiée, et son code JavaScript est :

document.getElementsByTagName( tagname )

Copier après la connexion

Remarque : La même balise pouvant apparaître plusieurs fois dans une page Web, le retour de document.getElementsByTagName( tagname )

La valeur est également un tableau d'objets DOM qui contient toutes les balises du type spécifié sur cette page. <🎜>

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

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

设置或修改标签的属性

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

DOM对象.属性名 = 值;

Copier après la connexion

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>

Copier après la connexion

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

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

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

在 setBorder() 函数中，利用 document.getElementById( "image1" ) 方法获取标签对应的 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>

Copier après la connexion