web-dev-qa-db-ja.com

IDで複数の要素を取得します

次のように、本文全体にアンカータグがあるページがあります。

<a id="test" name="Name 1"></a>
<a id="test" name="Name 2"></a>
<a id="test" name="Name 3"></a>

IDは常に同じですが、名前が変更されます。

たとえば、これらのアンカータグの名前のリストを作成する必要があります。 Name 1、Name 2、Name3。これが私がこれまでに得た場所です。

document.write(document.getElementById("readme").name);

これにより、最初のアンカータグの名前が書き込まれます。 Idで複数の要素を取得する方法が必要です。

どんな助けも大歓迎です。

javascripthtmlelements
45
osnoz

マークアップを変更できる場合は、代わりにclassを使用できます。

<!-- html -->
<a class="test" name="Name 1"></a>
<a class="test" name="Name 2"></a>
<a class="test" name="Name 3"></a>

// javascript
var elements = document.getElementsByClassName("test");
var names = '';
for(var i=0; i<elements.length; i++) {
    names += elements[i].name;
}
document.write(names);

jsfiddle demo

78
erickb

他の人が言うかもしれないこととは反対に、複数の要素に同じIDを使用してもページのロードは停止しませんが、IDによって要素を選択しようとすると、返される要素は指定されたIDを持つ最初の要素のみです。同じIDを使用することは、有効なHTMLでさえないことは言うまでもありません。

そのため、重複したid属性を使用しないでください。必要だと思っているなら、代わりにclassを探しています。例えば：

<div id="div1" class="mydiv">Content here</div>
<div id="div2" class="mydiv">Content here</div>
<div id="div3" class="mydiv">Content here</div>

指定された各要素のIDが異なるが、クラスは同じであることに注意してください。上記で行ったこととは反対に、これは正当なHTML構文です。 '.mydiv'（ドットはクラスを意味します）に使用するCSSスタイルは、同じクラスを持つ個々の要素ごとに正しく機能します。

Snipplrから少し助けを借りて、これを使用して特定のクラス名を指定することですべての要素を取得できます。

function getAllByClass(classname, node) {

    if (!document.getElementsByClassName) {
        if (!node) {
            node =  document.body;
        }

        var a = [],
            re = new RegExp('\\b' + classname + '\\b'),
            els = node.getElementsByTagName("*");

        for (var i = 0, j = els.length; i < j; i++) {
            if (re.test(els[i].className)) {
                a.Push(els[i]);
            }
        }
    } else {
        return document.getElementsByClassName(classname);
    }

    return a;
}

上記のスクリプトは配列を返すので、それに合わせて適切に調整してください。

19
Shaz

IDを重複させることはできません。 IDは一意であると想定されています。代わりに特殊なクラスを使用することもできます。

13
Daniel A. White

現在、この方法で同じid属性を持つ要素を選択できます。

document.querySelectorAll('[id=test]');

または、jQueryを使用したこの方法：

$('[id=test]');

CSSセレクタ#test { ... }は、id = "test"を持つすべての要素に対しても機能するはずです。ただし、唯一のこと：document.querySelectorAll('#test')（または$('#test')）-このIDを持つ最初の要素のみを返します。それは良いですか、そうではありません-私は言うことができません。しかし、時には nique id standart に従うことは困難です。

たとえば、HTML-idを持つコメントウィジェットと、これらのHTML-idを使用するJSコードがあります。遅かれ早かれ、このウィジェットを何度もレンダリングして、異なるオブジェクトを単一のページにコメントする必要があります：そして、ここでは標準が壊れます（多くの場合、組み込みコードを書き換える時間がないか許可されていません）。

12
Alexander Goncharov

ここに私が思いついた関数があります

function getElementsById(elementID){
    var elementCollection = new Array();
    var allElements = document.getElementsByTagName("*");
    for(i = 0; i < allElements.length; i++){
        if(allElements[i].id == elementID)
            elementCollection.Push(allElements[i]);

    }
    return elementCollection;
}

どうやら、プロトタイプ、およびおそらく他の主要なJavaScriptライブラリによってサポートされる規則があります。

しかし、ドル記号関数が事実上document.getElementById（）へのショートカットになっていることを発見しました。それに直面しましょう、私たちはすべてdocument.getElementById（）をたくさん使用します。入力に時間がかかるだけでなく、コードにもバイトが追加されます。

プロトタイプの関数は次のとおりです。

function $(element) {
  if (arguments.length > 1) {
    for (var i = 0, elements = [], length = arguments.length; i < length; i++)
      elements.Push($(arguments[i]));
    return elements;
  }
  if (Object.isString(element))
    element = document.getElementById(element);
  return Element.extend(element);
}

[ソース]

10
John

QuerySelectorAllを使用する必要があります。これにより、すべてのオカレンスが配列に書き込まれ、forEachを使用して個々の要素を取得できます。

document.querySelectorAll('[id=test]').forEach(element=> 
    document.write(element);
});
3
akolade tinubu

HTMLを有効に保つことに信心がない場合は、複数の要素に同じIDを使用すると便利なユースケースを見ることができます。

1つの例はテストです。多くの場合、特定のクラスを持つすべての要素を見つけることで、テスト対象の要素を特定します。ただし、純粋にテスト目的でクラスを追加していることに気付いた場合、それは間違っていると主張します。クラスは識別用ではなく、スタイル用です。

IDが識別用である場合、なぜmust特定の識別子を持つことができる要素は1つだけですか？特に、再利用可能なコンポーネントを備えた今日のフロントエンドの世界では、識別にクラスを使用したくない場合は、IDを使用する必要があります。ただし、コンポーネントの倍数を使用する場合、同じIDを持つ複数の要素があります。

大丈夫だと言っています。それがあなたにとって忌み嫌いなら、それでいいのです、私はあなたの見解を理解しています。同意しないで先に進むことに同意しましょう。

ただし、同じ名前のすべてのIDを実際に見つけるソリューションが必要な場合は、次のようにします。

function getElementsById(id) {
    const elementsWithId = []
    const allElements = document.getElementsByTagName('*')
    for(let key in allElements) {
        if(allElements.hasOwnProperty(key)) {
            const element = allElements[key]
            if(element.id === id) {
                elementsWithId.Push(element)
            }        
        }
    }
    return elementsWithId
}

編集、ES6 FTW：

function getElementsById(id) {
    return [...document.getElementsByTagName('*')].filter(element => element.id === id)
}
2
sypl

同じIDを持つ複数のElementは許可されません。getElementByIdは、elementIdによってIDが指定されたElementを返します。そのような要素が存在しない場合、nullを返します。複数の要素がこのIDを持つ場合、動作は定義されません。

2
CloudyMarble

Idで複数の要素を取得するには、要素を特定します。例えば

<div id='id'></div>
<div id='id'></div>
<div id='id'></div>

JQueryを使用している場合は、すべてを選択することができます

$（ "div＃id"）

。これにより、ロジックに基づいてループする要素の配列が取得されます。

1
Felix Jacob Borlongan

querySelectorAllを使用すると、cssセレクターを使用して、同じIDなしで必要な要素を選択できます。

var elems = document.querySelectorAll("#id1, #id1, #id3");
1
Yamid Ospina

「id」は要素の一意のIDを指定し、クラスは要素の1つ以上のクラス名を指定します。したがって、「id」の代わりに「Class」を使用する方が適切です。

0
user2063791