interface Web
js tutoriel
Tutoriel de base sur l'exploitation des nœuds HTML DOM avec des connaissances JavaScript_Basic
Tutoriel de base sur l'exploitation des nœuds HTML DOM avec des connaissances JavaScript_Basic
En raison de l'existence du DOM, cela nous permet d'obtenir, de créer, de modifier ou de supprimer des nœuds via JavaScript.
REMARQUE : Les éléments dans les exemples fournis ci-dessous sont tous des nœuds d'éléments.
Obtenir le nœud
Relation père-fils
element.parentNode element.firstChild/element.lastChild element.childNodes/element.children
Relation fraternelle
element.previousSibling/element.nextSibling element.previousElementSibling/element.nextElementSibling
L'acquisition de nœuds via la relation directe entre les nœuds réduira considérablement la maintenabilité du code (les changements dans la relation entre les nœuds affecteront directement l'acquisition des nœuds), mais ce problème peut être résolu efficacement grâce aux interfaces.
L'acquisition de nœuds via la relation directe entre les nœuds réduira considérablement la maintenabilité du code (les changements dans la relation entre les nœuds affecteront directement l'acquisition des nœuds), mais ce problème peut être résolu efficacement grâce aux interfaces.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ELEMENT_NODE & TEXT_NODE</title>
</head>
<body>
<ul id="ul">
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
</ul>
<p>Hello</p>
<script type="text/javascript">
var ulNode = document.getElementsByTagName("ul")[0];
console.log(ulNode.parentNode); //<body></body>
console.log(ulNode.previousElementSibling); //null
console.log(ulNode.nextElementSibling); //<p>Hello</p>
console.log(ulNode.firstElementChild); //<li>First</li>
console.log(ulNode.lastElementChild); //<li>Fourth</li>
</script>
</body>
</html>
NTOE : les personnes prudentes constateront que dans l'exemple de traversée de nœuds, il n'y a pas d'espaces entre les nœuds body, ul, li et p, car s'il y a des espaces, alors les espaces seront considérés comme un nœud TEXTE, utilisez donc ulNode.previousSibling pour obtenir un nœud de texte vide au lieu du nœud
Implémenter la version compatible avec le navigateur d'element.children
Certains navigateurs plus anciens ne prennent pas en charge la méthode element.children, mais nous pouvons utiliser la méthode suivante pour assurer la compatibilité.
<html lang>
<head>
<meta charest="utf-8">
<title>Compatible Children Method</title>
</head>
<body id="body">
<div id="item">
<div>123</div>
<p>ppp</p>
<h1>h1</h1>
</div>
<script type="text/javascript">
function getElementChildren(e){
if(e.children){
return e.children;
}else{
/* compatible other browse */
var i, len, children = [];
var child = element.firstChild;
if(child != element.lastChild){
while(child != null){
if(child.nodeType == 1){
children.push(child);
}
child = child.nextSibling;
}
}else{
children.push(child);
}
return children;
}
}
/* Test method getElementChildren(e) */
var item = document.getElementById("item");
var children = getElementChildren(item);
for(var i =0; i < children.length; i++){
alert(children[i]);
}
</script>
</body>
</html>
REMARQUE : Cette méthode de compatibilité est une ébauche préliminaire et n'a pas été testée pour sa compatibilité.
Interface pour obtenir le nœud d'élément
getElementById getElementsByTagName getElementsByClassName querySelector querySelectorAll
getElementById
Obtenez l'objet nœud avec l'identifiant spécifié dans le document.
var element = document.getElementById('id');
getElementsByTagName
Obtenez dynamiquement une collection de nœuds d'éléments avec des balises spécifiées (sa valeur de retour sera affectée par les modifications du DOM et sa valeur changera). Cette interface peut être obtenue directement via l'élément et ne doit pas agir directement sur le document.
// 示例
var collection = element.getElementsByTagName('tagName');
// 获取指定元素的所有节点
var allNodes = document.getElementsByTagName('*');
// 获取所有 p 元素的节点
var elements = document.getElementsByTagName('p');
// 取出第一个 p 元素
var p = elements[0];
getElementsByClassName
Obtient tous les nœuds avec la classe spécifiée dans l'élément spécifié. Plusieurs options de classe peuvent être séparées par des espaces, quel que soit l'ordre.
var elements = element.getElementsByClassName('className');
REMARQUE : IE9 et versions antérieures ne prennent pas en charge getElementsByClassName
Méthodes compatibles
function getElementsByClassName(root, className) {
// 特性侦测
if (root.getElementsByClassName) {
// 优先使用 W3C 规范接口
return root.getElementsByClassName(className);
} else {
// 获取所有后代节点
var elements = root.getElementsByTagName('*');
var result = [];
var element = null;
var classNameStr = null;
var flag = null;
className = className.split(' ');
// 选择包含 class 的元素
for (var i = 0, element; element = elements[i]; i++) {
classNameStr = ' ' + element.getAttribute('class') + ' ';
flag = true;
for (var j = 0, name; name = className[j]; j++) {
if (classNameStr.indexOf(' ' + name + ' ') === -1) {
flag = false;
break;
}
}
if (flag) {
result.push(element);
}
}
return result;
}
}
querySelector / querySelectorAll
Récupérez le premier élément ou tous les éléments d'une liste (le résultat renvoyé ne sera pas affecté par les modifications ultérieures du DOM et ne changera pas après l'acquisition) qui correspond au sélecteur CSS entrant.
var listElementNode = element.querySelector('selector');
var listElementsNodes = element.querySelectorAll('selector');
var sampleSingleNode = element.querySelector('#className');
var sampleAllNodes = element.querySelectorAll('#className');
REMARQUE : IE9 ne prend pas en charge querySelector et querySelectorAll
Créer un nœud
Créer un nœud -> Définir les propriétés -> Insérer un nœud
var element = document.createElement('tagName');
Modifier le nœud
textContent
Obtient ou définit le contenu textuel du nœud et de ses nœuds descendants (pour tout le contenu textuel du nœud).
element.textContent; // 获取 element.textContent = 'New Content';
REMARQUE : IE 9 et versions antérieures ne sont pas pris en charge.
innerText (non conforme au W3C)
Obtient ou définit le contenu textuel du nœud et de ses descendants. Son effet sur textContent est presque le même.
element.innerText;
REMARQUE : Non conforme aux spécifications du W3C et ne prend pas en charge le navigateur FireFox.
Solution de compatibilité FireFox
if (!('innerText' in document.body)) {
HTMLElement.prototype.__defineGetter__('innerText', function(){
return this.textContent;
});
HTMLElement.prototype.__defineSetter__('innerText', function(s) {
return this.textContent = s;
});
}
Insérer un nœud
appendChild
Ajouter un nœud d'élément dans l'élément spécifié.
var aChild = element.appendChild(aChild);
insérerAvant
Insérez l'élément spécifié avant le nœud spécifié de l'élément spécifié.
var aChild = element.insertBefore(aChild, referenceChild);
Supprimer le nœud
Supprimez les nœuds d'élément enfant du nœud spécifié.
var child = element.removeChild(child);
intérieurHTML
Obtenir ou définir tout le contenu HTML dans le nœud spécifié. Remplace tout le contenu interne précédent et crée un tout nouveau lot de nœuds (en supprimant les événements et les styles précédemment ajoutés). innerHTML ne vérifie pas le contenu, s'exécute directement et remplace le contenu original.
REMARQUE : Ceci n'est recommandé que lors de la création d'un tout nouveau nœud. Ne pas utiliser sous le contrôle de l'utilisateur.
var elementsHTML = element.innerHTML;
存在的问题+
- 低版本 IE 存在内存泄露
- 安全问题（用户可以在名称中运行脚本代码）
PS: appendChild() , insertBefore()插入节点需注意的问题
使用appendChild()和insertBefore()插入节点都会返回给插入的节点，
//由于这两种方法操作的都是某个节点的子节点，所以必须现取得父节点，代码中 someNode 表示父节点 //使用appendChild()方法插入节点 var returnedNode = someNode.appendChild(newNode); alert(returnedNode == newNode) //true //使用insertBefore()方法插入节点 var returnedNode = someNode.appendChild(newNode); alert(returnedNode == newNode) //true
值得注意的是，如果这两种方法插入的节点原本已经存在与文档树中，那么该节点将会被移动到新的位置，而不是被复制。
<div id="test">
<div>adscasdjk</div>
<div id="a">adscasdjk</div>
</div>
<script type="text/javascript">
var t = document.getElementById("test");
var a = document.getElementById('a');
//var tt = a.cloneNode(true);
t.appendChild(a);
</script>
在这段代码中，页面输出的结果和没有Javascript时是一样的，元素并没有被复制，由于元素本来就在最后一个位置，所以就和没有操作一样。如果把id为test的元素的两个子元素点换位置，就可以在firbug中看到这两个div已经被调换了位置。
如果我们希望把id为a的元素复制一个，然后添加到文档中，那么必须使被复制的元素现脱离文档流。这样被添加复制的节点被添加到文档中之后就不会影响到文档流中原本的节点。即我们可以把复制的元素放到文档的任何地方，而不影响被复制的元素。下面使用了cloneNode()方法，实现节点的深度复制，使用这种方法复制的节点会脱离文档流。当然，我不建议使用这种方法复制具有id属性的元素。因为在文档中id值是唯一的。
<div id="test">
<div>adscasdjk</div>
<div id="a">adscasdjk</div>
</div>
<script type="text/javascript">
var t = document.getElementById("test");
var a = document.getElementById('a');
var tt = a.cloneNode(true);
t.appendChild(tt);
</script>
相似的操作方法还有 removeNode(node)删除一个节点，并返回该节；replaceNode(newNode，node)替换node节点，并返回该节点。这两种方法相对来说更容易使用一些。
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Bordure de tableau en HTML
Sep 04, 2024 pm 04:49 PM
Guide de la bordure de tableau en HTML. Nous discutons ici de plusieurs façons de définir une bordure de tableau avec des exemples de bordure de tableau en HTML.
Marge gauche HTML
Sep 04, 2024 pm 04:48 PM
Guide de la marge HTML gauche. Nous discutons ici d'un bref aperçu de la marge gauche HTML et de ses exemples ainsi que de son implémentation de code.
Tableau imbriqué en HTML
Sep 04, 2024 pm 04:49 PM
Ceci est un guide des tableaux imbriqués en HTML. Nous discutons ici de la façon de créer un tableau dans le tableau ainsi que des exemples respectifs.
Disposition du tableau HTML
Sep 04, 2024 pm 04:54 PM
Guide de mise en page des tableaux HTML. Nous discutons ici des valeurs de la mise en page des tableaux HTML ainsi que des exemples et des résultats en détail.
Espace réservé d'entrée HTML
Sep 04, 2024 pm 04:54 PM
Guide de l'espace réservé de saisie HTML. Nous discutons ici des exemples d'espace réservé d'entrée HTML ainsi que des codes et des sorties.
Liste ordonnée HTML
Sep 04, 2024 pm 04:43 PM
Guide de la liste ordonnée HTML. Ici, nous discutons également de l'introduction de la liste et des types HTML ordonnés ainsi que de leur exemple respectivement.
Déplacer du texte en HTML
Sep 04, 2024 pm 04:45 PM
Guide pour déplacer du texte en HTML. Nous discutons ici d'une introduction, du fonctionnement des balises de sélection avec la syntaxe et des exemples à implémenter.
Bouton HTML onclick
Sep 04, 2024 pm 04:49 PM
Guide du bouton HTML onclick. Nous discutons ici de leur introduction, de leur fonctionnement, des exemples et de l'événement onclick dans divers événements respectivement.
