Question

我在我的应用程序中在客户端使用javascript，我需要根据id，class和tagname获取元素，我使用以下代码来使用id获取元素。

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

它在chrome，firefox中正常工作，但在opera中它提供null。

Browser Info: Opera / 9.80（X11; Linux x86_64）Presto / 2.12.388版本/ 12.15

此问题的解决方法是什么？

Answer 1

您的<script>元素出现在您尝试选择的<div>元素之前。

使用async并不能保证在脚本运行之前会激活DOM Ready事件。

移动脚本，使其稍后出现在文档中，或将其绑定到事件处理程序。

Answer 2

也许你可以通过“name”-attribute尝试给domElement一个名字并执行：

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

我希望它能以这种方式运作。

Answer 3

我没有那个版本的Opera来测试你的声明，但你可以考虑document.querySelector作为替代。

HTML

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

的Javascript

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

在jsfiddle

上

@bergi的更新

这是一个环境被破坏的例子，这可能是故意的设计（谁知道），无论如何OP都无法控制所述环境。

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

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

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

在jsfiddle

上

哦，亲爱的，getElementById不起作用，但querySelector不起作用。

我并不反对这个问题含糊不清，但仍然......

getElementById在opera 12.15中不起作用

3 个答案: