web-dev-qa-db-ja.com

GetElementByID-複数のID

doStuff(document.getElementById("myCircle1" "myCircle2" "myCircle3" "myCircle4"));

これは機能しないので、この機能を使用するにはコンマまたはセミコロンが必要ですか？

javascriptarraysgetelementdocument
29
Maurice Tempelsman

document.getElementById()は一度に1つの名前のみをサポートし、ノードの配列ではなく単一のノードのみを返します。いくつかの異なるオプションがあります：

  1. 複数のIDを受け取り、複数の要素を返す独自の関数を実装できます。
  2. document.querySelectorAll() を使用すると、CSSセレクター文字列で複数のIDを指定できます。
  3. これらすべてのノードに共通のクラス名を付け、単一のクラス名でdocument.getElementsByClassName()を使用できます。

各オプションの例：

doStuff(document.querySelectorAll("#myCircle1, #myCircle2, #myCircle3, #myCircle4"));

または：

// put a common class on each object
doStuff(document.getElementsByClassName("circles"));

または：

function getElementsById(ids) {
    var idList = ids.split(" ");
    var results = [], item;
    for (var i = 0; i < idList.length; i++) {
        item = document.getElementById(idList[i]);
        if (item) {
            results.Push(item);
        }
    }
    return(results);
}

doStuff(getElementsById("myCircle1 myCircle2 myCircle3 myCircle4"));
55
jfriend00

これは機能しません。getElementByIdは時間ごとに1つの要素のみを照会します。

document.querySelectorAll("#myCircle1, #myCircle2")を使用して、複数の要素を照会できます。

ES6以降

JavaScriptの新しいバージョンでは、結果を配列に変換して簡単に横断することもできます。

例：

const elementsList = document.querySelectorAll("#myCircle1, #myCircle2");
const elementsArray = [...elementsList];

// Now you can use cool array prototypes
elementsArray.forEach(element => {
    console.log(element);
});

ES6でIDのリストを照会する方法

IDの配列がある場合の別の簡単な方法は、言語を使用してクエリを作成することです。例：

const ids = ['myCircle1', 'myCircle2', 'myCircle3'];
const elements = document.querySelectorAll(ids.map(id => `#${id}`).join(', '));
15
Gabriel Gartz

いいえ、機能しません。

document.getElementById() メソッドは引数を1つだけ受け入れます。

ただし、常にクラスを要素に設定し、代わりに getElementsByClassName() を使用できます。最新のブラウザの別のオプションは、 querySelectorAll() メソッドを使用することです。

document.querySelectorAll("#myCircle1, #myCircle2, #myCircle3, #myCircle4");
8
VisioN

ES5配列メソッドを使用することをお勧めします。

["myCircle1","myCircle2","myCircle3","myCircle4"] // Array of IDs
.map(document.getElementById, document)           // Array of elements
.forEach(doStuff);

次に、doStuffが各要素に対して1回呼び出され、3つの引数を受け取ります：要素、要素の配列内の要素のインデックス、および要素の配列。

3
Oriol

Dunnoは、jsでPHPおよびPythonを使用することができます。これはかなり頻繁に使用できます。

function doStuff(){
    for(i=1; i<=4; i++){
        var i = document.getElementById("myCiricle"+i);
    }
}
1
Vulgo Alias

Vulgoはこのスレッドについて正しい考えを持っています。彼の解決策は最も簡単なものであると思いますが、彼の答えはもう少し詳細なものだったかもしれません。ここに私のために働いたものがあります。私は例を提供しました。

<h1 id="hello1">Hello World</h1>
<h2 id="hello2">Random</h2>
<button id="click">Click To Hide</button>

<script>

  document.getElementById('click').addEventListener('click', function(){
    doStuff();
  });

  function doStuff() {
    for(var i=1; i<=2; i++){
        var el = document.getElementById("hello" + i);
        el.style.display = 'none';
    }
  }

</script>

明らかに、forループ内の整数を変更するだけで、ターゲットにしている要素の数は多くなりますが、この例では2でした。

1
Dan Zuzevich

getElementByIDはまさにそれです-idで要素を取得します。

これらの要素にcircleクラスと getElementsByClassName を与えたいかもしれません

1
sachleen

document.getElementById()は1つの引数のみを取ります。クラス名を付けてgetElementsByClassName()を使用できます。

1
MuhammadHani

それを行う最良の方法は、関数を定義し、DOMから取得したいIDの名前のパラメーターを渡すことです。その後、IDを取得して配列内に格納するたびに、次のことができます。関数を呼び出す

<p id="testing">Demo test!</p>

function grabbingId(element){
    var storeId = document.getElementById(element);

    return storeId;
}


grabbingId("testing").syle.color = "red";
1
EsterlingAccime Youtuber

このwhit配列やforループのようなものを使用できます。

<p id='fisrt'>??????</p>
<p id='second'>??????</p>
<p id='third'>??????</p>
<p id='forth'>??????</p>
<p id='fifth'>??????</p>
<button id="change" onclick="changeColor()">color red</button>
<script>

    var ids = ['fisrt','second','third','forth','fifth'];

    function changeColor() {
        for (var i = 0; i < ids.length; i++) {
          document.getElementById(ids[i]).style.color='red';
 }
    }
</script>
1
Samir Vukasinovic

JQueryなどを使用して、1つの文の要素のコレクションにアクセスします。もちろん、htmlの「head」セクションに次のようなものを入れる必要があります。

<script type='text/javascript' src='url/to/my/jquery.1.xx.yy.js' ...>

ここに魔法があります：

.-まず第一に、あなたが書いたようなIDを持つdivがあるとしましょう。

 ...some html...
 <div id='MyCircle1'>some_inner_html_tags</div>
 ...more html...
 <div id='MyCircle2'>more_html_tags_here</div>
 ...blabla...
 <div id='MyCircleN'>more_and_more_tags_again</div>
 ...zzz...

.-この 'spell'を使用すると、jQueryは文字列「myCircle」全体を含むIDを持つすべてのdiv要素を表すオブジェクトのコレクションを返します。

 $("div[id*='myCircle']")

これですべてです！数字の接尾辞のような詳細を取り除き、単一の文のすべてのdivを操作し、アニメーション化できることに注意してください。

 $("div[id*='myCircle']").addClass("myCircleDivClass").hide().fadeIn(1000);

今すぐブラウザのスクリプトコンソール（F12キーを押します）でこれを証明してください！

0
Eugenio F. Martinez Pacheco

Jfriend00が述べているように、

document.getElementById（）は一度に1つの名前のみをサポートし、ノードの配列ではなく単一のノードのみを返します。

ただし、IDの1つまたはコンマ区切りのリストを指定できる、私が作成したコードの例をいくつか示します。配列内の1つまたは複数の要素を提供します。エラーがある場合、エラーを唯一のエントリとして持つ配列を返します。

function safelyGetElementsByIds(ids){
    if(typeof ids !== 'string') return new Error('ids must be a comma seperated string of ids or a single id string');
    ids = ids.split(",");
    let elements = [];
    for(let i=0, len = ids.length; i<len; i++){
        const currId = ids[i];
        const currElement = (document.getElementById(currId) || new Error(currId + ' is not an HTML Element'));
        if(currElement instanceof Error) return [currElement];
        elements.Push(currElement);
    };
    return elements;
}

safelyGetElementsByIds('realId1'); //returns [<HTML Element>]
safelyGetElementsByIds('fakeId1'); //returns [Error : fakeId1 is not an HTML Element]
safelyGetElementsByIds('realId1', 'realId2', 'realId3'); //returns [<HTML Element>,<HTML Element>,<HTML Element>]
safelyGetElementsByIds('realId1', 'realId2', 'fakeId3'); //returns [Error : fakeId3 is not an HTML Element]
0
Plinderman

私にとっては、このような欠陥を働いた

doStuff(

    document.getElementById("myCircle1") ,

    document.getElementById("myCircle2") ,

    document.getElementById("myCircle3") ,

    document.getElementById("myCircle4")

);
0
Nicola Mihaita