Type d'élément de modèle d'objet de document JavaScript-js tutoriel-php.cn

En plus du type Document, le type Element est le type le plus couramment utilisé dans la programmation JavaScript. Le type Element est souvent utilisé pour représenter des éléments HTML ou XML, donnant accès aux noms de balises d'éléments, aux sous-nœuds et aux attributs. Les nœuds d'éléments ont les caractéristiques suivantes :

La valeur de nodeType est 1.

La valeur de nodeName est le nom de balise de l'élément.

La valeur de nodeValue est nulle.

La valeur de parentNode peut être Document ou Element.

Ses nœuds enfants peuvent être Element, Text, Comment, ProcessingInstruction, CDATASection ou EntityReference.

Pour accéder au nom de balise d'un élément, vous pouvez utiliser l'attribut nodeName ou l'attribut tagName. Ces deux attributs renverront la même valeur, comme dans l'exemple suivant :

<div id="myDiv"></div>

Copier après la connexion

. peut être comme suit Obtenez le nom de balise de cet élément comme ceci :

var div = document.getElementById("myDiv");
console.info(div.tagName);                 //输出“DIV”
console.info(div.tagName == div.nodeName); //true

Copier après la connexion

En HTML, les balises sont toujours exprimées en lettres majuscules, donc div.tagName affichera un "DIV" majuscule. En XML (y compris XHTML), le nom de la balise sera cohérent avec la balise dans le code source. Par conséquent, lorsque vous comparez la cohérence des noms de balises des éléments, il est préférable de les convertir en minuscules avant de comparer.

//错误的写法
if(element.tagName == "div"){
   
}
//正确的写法
if(element.tagName.toLowerCase() == "div"){
   
}

Copier après la connexion

Éléments HTML

Tous les éléments HTML sont représentés par le type HTMLElement, soit par ce type, soit par ses sous-types. Le type HTMLElement hérite directement du type Element et ajoute quelques propriétés. Ces attributs ajoutés correspondent à une série d'attributs qui existent dans chaque élément HTML :

id, l'identifiant unique de l'élément dans le document.
titre, informations explicatives supplémentaires sur l'élément, généralement affichées via une barre d'info-bulle.
lang, la langue du contenu de l'élément.
dir, le sens de la langue, la valeur est "ltr" (affichée de gauche à droite), ou "rtl" (affichée de droite à gauche).
classname correspond à l'attribut class de l'élément, qui est la classe CSS spécifiée pour l'élément.

Les attributs ci-dessus peuvent être utilisés pour obtenir ou modifier les valeurs caractéristiques correspondantes. Par exemple, dans l'exemple suivant :

<div id="myDiv" title="jQuery之家" dir="ltr">jQuery之家</div>

Copier après la connexion

Nous pouvons afficher les valeurs d'attribut ci-dessus dans la console :

var div = document.getElementById("myDiv");
console.info(div.id);
console.info(div.className);
console.info(div.title);
console.info(div.lang);
console.info(div.dir);

Copier après la connexion

Type délément de modèle dobjet de document JavaScript

Pour attribuer valeurs à ces attributs, vous pouvez opérer comme suit :

div.id = "otherId";
div.className = "otherClass";
div.title = "otherTitle";
div.lang = "en";
div.dir = "rtl";

Copier après la connexion

Obtenir les attributs

Chaque élément a un ou plusieurs attributs. Il existe trois méthodes DOM pour exploiter les attributs d'un élément, qui sont. :

getAttribute()
setAttribute()
removeAttribute()

Les méthodes ci-dessus peuvent être utilisées pour n'importe quel attribut, par exemple :

var div = document.getElementById("myDiv");
console.info(div.getAttribute("id"));
console.info(div.getAttribute("class"));
console.info(div.getAttribute("title"));
console.info(div.getAttribute("lang"));
console.info(div.getAttribute("dir"));

Copier après la connexion

Type délément de modèle dobjet de document JavaScript

