Résumé des méthodes de fonctionnement de base du DOM en JavaScript

Méthodes de base du DOM

1. Référence directe aux nœuds
1.document.getElementById
--Rechercher les nœuds par identifiant dans le document
🎜>2.document.getElementByTagName(tagName);
--Renvoie un tableau contenant des références à ces nœuds
--Par exemple : document.getElementByTagName("span"); > 2. Référence indirecte au nœud
3.element.childNodes
--Renvoie tous les nœuds enfants de l'élément Vous pouvez appeler
-- en utilisant element.childNodes[i] element.firstChild=element.childNodes[. 0];
--element.lastChild=element.childNodes[element.childNonts.length-1];
4.element.parentNode
--Référence au nœud parent
5.element.nextSibling ; //Référence au nœud frère suivant
element.previousSibling; //Référence au nœud frère précédent
3.Obtenir les informations sur le nœud
6.L'attribut NodeName obtient le nom du point du nœud
--Pour les nœuds d'élément. , le nom de la balise est renvoyé, tel que : Le retour est "a"
--Pour les nœuds d'attribut, le nom de l'attribut est renvoyé, tel que : class="test" renvoie test
--Pour les nœuds de texte, il renvoie le contenu du texte
7.nodeType renvoie le type de nœud
--Les nœuds d'élément renvoient 1
- -Le nœud d'attribut renvoie 2
-- Le nœud de texte renvoie 3
8.nodeValue renvoie la valeur du nœud
--Le nœud d'élément renvoie null
--Le nœud d'attribut renvoie un défini
--Le nœud de texte renvoie le contenu du texte
9. hasChildNodes() détermine s'il y a des nœuds enfants
L'attribut 10.tagName renvoie le nom de balise de l'élément
--Cet attribut n'est disponible que pour les nœuds d'élément et est équivalent à l'attribut nodeName du nœud d'élément
4. Traitement du nœud d'attribut
11. Chaque nœud d'attribut est un attribut du nœud d'élément et est accessible via (noeud d'élément.Nom de l'attribut)
12. Utilisez la méthode setAttribute() pour ajouter des attributs aux nœuds d'élément.
--elementNode.setAttribute(attributeName,attributValue);
--attributeName est le nom de l'attribut,attributeValue est la valeur de l'attribut
13. Utilisez la méthode getAttribute() pour obtenir la valeur de l'attribut
🎜>--elementNode.getAttribute(attributeName);
5. Traitement des nœuds de texte
14. Attributs innerHTML et innerText Je pense que tout le monde connaît ces deux méthodes, je ne les présenterai pas ici. Notez qu'IE et Firefox considèrent facilement les espaces, les nouvelles lignes, les tabulations, etc. comme des nœuds de texte. Lorsque les nœuds de texte sont généralement référencés via element.childNodes[i], ils doivent généralement être traités :

<script language"javaScript" type="text/javascript"> 
function cleanWhitespace(element) 
{ 
for(var i=0; i<element.childNotes.length; i++) 
{ 
var node = element.childNodes[i]; 
if(node.nodeType == 3 && !/\S/.test(node.nodeValue)) 
{ 
node.parentNode.removeChild(node); 
} 
} 
} 
</script>

6. Changer la hiérarchie du document

15. La méthode document.createElement() crée des nœuds d'élément Click
--tels que : document.createElement("Span");
La méthode 16.document.createTextNode() crée des nœuds de texte
--tels que : document.createTextNode(" ") ; //Remarque : Il ne sera pas codé via html, ce qui signifie que ce qui est créé ici n'est pas un espace, mais une chaîne
17. Utilisez la méthode appendChild() pour ajouter des nœuds
--parentElement.appendChild. (childElement);
18 .Utilisez la méthode insertBefore() pour insérer des nœuds enfants
--parentNode.insertBefore(newNode, referenceNode);
--newNode est le nœud inséré, referenceNode est le nœud inséré avant celui-ci);
19. Utilisez La méthode replaceChild remplace le nœud enfant
--parentNode.replaceChild(newNode,oldNode);
--Remarque : oldNode doit être un nœud enfant de parentNode,
20. méthode cloneNode pour copier le nœud
--node.cloneNode(includeChildren);
--includeChildren est un booléen, indiquant s'il faut copier son nœud enfant
21. Utilisez la méthode removeChild pour supprimer le nœud enfant--parentNode.removeChild(childNode);
7. Opérations de table
--Remarque : un nœud de table complet ne peut pas être directement inséré dans le document dans IE
Ajouter des lignes et des cellules
var. _table=document.createElement(" table"); //Créer un tableau
table.insertRow(i); //Insérer une ligne dans la i-ème ligne du tableau
row.insertCell(i); //Insérez une cellule à la i-ième position de la ligne
23. Objet de cellule de référence
--table.rows[i].cells[i]
24. --table.deleteRow(index);
--row.deleteCell(index);
25. Échangez deux lignes pour obtenir les positions de deux cellules
node1.swapNode(node2); -Cette méthode provoquera une erreur dans Firefox
Méthode générale :

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!