2013-05-03 3 views
1

내 응용 프로그램에서 클라이언트 쪽에서 javascript를 사용하고 있는데, id, class 및 tagname을 기반으로 요소를 가져와야합니다. id을 사용하여 요소를 가져 오는 데 다음 코드를 사용하고 있습니다.getElementById가 오페라에서 작동하지 않습니다. 12.15

 HTML: 
      <!Doctype> 
      <html> 
      <head> 
      <script> 
      (function (tag,fp,n) { 
      var d = document; 
      a = d.createElement(tag), m = d.getElementsByTagName(tag)[0]; 
      a.async = 1; 
      a.src = fp; 
      m.parentNode.insertBefore(a, m) 
      })('script', 'cs.js', 'cs'); 
      </script> 

     </head> 
     <body> 

      <div id="id">click me</div> 
      </body> 
      </html> 


    javascript(cs.js): 

;(function(w, d) { 
     var util = { 
     getElements : function(selector) { 

     var result = []; 
     var hashIndex = selector.indexOf("#"); 
     var dotIndex = selector.indexOf("."); 

     if(hashIndex > -1){ 
      selector = selector.substring(hashIndex+1); 
      var domElem = d.getElementById(selector); 
      console.log(domElem); 
      if(domElem !=null){ 
       result.push(domElem); 
      } 
     } 
     else if(dotIndex > -1){ 
      selector = selector.substring(dotIndex+1); 
      var domElem = d.getElementsByClassName(selector); 
      if(domElem !=null){ 
       result = domElem; 
      } 

     }else{ 
      var domElem = d.getElementsByTagName(selector); 
      if(domElem !=null){ 
       result = domElem; 
      } 
     } 

     return result; 
    } 
    }; 

    console.log(util.getElements("#id")); 


})(window, document); 

는 크롬, 파이어 폭스에서 제대로 작동하지만 오페라는 null을 제공합니다.

Browser Info: 오페라/9.80 (X11, 리눅스 x86_64의) 프레스토/2.12.388 버전/12.15

이 문제에 대한 어떤 해결 방법?

+2

문제의 실제 예를 나눌 수 있습니까? 한편 [this bin] (http://jsbin.com/ufomam/1/edit)은 W7 용 Opera 12.15에서 완벽하게 작동합니다. –

+1

* complete * reduce 테스트 케이스를 작성하십시오. 우리는 그 snippit에서 무엇이 잘못되었는지 말할 수 없습니다. (그리고 id가'id '라는 가치를 지니고 있다는 것은 그 snippit이 고안되어 작동하지 않는 코드를 반영하지 않을 수도 있음을 암시합니다). – Quentin

+1

FabrícioMatté의 코드는 OS X 용 Opera 12.15에서도 잘 작동합니다. – Quentin

답변

3

귀하의 <script> 요소가 나타납니다.

async을 사용한다고해서 스크립트가 실행되기 전에 DOM 준비 이벤트가 실행되는 것은 아닙니다.

스크립트가 문서의 뒷부분에 나타나도록 이동하거나 이벤트 처리기에 바인딩하십시오.

+0

괜찮습니다. – karthick

0

아마 당신은 "이름"-attribute를 통해 domElement에 이름을 부여 시도 할 수 :

var domElement = document.getElementsByName("element_name")[0]; 
console.log(domElement); 

를 내가 그런 식으로 작동 바랍니다.

+3

모호한 질문에는 대답하지 마십시오. 'getElementsByName'은'getElementById'보다 바람직하지 않습니다. – Bergi

0

귀하의 주장을 테스트 할 수있는 Opera 버전이 없지만 document.querySelector을 대신 사용할 수 있습니다. jsfiddle

업데이트 여기 @bergi

을위한 환경이 파괴 된 예입니다

HTML

<div id="id"></div> 

자바 스크립트

var domElement = document.querySelector("#id"); 
console.log(domElement); 

에서이 의도적 될 수있다 디자인 (누가 아는), 어쨌든 OP는 contr 없습니다 라고 말했다.

document.getElementById = function() { 
    return null; 
}; 

var domElement = document.getElementById("id"); 
console.log(domElement); 

domElement = document.querySelector("#id"); 
console.log(domElement); 
jsfiddle

오 사랑에

, getElementById이 작동하지 않지만, querySelector는 않습니다.

나는 질문이 모호 있다는 의견이 맞지 아니지만, 당신이 선택하고자하는 <div> 요소 앞에 여전히 ...

+0

그런 막연한 질문에는 대답하지 마십시오. 'querySelector'는'getElementById'보다 바람직하지 않습니다 (하나의 특별한 경우가 있습니다 만, 여러분은 그것을 언급해야만합니다) – Bergi

+0

"prefereable"이라고 말하지 않고 "대안으로 고려하십시오"라고 말하면 이것은 특별한 경우입니다 getElementById가 작동하지 않는 경우 그러나 당신이 마음에 무엇이 있었는지 말해 주시겠습니까? – Xotic750

+0

아니요. 'document.getElementById'가 작동하지 않으면 ('null '을 반환하는 경우)'querySelector'도 작동하지 않습니다. – Bergi

관련 문제