자바 스크립트 (getElementsByClass를)

Question

나는 기간이

<script type="text/javascript"> 
var oldHTML = document.getElementsByClass('attr-value').innerHTML; 
var filename = oldHTML.toLowerCase().replace(/ /g, '-').replace(/([^0-9a-z-])/g,''); 
var newHTML = "<img src='http://www.example.com/" + filename + ".jpg'>"; 
document.getElementsByClass('attr-value').innerHTML = newHTML; 
</script> 

내가 뭘 잘못하고 있니?

이 있어야한다

Answer 1

(예)

document.getElementsByClassName('attr-value')[0]; 

Answer 2

이 줄이 문제가되는 :

var oldHTML = document.getElementsByClass('attr-value').innerHTML; 

document.getElementsByClass는 document.getElementsByClassName해야하고, 그것이 innerHTML 재산이없는 NodeList을 반환 . NodeList을 반복하면 각 요소의 innerHTML을 볼 수 있습니다. 이 같은

뭔가 (live example) :

<script type="text/javascript"> 
(function() { 
    var list, index, element, filename; 
    list = document.getElementsByClassName('attr-value'); 
    for (index = 0; index < list.length; ++index) { 
     element = list[index]; 
     filename = element.innerHTML.toLowerCase().replace(/ /g, '-').replace(/([^0-9a-z-])/g,''); 
     element.innerHTML = "<img src='http://www.example.com/" + filename + ".jpg'>"; 
    } 
})(); 
</script> 

변경 :

1. 는 익명 함수에 모든 것을 넣고 즉시 전역 심볼을 만드는 피하기 위해, 해당 기능을 실행합니다.
2. 를 사용하여 올바른 getElementsByClassName
3. 루프는 그들을 통해
4. 각 요소의 innerHTML에서 작동합니다.

주 :

• IE가 getElementsByClassName이없는, 그래서 당신은 당신이 IE에 제공하는 스크립트를로드하는 확인하는 것이 좋습니다. 위의 라이브 예제에서는 제공되지 않았지만 Firefox, Chrome 또는 Opera를 사용하십시오. ("IE 용 getElementsByClassName"을 검색하면 선택할 수있는 여러 가지 구현이 있습니다.)
• 위의 script 태그는 HTML 파일에서 처리하려는 모든 요소 뒤에 있어야합니다.

Answer 3

• class="attr attr-value" 당신은
  document.getElementsByClass('attr-value').innerHTML

• document.getElementsByClassName()를 호출하고,