Les attributs personnalisés (c'est-à-dire le langage HTML standard) peuvent également être obtenu via la méthode getAttribute() Nom de l'attribut qui n'existe pas dans ), par exemple :

<div id="myDiv" my-attribute="hello">自定义属性</div>

Copier après la connexion

Vous pouvez obtenir la valeur de cet attribut personnalisé comme les autres attributs.

var div = document.getElementById("myDiv");
console.info(div.getAttribute("my-attribute"));   //hello

Copier après la connexion

Conseil : les noms d'attribut ne sont pas sensibles à la casse, c'est-à-dire que "ID" et "id" représentent le même attribut.

a deux attributs spéciaux. Bien qu'ils aient des noms d'attribut correspondants, les valeurs des attributs ne sont pas les mêmes que les valeurs obtenues via getAttribute(). Le premier attribut est l'attribut style, qui est utilisé pour styliser l'élément via CSS. Lorsqu'elle est accessible via getAttribute(), la valeur de l'attribut de style renvoyée n'est pas le texte CSS inclus, mais un objet. Le second est un gestionnaire d'événements comme onclick. Lorsqu'il est utilisé sur un élément, onclick contient du code JavaScript. Si vous y accédez via getAttribute(), une fonction JavaScript sera renvoyée.

Définition des attributs

Correspond à getAttribute() est la méthode setAttribute(), qui reçoit deux paramètres : le nom et la valeur de l'attribut à définir. Si l'attribut à définir existe déjà, la méthode setAttribute() remplacera la valeur existante par la valeur spécifiée. Si l'attribut n'existe pas, la méthode setAttribute() créera l'attribut et définira la valeur correspondante. Par exemple :

div.setAttribute("id","myDiv");
div.setAttribute("class","div-class");
div.setAttribute("title","div-title");

Copier après la connexion

Vous pouvez utiliser à la fois les attributs HTML et les attributs personnalisés via la méthode setAttribute(). Les noms d'attribut définis par cette méthode seront uniformément convertis en minuscules, par exemple, "ID" sera converti en "id".

Vous pouvez également utiliser directement l'affectation d'attribut pour définir la valeur de l'attribut

div.id = "myDiv";
div.align = "left";

Copier après la connexion

Mais si vous ajoutez un attribut personnalisé à l'élément DOM comme suit, cet attribut ne deviendra pas automatiquement une fonctionnalité de l'élément :

div.myColor = "red";
alert(div.getAttribute("myColor")); //返回null

Copier après la connexion

要删除一个元素的特性，可以使用removeAttribute()方法，该方法用于彻底删除元素的特性。调用这个方法不仅会清除特性的值，也会从元素中完全删除这个特性。例如：

div.removeAttribute("class");

Copier après la connexion

attribute属性

Element类型是唯一一个使用attribute属性的DOM节点类型。attribute属性中包含一个NamedNodeMap，于NodeList相似，也是一个动态的集合。元素的每一个特性都由一个Attr节点表示，每一个节点都保存在NamedNodeMap对象中。NamedNodeMap对象拥有以下一些方法：

getNamedItem(name)：返回nodeName属性等于name的节点。
removeNamedItem(name)：从列表中移除nodeName属性等于name的节点。
setNamedItem(name)：向列表中添加节点，以节点的nodeName为索引。
item(pos)：返回位于pos位置处的节点。

attribute属性包含一系列的节点，每个节点的nodeName就是特性的名称，而节点的nodeValue就是特性的值。要取得元素的id，可以使用下面的方法：

var id = element.attribute.getNamedItem("id").nodeValue;

Copier après la connexion

也可以通过方括号的方式来简写上面的代码：

var id = element.attribute["id"].nodeValue;

Copier après la connexion

也可以通过这种语法来设置属性值：

element.attribute["id"].nodeValue = "myDiv";

Copier après la connexion

调用removeNamedItem()方法与在元素上调用removeAttribute()方法的效果一样：删除给定名称的元素特性。但是它们之间也有一些区别，removeNamedItem()方法会返回被删除特性的Attr节点：

var oldAttr = element.attribute.removeNamedItem("id");

Copier après la connexion

创建元素

我们通过document.createElement()方法可以创建一个新的元素。这个方法只接受一个参数：要创建的元素的标签名称。这个标签名称在HTML文档中不区分大小写，而在XML文档中则是要区分大小写的。例如使用下面的代码来创建一个新的元素：

var div = document.createElement("div");

Copier après la connexion

在使用createElement()创建元素的同时，也为元素设置了ownerDocument属性。同时，我们还可以操作元素的特性，为它添加更多的子节点，例如：

var div = document.createElement("div");div.id = "myDiv";div.className = "div-class";

Copier après la connexion

在新元素上设置这些特性只是为元素添加了相应的信息。由于新元素还没有被添加到文档树中，所以这些特性不会浏览器的显示。要把新元素添加到文档树中，可以使用appendChild()、insertBefore()、replaceChild()方法，例如下面的代码：

var div = document.createElement("div");
document.body.appendChild(div);

Copier après la connexion

一旦新元素被添加到文档树中，浏览器就会立刻展现该元素。之后，对该元素所做的任何修改都会在浏览器中被反应出来。

元素子节点

元素可以有任意数量的子节点和后代节点。元素的childNodes属性中包含了它的所有子节点，这些子节点有可能是元素、文本节点、注释或处理指令。不同的浏览器对待这些节点有不同的处理方法，以下面的代码为例：

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Copier après la connexion

如果是IE浏览器来解析这段代码，那么

元素；如果是其他浏览器来解析，
- 元素和4个文本节点（表示
- 元素之间的空白符）。如果像下面这样删除了元素之间的空白符号，那么所有的浏览器都会返回相同的子节点数量。
```
<ul id="myList"><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>
```
  Copier après la connexion
  对于上面的代码，