ホームページ > ウェブフロントエンド > jsチュートリアル > dom の次のノードを取得する JavaScript メソッド

dom の次のノードを取得する JavaScript メソッド

不言
リリース: 2018-05-05 11:34:52
オリジナル
3089 人が閲覧しました

この記事ではJavaScriptを使用してDOMの次のノードを取得する方法を主に紹介し、ページ上のプラスとマイナスのボタンをクリックすることで数値の累積を実現します。必要な友達はそれを参照してください

メソッドを記述するには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 ? a : 0;
previousnode.innerHTML = a;
}
</script>
ログイン後にコピー


説明してください:

関数ジャン( a) および

関数 jia(a) は現在クリックされているオブジェクトです。これを onclick イベントに接続されたメソッドに追加します。

- nextElementSibling は現在のノードの次のノードを取得します (次の兄弟ノードを取得します)
-PreviousElementSibling は現在のノードの前のノードを取得します

注: IE はノード間をスキップします生成されたスペース ドキュメント ノード (改行文字など) ですが、Mozilla はこれを行いません。FF はスペースや改行などのレイアウト要素を読み取り用のノードとして扱います。そのため、IE A では nextSibling を使用して以下を読み取ることができます。 node要素はFF:nextElementSiblingのように記述する必要があります。

上記の説明は、nextElementSibling とpreviousElementSibling を使用して、次の兄弟ノードと前の兄弟ノードを取得することを意味します。改行やスペースなどを削除して、ラベル要素を直接見つけることができます。ただし、次の 2 つの

nextSibling
previousSibling も次の兄弟ノードと前の兄弟ノードを参照しますが、これらは IE で簡単に使用できます
------ ------------- キーワード説明

parseInt変換関数。

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

関連する推奨事項:

ナビゲーションバーでHTTP情報を取得するJavaScriptの共有例

Cookieを取得および削除するJavaScriptの詳細な説明

以上がdom の次のノードを取得する JavaScript メソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート