dom의 다음 노드를 얻는 JavaScript 방법

이 글에서는 주로 JavaScript를 사용하여 DOM의 다음 노드를 얻는 방법을 소개하고, 페이지의 플러스 및 마이너스 버튼을 클릭하여 숫자의 누적을 구현합니다. 필요한 친구는 참고할 수 있습니다.

JavaScript를 사용하여 메서드를 작성하세요. 페이지의 플러스 및 마이너스 버튼을 클릭하면 숫자가 누적됩니다.

간단한 HTML은 아마 이렇겠죠. 그냥 이해하시고 이런 사항은 걱정하지 마세요

<input type="button" value="+" onclick="jia(this)" />
<label class="num">0</label>
<input type="button" value="-" onclick="jian(this)" />

이렇게 생겼어요

자바스크립트 코드는 다음과 같습니다

<script type="text/javascript">
function jia(a)
{
var nextnode = a.nextElementSibling;//获取下一个节点

alert(nextnode.innerHTML);
var a = parseInt(nextnode.innerHTML)
a += 1;
nextnode.innerHTML = a;
}
function jian(a) {
var previousnode = a.previousElementSibling;
var a = parseInt(previousnode.innerHTML)
a -= 1;
a = a > 0 ? a : 0;
previousnode.innerHTML = a;
}
</script>

설명:

기능 지안 (a) 및

함수 jia(a)는 현재 클릭된 개체입니다. onclick 이벤트에 연결된 메서드에 이를 추가합니다.

- nextElementSibling은 현재 노드의 다음 노드를 가져옵니다(다음 형제 노드를 가져옵니다)
- PreviousElementSibling은 현재 노드의 이전 노드를 가져옵니다

참고: IE는 노드 간을 건너뜁니다. 생성된 공백 문서 노드(예: 줄 바꿈 문자)는 이를 수행하지 않습니다. FF는 공백 및 줄 바꿈과 같은 레이아웃 요소를 읽기용 노드로 처리하므로 IE A에서 다음을 읽을 수 있습니다. 노드 요소는 FF: nextElementSibling에 다음과 같이 작성되어야 합니다.

위의 설명은 nextElementSibling 및 PreviousElementSibling을 사용하여 다음 형제 노드와 이전 형제 노드를 얻는 것을 의미합니다. 줄 바꿈, 공백 등을 제거하고 레이블 요소를 직접 찾을 수 있습니다. 하지만 다음 두

nextSibling
previousSibling도 다음 형제 노드와 이전 형제 노드를 참조하지만 IE에서는 사용하기 쉽습니다
------------------- ------------- 키워드 설명

parseInt 변환 함수.

a = a > 0 ? a : 0;----삼항 표현.

관련 권장사항:

네비게이션 바 예제 공유에서 HTTP 정보를 가져오는 JavaScript

쿠키를 가져오고 쿠키를 삭제하는 JavaScript에 대한 자세한 설명

위 내용은 dom의 다음 노드를 얻는 JavaScript 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!