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

この記事の例では、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 src="/static/imghwm/default1.png"  data-src="#"  class="lazy"  name="pic" alt="pic_0" />
  <img src="/static/imghwm/default1.png"  data-src="#"  class="lazy"  name="pic" alt="pic_1" />
  <img src="/static/imghwm/default1.png"  data-src="#"  class="lazy"  name="pic" 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 プログラミング設計に役立つことを願っています。