JavaScript 요약: Dom은 컬렉션 요소 객체를 얻습니다.-JS 튜토리얼-php.cn

JavaScript 요약: Dom은 컬렉션 요소 객체를 얻습니다.

WBOY

풀어 주다： 2022-08-05 16:21:42

앞으로

1611명이 탐색했습니다.

이 기사에서는 javascript에 대한 관련 지식을 제공합니다. 주로 컬렉션 요소 객체를 얻는 DOM과 관련된 문제를 소개합니다. for 또는 for...of 루프를 사용하여 컬렉션의 요소 객체를 제어할 수 있습니다. 아래의 속성과 방법을 살펴보는 것이 모든 사람에게 도움이 되기를 바랍니다.

JavaScript 요약: Dom은 컬렉션 요소 객체를 얻습니다.

【관련 권장 사항: javascript 비디오 튜토리얼, web front-end】

컬렉션에서 요소 객체 가져오기

노드 컬렉션은 노드의 컬렉션입니다(인덱스는 0부터 시작)

사용 for 또는 for ...of 루프 컬렉션의 요소 개체를 반복하여 해당 속성과 메서드를 조작합니다.

속성 및 메소드	간단한 설명
length	노드 컬렉션의 요소 개체 수
[n] 또는 item(n)	인덱스에 해당하는 단일 요소 개체를 반환합니다. 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');
      }
  }
};

로그인 후 복사

일반적으로 for..of 루프를 사용하는 것이 좋습니다

***** 요소 개체 컬렉션을 얻는 다음 두 가지 방법을 이해하세요.
document(or element).getElementsByClassName('class value')

클래스 속성이 매개변수인 문서 화재 요소의 자손에 있는 모든 요소 객체의 컬렉션을 반환합니다. 매개변수는 HTML 요소의 클래스 속성 값(즉, 클래스 이름)만 될 수 있습니다.

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

문서 또는 요소 하위 항목에 태그 이름 매개변수가 있는 모든 요소 객체의 컬렉션을 반환합니다. 매개변수는 HTML 요소의 태그 이름만 될 수 있습니다.

노드 탐색은 공백 텍스트 노드를 parentNode를 제외한 하위 노드로 처리합니다. 찾을 수 없으면 null을 반환합니다.

AttributesDescription현재 노드의 상위 노드를 반환firstChild현재 노드의 첫 번째 하위 노드를 반환lastChild현재 노드의 마지막 하위 노드를 반환nextSibling반품 현재 노드의 다음 하위 노드 형제 노드previousSibling현재 노드의 이전 형제 노드를 반환합니다코드 예:

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

로그인 후 복사

Traverse 요소 노드

읽기 전용,

요소 노드만 트래버스합니다(텍스트 등 무시) 노드)

, 찾을 수 없음은 null입니다

읽기 전용 속성DescriptionparentElement요소의 상위 요소 노드를 반환합니다firstElementChild요소의 첫 번째 하위 요소 노드를 반환합니다.lastElementChild요소의 마지막 하위 요소 노드를 반환합니다.nextElementSibling요소의 다음 형제 요소 노드를 반환합니다.previousElement형제자매 요소의 이전 형제 요소 노드를 반환합니다

<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>

로그인 후 복사