dom_javascript 기술의 다음 노드를 얻는 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 &#63; a : 0;
previousnode.innerHTML = a;
}
</script>

설명:

함수 jian(a) 및

함수 jia(a)는 현재 클릭된 개체입니다. onclick 이벤트 메소드에 추가하세요.

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

참고: IE는 노드 사이에 공백(예: 개행 문자)이 생성된 문서 노드를 건너뛰지만 Mozilla는 이를 수행하지 않습니다. FF는 공백 및 개행 문자와 같은 레이아웃 요소를 노드로 읽습니다. IE에서 nextSibling을 사용하여 읽어야 하는 내용은 FF: nextElementSibling에서 다음과 같이 작성해야 합니다.

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

다음형제
PreviousSibling은 다음 형제 노드와 이전 형제 노드도 참조하는데, IE에서는 사용하기 쉽습니다
-------키워드 설명

parseInt 변환 함수.

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