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

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

4

15 に答える 15

79

document.getElementById()一度に1つの名前のみをサポートし、ノードの配列ではなく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"));
于 2013-01-18T22:49:12.320 に答える
20

これは機能せず、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(', '));
于 2013-01-18T22:49:22.457 に答える
10

いいえ、機能しません。

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

ただし、いつでも要素にクラスを設定して、getElementsByClassName()代わりに使用することができます。最新のブラウザのもう1つのオプションは、次のquerySelectorAll()方法を使用することです。

document.querySelectorAll("#myCircle1, #myCircle2, #myCircle3, #myCircle4");
于 2013-01-18T22:49:18.433 に答える
3

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

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

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

于 2015-07-03T18:49:54.133 に答える
1

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

circleたぶんあなたはそれらの要素にクラスを与えたいと思うでしょうgetElementsByClassName

于 2013-01-18T22:50:16.190 に答える
1

document.getElementById()引数は1つだけです。それらにクラス名を付けて、を使用できますgetElementsByClassName()。

于 2013-01-18T22:51:21.433 に答える
1

このようなものがjs、PHP、Pythonで機能する場合、私はよく使用しますが、それは可能です。たぶん、次のようなforループを使用します。

function doStuff(){
    for(i=1; i<=4; i++){
        var i = document.getElementById("myCiricle"+i);
    }
}
于 2016-09-15T09:39:26.547 に答える
1

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）を考慮します。

于 2017-02-09T14:53:18.133 に答える
1

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

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

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

    return storeId;
}


grabbingId("testing").syle.color = "red";
于 2017-02-14T05:00:15.983 に答える
1

この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>
于 2018-08-20T20:24:49.007 に答える
0

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

doStuff(

    document.getElementById("myCircle1") ,

    document.getElementById("myCircle2") ,

    document.getElementById("myCircle3") ,

    document.getElementById("myCircle4")

);
于 2013-03-30T10:13:20.450 に答える
0

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...

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

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

これで全部です！数字の接尾辞などの詳細を削除し、1つの文ですべてのdivを操作して、それらをアニメーション化できることに注意してください...Voilá！

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

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

于 2013-11-28T16:30:42.887 に答える
0

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]
于 2019-02-13T17:45:54.957 に答える
-1

これが解決策です

if (
  document.getElementById('73536573').value != '' &&
  document.getElementById('1081743273').value != '' &&
  document.getElementById('357118391').value != '' &&
  document.getElementById('1238321094').value != '' &&
  document.getElementById('1118122010').value != ''
  ) {
code
  }
于 2020-07-18T06:32:15.207 に答える
-5

document.getElementByIDを使用して実行できます。方法は次のとおりです。

function dostuff (var here) {
  if(add statment here) {
  document.getElementById('First ID'));
  document.getElementById('Second ID'));
  }
}

どうぞ！xD

于 2014-10-15T13:44:51.423 に答える