English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Dans le DOM (modèle d'objet de document) HTML, chaque partie est un nœud.
Les nœuds sont les éléments de base de la structure DOM, chaque balise HTML est un nœud de la structure DOM.
Le document est un nœud de document .
Tous les éléments HTML sont les nœuds d'élément
Toutes les propriétés HTML sont les nœuds de propriété
Le texte inséré dans l'élément HTML est les nœuds de texte
Les commentaires sont les nœuds de commentaires.
Le type de nœud de base est le type Node, tous les autres types héritent de Node, les opérations DOM sont souvent la partie la plus coûteuse en termes de performance en JavaScript, donc les problèmes de NodeList sont les plus fréquents. À noter : NodeList est 'dynamique', ce qui signifie que chaque fois qu'on accède à l'objet NodeList, une requête est exécutée, bien que cela augmente les coûts, cela garantit que les nœuds ajoutés récemment peuvent être accessibles dans NodeList.
Tous les nœuds d'élément ont des propriétés et des méthodes communes, voyons les en détail :
Voyons d'abord les propriétés les plus couramment utilisées génériques
1 element.id : définit ou retourne l'id de l'élément.
2 element.innerHTML : définit ou retourne le contenu de l'élément, peut inclure les sous-étiquettes et le contenu
3 element.innerText : définit ou retourne le contenu de l'élément, sans les sous-étiquettes et le contenu
4 element.className : définit ou retourne le nom de classe de l'élément
5 element.nodeName : retourne le nom de l'étiquette en majuscules du nœud
6 element.nodeType : retourne le type de nœud de ce nœud,1représente le nœud d'élément 2représente le nœud de propriété...
7 element.nodeValue : retourne la valeur du nœud, pour les nœuds d'élément cette valeur est null
8 element.childNodes : retourne un objet nodelist des enfants de l'élément, nodelist est similaire à un tableau, possède une propriété length, peut utiliser des crochets [index] pour accéder à la valeur à l'index spécifié (ou utiliser la méthode item(index)). Mais nodelist n'est pas un tableau.
9 element.firstChild/element.lastChild : retourne le premier/dernier nœud enfant (y compris les nœuds de commentaires et les nœuds de texte)
10 element.parentNode : retourne le nœud parent de ce nœud
11 element.previousSibling : retourne le nœud précédent du même niveau que le nœud courant (y compris les nœuds de commentaires et les nœuds de texte)
12 element.nextSibling : retourne le prochain nœud du même niveau que le nœud courant (y compris les nœuds de commentaires et les nœuds de texte)
13 element.chileElementCount : retourne le nombre d'éléments enfants (sans les nœuds de texte et les nœuds de commentaires)
14 element.firstElementChild /lastElementChild Retourne le premier/Dernier enfant (sans les nœuds de texte et les nœuds de commentaire)
15 element.previousElementSibling/nextElementSibling Retourne l'élément frère précédent/L'élément frère suivant (sans les nœuds de texte et les nœuds de commentaire)
16 element.clientHeight/clientWidth Retourne la hauteur visible du contenu/Largeur (sans inclure la bordure, la marge ou la barre de défilement)
17 element.offsetHeight/offsetWidth /offsetLeft/offset/Top Retourne la hauteur de l'élément/Largeur/Décalage par rapport à la gauche de l'élément parent/Décalage droit (y compris la bordure et le rembourrage, sans inclure la marge)
18 element.style Définit ou retourne les propriétés de style de l'élément,. Exemple : element.style.backgroundColor Notez que, contrairement à CSS, les propriétés de style doivent se débarrasser des tirets, le deuxième mot doit commencer par une majuscule
19 element.tagName Retourne le nom de la balise de l'élément (en majuscules)
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.form_style{
color: #5b5b5b;
font-size: large;
border: 5px solid rebeccapurple;
background-color: antiquewhite;
width: 440px;
height: 120px;
position: relative;
left: 20px;
top:20px;
margin:10px;
}
p {
color: #5b5b5b;
font-size: larger;
text-indent: 40px;
}
</style>
</head>
<body>
<form id='first_form' class="form_style" name="cangjingge">
Veuillez choisir une méthode de cultivation :<br/>
<input type="radio" name="gongfa" value="jysg">Neuf Yang Gong<br/>
<input type="radio" name="gongfa" value="qkdny">Grand déplacement céleste<br/>
<input type="radio" name="gongfa" value="khbd">Tao Te King<br/>
<input type="radio" name="gongfa" value="xxdf">Méthode d'absorption des étoiles<br/>
</form>
<p>Refléchissez bien, hôte !</p>!--Balise de commentaire-->
<p>Méthodes recommandées</p>-->Le manuel du lotus</p>
<script>
//Ajoutez le code de démonstration JavaScript ici
var a=document.getElementById('first_form'),
b = document.getElementsByTagName('p')[0];
console.log(a.id);
console.log(a.innerHTML);
console.log(a.className);
console.log(a.childNodes);
console.log(a.firstChild);
console.log(a.lastChild);
console.log(a.nodeName);
console.log(a.nodeType);
console.log(a.nodeValue);
console.log(a.parentNode);
console.log(a.clientHeight);
console.log(a.offsetHeight);
console.log(b.nextSibling);
console.log(b.nextElementSibling);
</script>
</body>
</html>
Résultat affiché par le navigateur :
Il y a aussi certains attributs spécifiques
Les attributs spécifiques sont ceux qui appartiennent spécifiquement à un type de balise. Par exemple, la balise <a> a les attributs href et target. La balise <img> a l'attribut src; la balise <form> a les attributs entype et action ...
a_element.href retourne l'hyperlien pointé par le noeud actuel
Voyons maintenant les méthodes communes utilisées plus fréquemment :
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.form_style{
color: #5b5b5b;
font-size: large;
}
p {
color: #5b5b5b;
font-size: larger;
}
</style>
</head>
<body>
<form id='first_form' class="form_style" name="cangjingge">
Veuillez choisir une méthode de cultivation :<br/>
<input type="radio" name="gongfa" value="jysg">Neuf Yang Gong<br/>
<input type="radio" name="gongfa" value="qkdny">Grand déplacement céleste<br/>
<input type="radio" name="gongfa" value="khbd">Tao Te King<br/>
<input type="radio" name="gongfa" value="xxdf">Méthode d'absorption des étoiles<br/>
</form>
<p>Refléchissez bien, hôte !</p>
<script>
//Ajoutez le code de démonstration JavaScript ici
</script>
</body>
</html>
(Tous les exemples de code JavaScript ci-dessous sont basés sur le code HTML d'exemple de ce document)
1 element.appendChild(nodeName) Ajoutez un nouveau noeud enfant à l'élément, en tant que dernier enfant, et retournez ce noeud. Pour ajouter un nouvel élément au DOM HTML, vous devez d'abord créer cet élément, puis le joindre à un élément existant.
Code de démonstration JS :
var a=document.getElementById('first_form');
var textnode=document.createTextNode("慎重选择");
var textnode=document.createTextNode("慎重选择");
2 a.appendChild(textnode) element.getAttribute(para)
Code de démonstration JS :
var a=document.getElementById('first_form');
Retourne la valeur de l'attribut spécifié du nœud d'élément. //console.log(a.getAttribute('name'))
3 element.getAttributeNode(para) Retourne le nœud d'attribut spécifié.
Code de démonstration JS :
var a=document.getElementById('first_form');
console.log(a.getAttributeNode('name')) //Sortie console de l'attribut name
4 element.getElementsByTagName(para) Retourne l'ensemble des éléments enfants ayant le nom de balise spécifié.
Code de démonstration JS :
var a=document.getElementById('first_form');
console.log(a.getElementsByTagName('input')) //Sortie console
5 element.hasAttribute(para) Retourne true si l'élément possède l'attribut spécifié, sinon retourne false.
Code de démonstration JS :
var a=document.getElementById('first_form');
console.log(a.hasAttribute('name')) //Sortie console
6 element.insertBefore(insertNode,appointedNode) Insérer un nouveau nœud avant un nœud enfant existant spécifié.
Code de démonstration JS :
var a=document.getElementById('first_form');
var inputList=document.getElementsByTagName('input');
var newNode=document.createElement('input');
var newNode2=document.createTextNode('天马流星拳');
var br=document.createElement('br');
newNode.type='radio';
newNode.name='gongfa';
newNode.value='tmlxq';
a.insertBefore(newNode,inputList[2]);
a.insertBefore(newNode2,inputList[3]);
a.insertBefore(br,inputList[3]);
7 element.removeAttribute(); Supprimer l'attribut spécifié de l'élément.
Code d'exemple JS :
var a=document.getElementById('first_form');
a.removeAttribute('name');
console.log(a.hasAttribute('name'))
8 element.removeChild() Retirer le nœud enfant de l'élément. Le nœud supprimé bien qu'il ne soit plus dans l'arbre de document, reste en mémoire et peut être mentionné à tout moment.
Code d'exemple JS :
var a=document.getElementById('first_form');
a.removeChild(a.childNodes[3]);
9 element.replaceChild(newNode,replaceNode) Remplacer le nœud spécifié par un nouveau nœud.
10 element.setAttribute(attrName,attrValue) Définir ou modifier l'attribut spécifié en valeur spécifiée.
Code d'exemple JS :
var a=document.getElementById('first_form');
a.setAttribute('name','shaolinsi');
console.log(a.name)
11 element.setAttributeNode() Modifier le nœud d'attribut spécifié
Code d'exemple JS :
var a=document.getElementById('first_form');
var attr = document.createAttribute('id');
attr.value='the_first';
a.setAttributeNode(attr);
console.log(a.id)
12 nodelist.item() Retourne le nœud à l'index spécifié dans NodeList.
Code d'exemple JS :
var a=document.getElementsByTagName('input')
console.log(a.item(2))
Ceci est la totalité de l'explication détaillée des attributs et méthodes des éléments DOM dans les bases du JavaScript que l'éditeur vous présente. J'espère que vous soutenerez et applaudirez le tutoriel~