javascript - getelementbyid と tagname と classname

Question

純粋な JavaScript を使用して要素を取得する方法を知りたいです。

私は以下のコードを持っています：

        <html>
             <body>
                 <div id="abc" class="xy"> 123 </div>
                <p id="abc" class="xyz"> 123 </p>
              <span id="foo" class="foo2"> foo3 </span>
             </body>
           </html>

ここで私は組み合わせで要素を見つけたい:

find 要素の ID は abc で、タグ名は p です
find 要素の ID は abc で、クラス名は xy です
find 要素にはクラス名 foo2 とタグ名 span があります
find 要素の ID は abc で、クラス名は xy で、タグ名は div です

ページごとに複数の ID を使用できないことはわかっています。しかし、より悪い状況では、異なるタグに同じ ID を使用しても問題ありませんか? htmlで？

score 11 · Accepted Answer

を使用して、より「高度な」選択を取得できますquerySelectorAll。3つの例：

document.querySelectorAll("p#abc")
document.querySelectorAll(".xy#abc")
document.querySelectorAll("span.foo2")

score 2 · Accepted Answer

HTML 内の ID が一意でない場合、それらを使用する Javascript は、いくつのブラウザーでテストしても正しく動作することを保証できません。

ID は一意である必要があるため、探している最初の 2 つのことは getElementById を使用します。

2 つ目は、getElementsByTagName を使用し、結果をループして、それぞれに必要なクラスがあるかどうかを確認します。

score 1 · Accepted Answer

あなたはこのようにすることができます：

document.getElementByXXX --> XXXの代わりに Tag,Name,Calss,ID を入れることができます

要素 = document.getElementById(id);

背景色を変更したい場合の例：

 window.onload = function(){
 document.getElementById("your_id").style.background ="red";
}

ここにいくつかの良い例があります: http://xahlee.info/js/js_get_elements.html

@Raj Mehta その働き：

 <html>
  <head>
   <script>
    function load(){


var myObj1 = document.getElementById("root").getElementsByClassName("xyz");
var myObj2 = document.getElementById("root").getElementsByClassName("xy");
var myObj3= document.getElementById("root").getElementsByClassName("foo2");
var myObj4= document.getElementById("root").getElementsByTagName("p");
var myObj5= document.getElementById("root").getElementsByTagName("div");


myObj1[0].style.color="red";
myObj2[0].style.color="green";
myObj3[0].style.color="skyblue";
myObj4[1].style.color="purple";
myObj5[1].style.color="blue";
}
</script>
</head>
       <body onload="load()" >  
         <div id="root">
                 <div id="abc" class="xy"> 123 <div> here you combine using array[0],[1],[2]... depends on you structure</div>  </div>
                 <p id="abc" class="xyz"> 123 </p>
                <span name="span" id="foo" class="foo2"> foo3 </span>
                <p id="new" name="name"> one more lvl</p>
          </div>
         </body>
       </html>

これかjqueryを使うしか方法はありません。

score 0 · Accepted Answer

それらが一意の ID を持っていても問題ないので (ID がある場合は HTML で必要です)、HTML を次のように因数分解します。

<html>
    <body>
        <div id="abc1" class="xy"> 123 </div>
        <p id="abc2" class="xyz"> 123 </p>
        <span id="foo" class="foo2"> foo3 </span>
    </body>
</html>

次に、3 つの異なる選択について:

document.getElementById("abc1")<div>で id を取得しますabc1。
document.getElementById("abc2")<p>で id を取得しますabc2。
document.getElementById("foo")<span>で id を取得しますfoo。

javascript - getelementbyid と tagname と classname

4 に答える 4

Related

Reference