Comment exprimer la relation parent-enfant en Javascript

Javascript, en tant que langage de script, simplifie grandement notre processus de développement front-end. Parmi eux, l'expression de la relation parent-enfant est un concept très important. Présentons brièvement comment exprimer la relation parent-enfant en Javascript.

1. L'arborescence DOM

Parlons d'abord de l'arborescence DOM, qui est la plus utilisée en Javascript. L'arborescence HTML DOM est une structure hiérarchique dans laquelle chaque élément HTML fait partie d'une relation parent, enfant ou frère, et tous les nœuds proviennent d'une racine. Les nœuds de l'arborescence ont les concepts suivants :

1. Nœud Elément : représente l'élément HTML
2. Nœud Texte : représente le contenu texte de l'élément
3. Nœud Attribut : représente l'attribut de l'élément
4. Nœud Document : représente l'intégralité du document HTML
5. Nœud de commentaire : représente le contenu de l'annotation en HTML

Dans l'arborescence DOM, les nœuds d'éléments constituent la relation la plus courante entre les nœuds parents et enfants. Par exemple :

<div id="parent">
  <ul>
    <li>item 1</li>
    <li>item 2</li>
  </ul>
</div>

Nous pouvons résumer un morceau de contenu HTML dans la structure DOM ci-dessus, où la balise div est l'élément parent de la balise ul. La balise li est un élément enfant de la balise ul et un élément petit-fils de la balise div. Et comment cette relation père-fils s’exprime-t-elle en Javascript ? div标签是ul标签的父元素。而li标签是ul标签的子元素，也是div标签的孙子元素。而这种父子关系，在Javascript里是如何表达的呢？

二、Node对象

在Javascript中，我们使用Node对象来表示这些DOM节点。Node对象是所有DOM节点的一个基类，所有DOM节点都继承了Node的属性和方法。Node对象有以下常用属性：

1. parentNode：表示父节点，如果没有则返回NULL。
2. childNodes：表示子节点的一个数组。
3. previousSibling：表示前一个兄弟节点。
4. nextSibling：表示后一个兄弟节点。

以上面那段HTML代码为例，我们可以通过以下方式来获取父子节点的关系：

const div = document.getElementById('parent');
const ul = div.firstElementChild;
const li1 = ul.firstElementChild;
const li2 = li1.nextElementSibling;

console.log(ul.parentNode === div); // true
console.log(li1.parentNode === ul); // true
console.log(li2.previousSibling === li1); // true
console.log(li1.nextSibling === li2); // true

以上代码中，我们使用了getElementById方法来获取div，并使用firstElementChild方法获取其第一个子元素ul。接下来，我们使用firstElementChild方法获取ul的第一个子元素li1，并使用nextElementSibling方法获取li1的后一个兄弟节点li2。最后，我们使用Node对象的属性来检测它们之间的父子关系。

三、jQuery中的父子操作

除了使用Node对象来表示父子节点的关系，jQuery也提供了方便的DOM操作函数来实现同样的功能。以下是一些简单的示例：

1. parent()：这个方法返回匹配元素的父元素，可以传入一个选择器来过滤结果。

$('li').parent() // 返回行成父子关系的ul节点

2. children()：这个方法返回匹配元素集合的所有子元素的集合，也可以传入选择器来过滤结果。

$('div').children() // 返回div下的所有子元素

3. siblings()：这个方法返回匹配元素的所有兄弟元素，也可以传入选择器来过滤结果。

$('li').siblings() // 返回li的兄弟元素（不包括它自己）

以上简单的示例中，jQuery提供了便捷的方法帮助我们查找和操作DOM节点父子关系，简化了Javascript操作DOM节点的流程。

结论

Javascript中使用Node对象来表示DOM节点的父子关系。在使用Node对象时，我们可以直接访问节点的属性，比如parentNode、previousSibling

2. Objet Node🎜🎜En Javascript, nous utilisons des objets Node pour représenter ces nœuds DOM. L'objet Node est une classe de base pour tous les nœuds DOM, et tous les nœuds DOM héritent des propriétés et méthodes de Node. L'objet Node a les attributs communs suivants : 🎜🎜🎜parentNode : indique le nœud parent, et renvoie NULL s'il n'y en a pas. 🎜🎜childNodes : représente un tableau de nœuds enfants. 🎜🎜previousSibling : représente le nœud frère précédent. 🎜🎜nextSibling : représente le nœud frère suivant. 🎜🎜🎜 En prenant le code HTML ci-dessus comme exemple, nous pouvons obtenir la relation entre les nœuds parent et enfant de la manière suivante : 🎜rrreee🎜Dans le code ci-dessus, nous utilisons la méthode getElementById pour obtenir le div et utilisez la méthode <code>firstElementChild pour obtenir son premier élément enfant ul. Ensuite, nous utilisons la méthode firstElementChild pour obtenir le premier élément enfant li1 de ul, et la méthode nextElementSibling pour obtenir le nœud frère suivant li2 de li1. Enfin, nous utilisons les propriétés des objets Node pour détecter la relation parent-enfant entre eux. 🎜🎜3. Opérations parent-enfant dans jQuery🎜🎜En plus d'utiliser des objets Node pour représenter la relation entre les nœuds parent et enfant, jQuery fournit également des fonctions d'opération DOM pratiques pour réaliser la même fonction. Voici quelques exemples simples : 🎜🎜🎜parent() : Cette méthode renvoie l'élément parent de l'élément correspondant et peut être passée dans un sélecteur pour filtrer les résultats. 🎜🎜rrreee

🎜children() : Cette méthode renvoie un ensemble de tous les éléments enfants de l'ensemble d'éléments correspondant. Vous pouvez également transmettre un sélecteur pour filtrer les résultats. 🎜🎜rrreee
🎜siblings() : Cette méthode renvoie tous les éléments frères de l'élément correspondant. Vous pouvez également transmettre un sélecteur pour filtrer les résultats. 🎜🎜rrreee🎜Dans l'exemple simple ci-dessus, jQuery fournit une méthode pratique pour nous aider à trouver et à exploiter la relation parent-enfant des nœuds DOM, simplifiant ainsi le processus d'exploitation des nœuds DOM avec Javascript. 🎜🎜Conclusion🎜🎜Les objets nœuds sont utilisés en Javascript pour représenter la relation parent-enfant des nœuds DOM. Lors de l'utilisation d'objets Node, nous pouvons accéder directement aux propriétés du nœud, telles que parentNode, previousSibling, etc. pour obtenir la relation entre les nœuds parent et enfant. De plus, la bibliothèque jQuery fournit également des fonctions plus simples et plus pratiques qui nous permettent d'exploiter et de trouver la relation parent-enfant entre les nœuds DOM. En utilisant intelligemment ces fonctions, nous pouvons terminer très rapidement le travail de développement front-end et améliorer l'efficacité. de développement front-end. 🎜

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!