Quelles sont les façons de créer des nœuds en javascript-Questions et réponses frontales-php.cn

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

青灯夜游

Libérer： 2021-10-13 17:00:45

original

15053 Les gens l'ont consulté

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.

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

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");

Copier après la connexion

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);

Copier après la connexion

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元素下

Copier après la connexion

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)

Copier après la connexion

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);

Copier après la connexion

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)

Copier après la connexion

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

, 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>

Copier après la connexion

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>

Copier après la connexion

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"
}

Copier après la connexion

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>

Copier après la connexion

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!