클래스 이름으로 자식 요소를 얻는 방법?

클래스 = 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"에 대한 검색과 일치해야 정확한 클래스 이름은 "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') {
    }
}

나에게 네 번째 범위를 원하는 것 같습니다. 그렇다면 다음을 수행하십시오.

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 선택기를 사용하여 수행 한 방법입니다. Hank Gay의 제안에 감사드립니다.

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

여기서 four = classname, span = 요소 유형 / 태그 이름, test = 부모 ID

여기YAHOO.util.Dom.getElementsByClassName() 에서 사용 하십시오 .