javascript - クラス名で子要素を取得するには?

Question

クラス = 4 の子スパンを取得しようとしています。要素の例を次に示します。

<div id="test">
 <span class="one"></span>
 <span class="two"></span>
 <span class="three"></span>
 <span class="four"></span>
</div>

私が利用できるツールは、JS と YUI2 です。私はこのようなことができます：

doc = document.getElementById('test');
notes = doc.getElementsByClassName('four');

//or

doc = YAHOO.util.Dom.get('#test');
notes = doc.getElementsByClassName('four');

これらは IE では機能しません。オブジェクト (doc) がこのメソッドまたはプロパティ (getElementsByClassName) をサポートしていないというエラーが表示されます。getElementsByClassName のクロスブラウザー実装の例をいくつか試しましたが、それらを機能させることができず、それでもエラーが発生しました。

私が必要としているのは、クロスブラウザの getElementsByClassName であるか、または doc.getElementsByTagName('span') を使用して、クラス 4 が見つかるまでループする必要があると思います。

score 117 · Accepted Answer

を使用doc.childNodesして、各を反復処理し、等しいspanものをフィルター処理します。className4

var doc = document.getElementById("test");
var notes = null;
for (var i = 0; i < doc.childNodes.length; i++) {
    if (doc.childNodes[i].className == "4") {
      notes = doc.childNodes[i];
      break;
    }        
}

</p>

score 50 · Accepted Answer

受け入れられた回答は、直接の子のみをチェックします。多くの場合、そのクラス名を持つ子孫を探しています。

また、className を含む子が必要な場合もあります。

たとえば、className が<div class="img square"></div>「img」でなくても、className「img」の検索に一致する必要があります。

これらの問題の両方に対する解決策は次のとおりです。

クラスを持つ子孫要素の最初のインスタンスを見つけるclassName

   function findFirstChildByClass(element, className) {
        var foundElement = null, found;
        function recurse(element, className, found) {
            for (var i = 0; i < element.childNodes.length && !found; i++) {
                var el = element.childNodes[i];
                var classes = el.className != undefined? el.className.split(" ") : [];
                for (var j = 0, jl = classes.length; j < jl; j++) {
                    if (classes[j] == className) {
                        found = true;
                        foundElement = element.childNodes[i];
                        break;
                    }
                }
                if(found)
                    break;
                recurse(element.childNodes[i], className, found);
            }
        }
        recurse(element, className, false);
        return foundElement;
    }

score 12 · Accepted Answer

あなたは試すことができます：

notes = doc.querySelectorAll('.4');

また

notes = doc.getElementsByTagName('*');
for (var i = 0; i < notes.length; i++) { 
    if (notes[i].getAttribute('class') == '4') {
    }
}

score 8 · Accepted Answer

私には、4 番目のスパンが必要なようです。もしそうなら、あなたはこれを行うことができます：

document.getElementById("test").childNodes[3]

また

document.getElementById("test").getElementsByTagName("span")[3]

この最後のものは、それを台無しにする可能性のある隠しノードがないことを保証します。

score 5 · Accepted Answer

ただし、古いブラウザはをサポートしていないことに注意してgetElementsByClassNameください。

その後、あなたはすることができます

function getElementsByClassName(c,el){
    if(typeof el=='string'){el=document.getElementById(el);}
    if(!el){el=document;}
    if(el.getElementsByClassName){return el.getElementsByClassName(c);}
    var arr=[],
        allEls=el.getElementsByTagName('*');
    for(var i=0;i<allEls.length;i++){
        if(allEls[i].className.split(' ').indexOf(c)>-1){arr.push(allEls[i])}
    }
    return arr;
}
getElementsByClassName('4','test')[0];

動作しているようですが、HTMLクラスに注意してください

文字で始まる必要があります：AZまたはaz
文字（A-Za-z）、数字（0-9）、ハイフン（ "-"）、およびアンダースコア（ "_"）を続けることができます

score 5 · Accepted Answer

ID の名前の前にgetElementById,#記号を付けずに使用します。次に、spanを使用して子ノードを取得しgetElementsByTagName、それらをループして、適切なクラスを持つノードを見つけます。

var doc = document.getElementById('test');

var c = doc.getElementsByTagName('span');

var e = null;
for (var i = 0; i < c.length; i++) {
    if (c[i].className == '4') {
        e = c[i];
        break;
    }
}

if (e != null) {
    alert(e.innerHTML);
}

デモ: http://jsfiddle.net/Guffa/xB62U/

score 3 · Accepted Answer

In my opinion, each time you can, you should use Array and its methods. They are much, much faster then looping over the whole DOM / wrapper, or pushing stuff into empty array. Majority of solutions presented here you can call Naive as described here (great article btw):

https://medium.com/@chuckdries/traversing-the-dom-with-filter-map-and-arrow-functions-1417d326d2bc

My solution: (live preview on Codepen: https://codepen.io/Nikolaus91/pen/wEGEYe)

const wrapper = document.getElementById('test') // take a wrapper by ID -> fastest
const itemsArray = Array.from(wrapper.children) // make Array from his children

const pickOne = itemsArray.map(item => { // loop over his children using .map() --> see MDN for more
   if(item.classList.contains('four')) // we place a test where we determine our choice
     item.classList.add('the-chosen-one') // your code here
})

score 2 · Accepted Answer

jqueryを使用してこれを行う方法は、次のようなものです..

var targetschild = $("#test").children().find("span.four");

score 1 · Accepted Answer

この質問は数年前のものであり、これにはいくつかの回答がありましたが、誰かに役立つ場合に備えて私のソリューションを追加すると思いました. これは、 user2795540によって与えられた回答と同じ流れであり、配列反復子が含まれます。

クラスを持つ最初の子を取得したいだけの場合は、配列反復子fourを使用できます。findブラウザは ES6 をサポートできる必要があります。または、Babel を使用して JS をすべてのブラウザがサポートするものにコンパイルできます。IE は polyfill なしではこれをサポートしません。

質問で提供したのと同じ詳細を使用すると、次のようになります。

const parentNode = document.getElementById('test');
const childNode = Array.from(parentNode.childNodes).find(({ className }) => className === 'four');

上記のソリューションは、対象とするノードを返し、それをchildNode変数に格納します。

find配列反復子について詳しくは、https: //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find をご覧ください。

score -2 · Accepted Answer

-2

YUI2 にはのクロスブラウザ実装がありgetElementsByClassNameます。

于 2012-08-28T20:33:56.197 に答える

score -3 · Accepted Answer

これが、YUIセレクターを使用して行った方法です。ハンクゲイの提案に感謝します。

notes = YAHOO.util.Dom.getElementsByClassName('four','span','test');

ここで、four =クラス名、span =要素タイプ/タグ名、test=親IDです。

score -4 · Accepted Answer

-4

こちらYAHOO.util.Dom.getElementsByClassName()からご利用ください。

于 2012-08-28T21:26:10.040 に答える

javascript - クラス名で子要素を取得するには?

21 に答える 21

Related

Reference