クラス名で子要素を取得する方法は？

クラス= 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が見つかるまでループする必要があると思います。ただし、方法はわかりません。

を使用doc.childNodesして各を反復処理しspan、次にclassName等しいをフィルタリングします4。

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;
    }        
}

​

querySelectorとquerySelectorAllを使用する

var testContainer = document.querySelector('#test');
var fourChildNode = testContainer.querySelector('.four');

IE9以降

;）

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

また、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;
    }

element.querySelector（）を使用します。'myElement'は既に持っている親要素であると仮定しましょう。'sonClassName'は、探している子のクラスです。

let child = myElement.querySelector('.sonClassName');

詳細については、https：//developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorをご覧ください。

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

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

または

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

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

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

または

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

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

ただし、古いブラウザはをサポートしていないことに注意してください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）、ハイフン（ "-"）、およびアンダースコア（ "_"）が後に続きます。

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/

私の意見では、できる限り、Arrayとそのメソッドを使用する必要があります。それらは、DOM /ラッパー全体をループするか、空のものにデータをプッシュするよりもはるかに高速です。ここに提示されているソリューションの大半は、ここで説明されているようにNaiveを呼び出すことができます（素晴らしい記事btw）：

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

私の解決策：（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
})

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

var targetchild = $（ "＃test"）。children（）。find（ "span.four"）;

これは比較的単純な再帰的な解決策です。ここでは幅優先検索が適切だと思います。これは、見つかったクラスに一致する最初の要素を返します。

function getDescendantWithClass(element, clName) {
    var children = element.childNodes;
    for (var i = 0; i < children.length; i++) {
        if (children[i].className &&
            children[i].className.split(' ').indexOf(clName) >= 0) {
            return children[i];
         }
     }
     for (var i = 0; i < children.length; i++) {
         var match = getDescendantWithClass(children[i], clName);
         if (match !== null) {
             return match;
         }
     }
     return null;
}

以下の行を追加すると、親クラスを取得できます。IDがある場合は、を使用すると簡単getElementByIdです。それにもかかわらず、

var parentNode = document.getElementsByClassName("progress__container")[0];

次にquerySelectorAll、親<div>を使用して、divクラスと一致するすべてのをフェッチできます.progress__marker

var progressNodes = progressContainer.querySelectorAll('.progress__marker');

querySelectorAlldivのクラスですべてをフェッチしますprogress__marker

最新のソリューション

const context = document.getElementById('context');
const selected = context.querySelectorAll(':scope > div');

ドキュメンテーション

ES6への2018年6月のアップデート

    const doc = document.getElementById('test');
    let notes = null;
    for (const value of doc) {
        if (value.className === '4') {
            notes = value;
            break;
        }    
    }

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

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

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

ここで、4 =クラス名、スパン=要素タイプ/タグ名、テスト=親ID。

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