要素 ID および name_JavaScript スキルを通じて要素を直接取得する JavaScript メソッド

WBOY
リリース: 2016-05-16 16:01:44
オリジナル
1665 人が閲覧しました

この記事の例では、JavaScript が要素 ID と名前を通じて要素を直接取得する方法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

一部のサードパーティの JS ライブラリでは、HTML 内の要素をすばやく選択する方法がいくつか簡略化されていることがわかっています。それらは非常に謎に思えますが、実際にはそうではありません。また、js 自体には特別な要素を選択するための簡単なメソッドが用意されています。それを以下に簡単に紹介します。

HTML では、HTML 要素を識別する最も直接的な方法は、通常、name 属性と id 属性です。これらは少し異なります。id はページに対して一意である必要がありますが、名前は繰り返すことができます。

js では、ID 名が組み込み属性またはグローバル変数と同じ名前を持たない場合、その名前は自動的にウィンドウ オブジェクトの属性になり、HTML ページのトップレベル環境では:

this === window
ログイン後にコピー

したがって、次のような HTML 要素コードを記述すると、次のように参照できます:

<input type="button" id="btn_ok" value="Ok" onclick="..." />
//可以这样引用
btn_ok.onclick = function(){};
//或者下面也是一样的
window.btn_ok.style = ...;
ログイン後にコピー

name 属性の場合、form、img、iframe、applet、embed、object など、特定のタイプの HTML 要素のみが同様のメソッドを持ちます。これらの要素では、特定の name 属性を持つ要素にグローバル変数またはドキュメント属性を通じてアクセスできます。同じ name 属性を持つ要素が複数ある場合は、次のコードのような NodeList のような読み取り専用配列オブジェクトが返されます。 >

<div>
  <img name="pic" src="#" alt="pic_0" />
  <img name="pic" src="#" alt="pic_1" />
  <img name="pic" src="#" alt="pic_2" />
</div>
//我们可以这样引用name为pic的元素:
for(x in pic)
 console.log(pic[x].alt);
//或者是非"标准"语法each语句方式
for each(img in pic)
 console.log(img.alt);
ログイン後にコピー
この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。

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