dom_javascript スキルの次のノードを取得する JavaScript メソッド

JavaScript を使用して、ページ上の加算ボタンと減算ボタンをクリックして数値を加算するメソッドを作成します。

単純なHTMLはおそらくこんな感じです。これらの詳細を理解して心配しないでください

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

こんな感じ

JavaScript コードは次のとおりです

<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 を使用して、次の兄弟ノードと前の兄弟ノードを取得することを意味します。改行やスペースなどを削除して、ラベル要素を直接見つけることができます。ただし、次の 2 つは

次の兄弟
previousSibling は次の兄弟ノードと前の兄弟ノードも参照しますが、IE では使いやすいです
--------------------キーワードの説明

parseInt 変換関数。

a = a > 0 ? a : 0;---三項式。