JavaScript で要素を取得する 3 つのメソッドの詳細な例

要素を取得するには、要素 ID を使用する、タグ名を使用する、クラス名を使用するという 3 つの一般的な方法があります。

getElementById

DOM は、id 属性に対応するノード オブジェクトを返す getElementById というメソッドを提供します。使用する際は大文字と小文字の区別に注意してください。

これはドキュメントオブジェクト固有の関数であり、このメソッドはドキュメントオブジェクトを通じてのみ呼び出すことができます。使用されるメソッドは次のとおりです:

document.getElementById('demo') //demo是元素对应的ID

このメソッドは、IE6 以降を含む主流のブラウザと互換性があり、大胆に使用できます。

getElementsByTagName

このメソッドは、オブジェクトの配列 (正確には HTMLCollection ですが、本当の意味での配列ではありません) を返します。各オブジェクトは、ドキュメント内の指定されたタグを持つ要素に対応します。 getElementById と同様に、このメソッドはパラメーターを 1 つだけ提供し、そのパラメーターは指定されたタグの名前です。サンプル コードは次のとおりです。

document.getElementsByTagname('li') //li是标签的名字

ドキュメント オブジェクトによって呼び出されることに加えて、このメソッドは、通常の要素によって呼び出されるドキュメント オブジェクトによって呼び出すこともできます。例は次のとおりです。

ネイティブ DOM の場合、最初にタグ オブジェクト、ID または名前などを取得します

例:

<p id="targetp" >2333333</p>
<script>
  var element = document.getElementById("targetp");
  var tagname = element.tagName;
  alert(tagname);
</script>

jQuery を取得

$("#content-header").get(0).tagName

If the object hash Name

<p onclick="alert(&#39;您单击的是：&#39;+this.tagName);">中华人民共和国</p>

var demo = document.getElementById('demo');
var lis = demo.getElementsByTagname('li');

同様に、この方法は主流のブラウザ (IE6 以降でも) と互換性があり、大胆に使用できます。

getElementsByClassName

タグを指定して要素を取得するだけでなく、DOM には、指定したクラス名の要素を取得する getElementsByClassName メソッドも用意されています。ただし、この方法は比較的新しいため、IE6 などの古いブラウザではまだサポートされていません。ただし、ハックを使用して古いブラウザの欠点を補うことはできます。このメソッドの呼び出し方法は以下のとおりです。

document.getElementsByClassName('demo')  //demo为元素指定的class名

getElementsByTagnameと同様に、ドキュメントオブジェクトから呼び出すほか、通常の要素からも呼び出すことができます。

IE6 や 7 などの古いブラウザの場合は、次のハック方法を使用してそれを実現できます:

function getElementsByClassName(node,classname){
    if(node.getElementsByClassName) {
      return node.getElementsByClassName(classname);
    }else {
      var results = [];
      var elems = node.getElementsByTagName("*");
      for(var i = 0; i < elems.length; i++){
        if(elems[i].className.indexOf(classname) != -1){
          results[results.length] = elems[i];
        }
      }
      return results;
    }
  }

上記の要素選択方法に満足しているだけでなく、次のこともできるようにしたい場合は、 JQuery と同じメソッドによる選択 要素を取得するための実装メソッドは、上記の getElementsByClassName と同様です。興味がある場合は、セレクターのセットを自分で実装できます。しかし、結局のところ、上記の 3 つの方法とイベント バブリングを組み合わせるだけで十分だと思います。

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