Analyse de la différence entre les objets Node et les objets Element dans le DOM

Le contenu de cet article porte sur l'analyse de la différence entre les objets Node et les objets Element dans le DOM. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Objet Node

La spécification standard de Dom fournit l'objet Node, qui fournit principalement des attributs et des méthodes pour analyser la structure arborescente des nœuds DOM. La structure arborescente du DOM s'appuie principalement sur les nœuds pour l'analyse. Structure de l'arborescence des nœuds DOM. L'objet Node est l'entrée principale pour analyser la structure de l'arborescence des nœuds DOM. Les propriétés et méthodes fournies par l'objet Node peuvent réaliser des opérations telles que le parcours de nœuds et l'insertion de nœuds

Juger le type de nœud<.>

Element name.nodeName; - Obtenez le nom de l'étiquette (majuscule)

Element name.nodeType; - Obtenez le type d'élément
Element name.nodeValue; >
Obtenir le nœud parent

Node name.parentNode; - Récupérer le nœud parent du nœud enfant

Node name.parentElement; - Récupérer son nœud d'élément parent

Récupérer le nœud parent. child node

Node name.childNodes ; - Obtenez tous les nœuds enfants sous le nœud parent

node name.firstChild; - Obtenez le premier nœud enfant sous le nœud parent

node name.lastChild; le dernier nœud enfant sous le nœud parent

Obtenir les nœuds frères adjacents

Node name.previousSibling ; - Obtenir l'élément frère précédent

Node name.nextSibling - Obtenir l'élément frère suivant

🎜>
Méthode appendChild()

Parent node.appendChild (child node); - Ajouter des nœuds enfants au nœud parent et les ajouter à partir de la fin par défaut

Parent node.insertBefore (nouvellement nœud créé, ancien nœud dans la page); - Ajouter à l'élément parent Le nœud enfant spécifié ajoute

devant lui pour supprimer le nœud

nœud parent.removeChild(nœud enfant); - supprime le nœud enfant spécifié

et remplace le nœud

Parent node.replaceChild(new child node, target node) - Vous pouvez remplacer le nœud enfant cible sélectionné dans le nœud parent

Copier le nœud

Copié target node.cloneNode( true); - true signifie un clonage profond, qui clonera tout dans le nœud, false signifie un clonage non profond, qui ne clonera pas le texte. la valeur par défaut est false

attribut textContent

node.textContent ; - Le contenu du texte dans le nœud de sortie

Objet Element

L'objet Element est fourni dans le Spécification standard DOM, qui fournit les propriétés et méthodes de tous les éléments de la page HTML. La spécification standard DOM L'objet Node est fourni, qui s'appuie principalement sur la structure arborescente des nœuds DOM pour accéder et mettre à jour le contenu de la page HTML. L'objet Element est fourni dans la spécification standard DOM, qui s'appuie principalement sur la structure arborescente des éléments DOM pour accéder et mettre à jour le contenu de la page HTML. Tous les éléments de la page HTML sont des objets HTMLElement, et cet objet est hérité de l'objet Element

Obtenir l'élément enfant

Parent element.firstElementChild; - Récupérer le premier élément enfant de l'élément parent

Parent element.lastElementChild; - Récupérer le dernier élément enfant de l'élément parent

Récupère la phase Élément frère voisin

element.previousElementSibling; - Récupère l'élément frère précédent de l'élément

element.nextElementSibling; - Récupère l'élément frère suivant de l'élément

Opération d'attribut

Element.getAttribute('Attribute name'); - Récupère l'attribut spécifié de l'élément spécifié

Element.setAttribute('Attribute name', 'Attribute value') - Définit le nom d'attribut et la valeur d'attribut de l'élément spécifié

🎜> Element.removeAttribute ('Attribute name'); - Supprime l'attribut de l'élément spécifié

element.hasAttribute('Attribute name'); - Détermine si l'attribut spécifié de l'élément spécifié existe et le résultat renvoie un Valeur booléenne

attribut innerHTML

Element.innerHTML; - Récupère le code HTML de l'élément spécifié

Parent element.innerHTML=Code HTML - Ajoute du code HTML à l'élément parent et écris. le code HTML directement dans la chaîne, mais cette méthode présente des problèmes de sécurité

Recommandations associées :

Conversion entre objets jquery et objets javascript, c'est-à-dire objets DOM_jquery

Attributs des objets et méthode DOM et XMLHttpRequest, domxmlhttprequest

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!