Maison >interface Web >js tutoriel >Résumé de javaScript : Dom obtient des objets d'élément de collection

Résumé de javaScript : Dom obtient des objets d'élément de collection

WBOYavant: 2022-08-05 16:09:201598parcourir

Cet article vous apporte des connaissances pertinentes sur javascript. Il présente principalement les problèmes liés à l'obtention d'objets d'éléments de collection par le DOM. Vous pouvez utiliser des boucles for ou for...of pour parcourir les objets d'éléments de la collection afin de les contrôler. un aperçu des propriétés et des méthodes ci-dessous, j'espère que cela sera utile à tout le monde.

【Recommandations associées : Tutoriel vidéo javascript, front-end web】

Obtenir l'objet élément dans la collection

Une collection de nœuds est une collection de nœuds (l'index commence à 0)

Utiliser for ou for ...of loopItère sur les objets éléments de la collection pour manipuler leurs propriétés et méthodes.

Propriétés et méthodes	Description simple
longueur	Le nombre d'objets élément dans la collection de nœuds
[n] ou item(n)	Renvoie l'objet élément unique correspondant à l'index n

//在if条件表达式中写出：orderCheckbox元素对象集合中的元素节点的个数大于0
if(orderCheckboxs.length>0) {
  // 使用普通的for循环迭代orderCheckboxs元素对象集合中的每个元素对象
  for(let i=0;i<orderCheckboxs.length;i++){
    // 在.前面用item(n)方式获取元素对象集合的元素对象。
    orderCheckboxs.item(i).checked= true;
    // 在.前面用[]方式获取元素对象集合的元素对象。
    orderCheckboxs[i].parentElement.className= &#39;item-selected&#39;;
  }

//用一下箭头函数哈
selectAll.onchange= (e) => {
  // 下面的语句是循环体，使用for…of循环迭代orderCheckboxs元素对象集合，循环变量是ele
  for(let ele of orderCheckboxs){
      ele.checked= e.target.checked;
      if(e.target.checked) {
        ele.parentElement.classList.add('item-selected');
      } else {
        ele.parentElement.classList.remove('item-selected');
      }
  }
};

Il est généralement recommandé d'utiliser for..of loop

***** Comprenez les deux méthodes suivantes pour obtenir une collection d'objets éléments.
document(or element).getElementsByClassName('class value')

Renvoie une collection de tous les objets élément dont l'attribut de classe est le paramètre dans les descendants de l'élément fire du document. Les paramètres ne peuvent être que des valeurs d'attribut de classe d'éléments HTML (c'est-à-dire des noms de classe).

document(or element).getElementsByTagName('tag name')

Renvoie une collection de tous les objets élément avec le paramètre tag name dans le document ou les descendants de l'élément. Les paramètres ne peuvent être que des noms de balises d'éléments HTML.

const orders= document.getElementsByClassName('order');
const input= document.getElementsByTagName('input');

Les nœuds traversants

traiteront les nœuds de texte d'espacement comme des nœuds enfants, à l'exception de parentNode s'il n'est pas trouvé, renverra null

Attributes	Description
parentNode.	Renvoie le nœud parent du nœud actuel
firstChild	Renvoie le premier nœud enfant du nœud actuel
lastChild	Renvoie le dernier nœud enfant du nœud actuel
nextSibling	Retours le prochain enfant du nœud actuel Un nœud frère
previousSibling	Renvoie le nœud frère précédent du nœud actuel

Exemple de code :

<body>
<h1><a href="#">123</a></h1>
<h2>快捷支付</h2>
<div class="panel">
  <ul class="step">
    <li>开通</li>
    <li>下单</li>
  </ul>
</div>
<script>
const t= setInterval(() => {
    // 在赋值符右侧写出：通过遍历元素节点的方法获取curStep的上一个元素节点
    let lastStep=curStep.previousElementSibling ;
    // 在赋值符右侧写出：通过遍历元素节点的方法获取curStep的下一个元素节点
    let nextStep=curStep.nextElementSibling ;
</script>

Traverse element nodes

Lecture seule des objets élément, Traverser uniquement les nœuds d'élément (en ignorant le texte, etc.) Node), introuvable est null

Propriété en lecture seule	Description
parentElement	Renvoie le nœud d'élément parent de l'élément
firstElementChild	Renvoie le premier nœud d'élément enfant de l'élément
lastElementChild	Renvoie le dernier nœud d'élément enfant de l'élément
nextElementSibling	Renvoie le nœud d'élément frère suivant de l'élément
précédentElementSibling	Renvoie le nœud d'élément frère précédent de l'élément

<body>
<h1><a href="#">123</a></h1>
<h2>快捷支付</h2>
<div class="panel">
  <ul class="step">
    <li>开通</li>
    <li>下单</li>
  </ul>
</div>

<script>
(() => {
  const step= document.querySelector('.step');
  // 在赋值符右侧写出：通过遍历元素节点的方法获取class为step的第1个子元素节点。
  let curStep=step.firstElementChild;

  const t= setInterval(() => {
    // 在赋值符右侧写出：通过遍历元素节点的方法获取curStep的上一个元素节点
    let lastStep=curStep.previousElementSibling ;
    // 在赋值符右侧写出：通过遍历元素节点的方法获取curStep的下一个元素节点
    let nextStep=curStep.nextElementSibling ;
</script>

【Connexe recommandé : tutoriel vidéo javascript, front-end web】

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!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Maîtriser complètement les membres des attributs DOM et le flux de documentsArticle suivant：Maîtriser complètement les membres des attributs DOM et le flux de documents

Articles Liés

Voir plus