클래스 이름으로 요소를 가져 오는 방법

Question

getElementById("ClassName").innerHTML에 해당하는 기능 또는 무엇인가가 getElementByClassName("classname").innerHTML 인 지 알고 싶습니다. 가나는 그래서 CSS 선택기에서 당신이하는 것처럼 당신이 그것을 얻을 수 jQuery를 사용하는 경우

Answer 1

함수 이름에 s이 누락되었습니다. 당신이 polyfill을 찾거나 querySelectorAll (IE8)을 사용해야합니다, 그래서 getElementsByClassName을 지원하지 않습니다 아래

var elements = document.getElementsByClassName("classname"); 

for (var i = 0; i < elements.length; i++) { 
    elements[i].innerHTML = 'foo'; 
} 

IE8과 : getElementsByTagName는 반복 할 필요가 요소 요소의 컬렉션을 반환합니다.

Answer 2

당신이 사용 JQuery와에게

$('.className').html(); 

http://api.jquery.com/html/

Answer 3

을 수행 할 수 있습니다

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script> 

을 다음 ...

$('.classname').each(function() { 
    // get html 
    $(this).html(); 
    // set html 
    $(this).html('something'); 
}); 

innerHTML을 관리하는 편리한 방법도 있습니다.

Answer 4

난 당신이 특정 클래스의 모든 요소를 ​​찾기 위해 직접 (.yourclass 같은) 선택기 CSS 사용할 수있는 JQuery와, 사용하는 것이 좋습니다 : 당신이 JQuery와 사용하지 않으려면

$('.yourclass').doWhatYouWant(); 

, 당신은 사용할 수 있습니다 일반 자바 스크립트 :

document.getElementsByClassName('my-fancy-class') 

하지만 IE8 비 호환성 문제에주의하십시오.

document.querySelector('.cssSelector') 

이 어떤 당신의 CSS 선택기에 응답 하나의 요소을 반환하거나

document.querySelectorAll('.cssSelector') 

반환하는 : 대안 (느린하지만 더 복잡한 CSS 선택기를 구축 할 수 있습니다)로서 당신은 사용할 수 있습니다 대신 여러 요소.