Quelles sont les façons de créer des nœuds en javascript

Méthodes pour créer des nœuds en JavaScript : 1. La méthode createElement() peut créer des nœuds d'éléments ; 2. La méthode createTextNode() peut créer des nœuds de texte ; 3. La méthode createAttribute() peut créer des nœuds d'attribut.

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

Méthodes pour créer des nœuds en javascript

1. Méthode createElement() : créer des nœuds d'élément

Utilisez la méthode createElement() de l'objet document pour créer un nouveau nœud d'élément en fonction du nom d'étiquette spécifié. par le paramètre et renvoie une référence à l’élément nouvellement créé. L'utilisation est la suivante :

var element = document.getElement("tagName");

Parmi eux, element représente la référence du nouvel élément, et createElement() est une méthode de l'objet document. Cette méthode n'a qu'un seul paramètre, qui est utilisé pour spécifier le nom de balise du. élément créé.

【Exemple 1】Le code suivant crée une marque de paragraphe p dans le document actuel et la stocke dans la variable p. Puisque cette variable représente un nœud d'élément, sa valeur d'attribut nodeType est égale à 1 et sa valeur d'attribut nodeName est égale à p.

var p = document.createElement("p");  //创建段落元素
var info = "nodeName:" + p.nodeName;  //获取元素名称
info += ", nodeType:" + p.nodeType;  //获取元素类型，如果为1则表示元素节点
console.log(info);

Les nouveaux éléments créés à l'aide de la méthode createElement() ne seront pas automatiquement ajoutés au document. Si vous souhaitez ajouter cet élément au document, vous devez également utiliser la méthode appendChild(), insertBefore() ou replaceChild().

【Exemple 2】Le code suivant montre comment ajouter l'élément p nouvellement créé à l'élément body. Lorsqu'un élément est ajouté à l'arborescence du document, il s'affiche immédiatement.

var p = document.createElement("p");  //创建段落元素
document.body.appendChild(p);  //增加段落元素到body元素下

2. Méthode createTextNode() : Créer un nœud de texte

Utilisez la méthode createTextNode() de l'objet document pour créer un nœud de texte. L'utilisation est la suivante :

document.createTextNode(data)

• Le paramètre data représente une chaîne.

Exemple

L'exemple suivant crée un nouvel élément div, définit sa valeur de classe sur rouge, puis l'ajoute au document.

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

En raison des opérations DOM et d'autres raisons, un nœud de texte peut ne pas contenir de texte, ou deux nœuds de texte peuvent apparaître successivement. Afin d'éviter cette situation, la méthode normalize() est généralement appelée sur l'élément parent pour supprimer les nœuds de texte vides et fusionner les nœuds de texte adjacents.

3. Méthode createAttribute() : créer des nœuds d'attribut

Utilisez la méthode createAttribute() de l'objet document pour créer des nœuds d'attribut :

document.createAttribute(name)

Le nom du paramètre représente le nom du nouveau. attribut créé.

Exemple 1

L'exemple suivant crée un nœud d'attribut avec le nom align et value center, puis définit l'attribut align pour l'étiquette b390322fe69e754cc2d7247050226b6d, et enfin utilise 3 méthodes pour lire la valeur de l'attribut align .

<div id="box">document.createAttribute(name)</div>
<script>
    var element = document.getElementById("box");
    var attr = document.createAttribute("align");
    attr.value = "center";
    element.setAttributeNode(attr);
    console.log(element.attributes["align"].value);  //"center"
    console.log(element.getAttributeNode("align").value);  //"center"
    console.log(element.getAttribute("align"));  //"center"
</script>

Les nœuds d'attribut sont généralement situés dans la balise head de l'élément. La liste d'attributs de l'élément est préchargée avec les informations sur l'élément et stockée dans un tableau associatif. Par exemple, prenons la structure HTML suivante.

<div id="div1" title="div"></div>

Lorsque le DOM est chargé, la variable divElement représentant l'élément HTML div générera automatiquement une collection associée qui récupère ces attributs sous forme de paires nom-valeur.

divElement.attributes = {
    id : "div1",
    class : "style1",
    lang : "en",
    title : "div"
}

Dans le DOM traditionnel, la syntaxe par points est couramment utilisée pour accéder directement aux attributs HTML via des éléments, tels que img.src, a.href, etc. Bien que cette méthode ne soit pas standard, elle est prise en charge par tous les navigateurs.

Exemple 2

L'élément img a un attribut src et tous les objets image ont un attribut de script src, qui est associé à l'attribut HTML src. Les deux utilisations ci-dessous fonctionnent bien dans différents navigateurs.

<img id="img1" src="" />
<script>
    var img = document.getElementById("img1");
    img.setAttribute("src", "http://www.w3.org");  //HTML 属性
    img.src = "http://www.w3.org";  //JavaScript 属性
</script>

Les similaires incluent onclick, style, href, etc. Afin de garantir que les scripts JavaScript fonctionnent correctement dans différents navigateurs, il est recommandé d'adopter une utilisation standard, et de nombreux attributs HTML ne sont pas mappés par JavaScript, ils ne peuvent donc pas être lus et écrits directement via les attributs de script.

【Apprentissage recommandé : Tutoriel avancé javascript】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!