Chrome中的Javascript与Firefox Mozilla不兼容

我制作了一个搜索引擎，它使用javascript而不是sql查询作为后端。它在Chrome上运行良好，但在firefox上不起作用。我认为纯javascript将与所有导航器兼容。有人能告诉我firefox拒绝了哪一部分吗

我试图在JQuery中复制这个搜索引擎，因为JQuery使所有内容都相互兼容，但我在使用每个（）函数时都遇到了一些问题。我不熟悉JQuery

逻辑是：

               <script type="text/javascript">
               function filterByCountry(){
                 var inputField = document.getElementById('search-field');
                 var string = inputField.value;
                 if(string!=""){        
                  var headers =  document.getElementsByClassName('csc-firstHeader');
                  var errorMessage = document.getElementById('failure-message');
                        errorMessage.style.display = "none";
                  var exist=0;
                        for(var i=0;i<headers.length;i++){
                                if( headers[i].innerText.toLowerCase() !=                    string.toLowerCase() ){
                                    var header = headers[i]; 
                                    header = header.parentNode;
                                    header = header.parentNode;
                                    header = header.parentNode;
                                    header.style.display = "none";
                                    header.style.position = "relative";
                                    header.style.top = "0px";
                                    header.style.left = "0px";
                                    header.style.width = "292px";
                                }
                                if( headers[i].innerText.toLowerCase() ==                                                          string.toLowerCase() ){
                                     exist=1;
                                    var header = headers[i]; 
                                    header = header.parentNode;
                                    header = header.parentNode;
                                    header = header.parentNode;
                                    header.style.display = "inline-block";
                                    header.style.position = "absolute";
                                    header.style.top = "110px";
                                    header.style.left = "48px";
                                    header.style.width = "482px";

                                }
                        }
                    if(exist == 0){
                        errorMessage.style.display = "inline-block";
                    }
                    }

               </script>

                    <div id="search-container">
                        <input type="text" id="search-field"  placeholder="search a specific country" />
                        <button id="search-button" onclick="filterByCountry()" > Search </button>



                 </div>

CMS自动在页面上创建有关国家/地区相关文档的内容。 自动生成的代码如下所示：

因此，我针对类“csc firstheader”，它包含对国家的引用，并获取其父级的父级，并使其css属性display='none'

脚本如下所示

               <script type="text/javascript">
               function filterByCountry(){
                 var inputField = document.getElementById('search-field');
                 var string = inputField.value;
                 if(string!=""){        
                  var headers =  document.getElementsByClassName('csc-firstHeader');
                  var errorMessage = document.getElementById('failure-message');
                        errorMessage.style.display = "none";
                  var exist=0;
                        for(var i=0;i<headers.length;i++){
                                if( headers[i].innerText.toLowerCase() !=                    string.toLowerCase() ){
                                    var header = headers[i]; 
                                    header = header.parentNode;
                                    header = header.parentNode;
                                    header = header.parentNode;
                                    header.style.display = "none";
                                    header.style.position = "relative";
                                    header.style.top = "0px";
                                    header.style.left = "0px";
                                    header.style.width = "292px";
                                }
                                if( headers[i].innerText.toLowerCase() ==                                                          string.toLowerCase() ){
                                     exist=1;
                                    var header = headers[i]; 
                                    header = header.parentNode;
                                    header = header.parentNode;
                                    header = header.parentNode;
                                    header.style.display = "inline-block";
                                    header.style.position = "absolute";
                                    header.style.top = "110px";
                                    header.style.left = "48px";
                                    header.style.width = "482px";

                                }
                        }
                    if(exist == 0){
                        errorMessage.style.display = "inline-block";
                    }
                    }

               </script>

                    <div id="search-container">
                        <input type="text" id="search-field"  placeholder="search a specific country" />
                        <button id="search-button" onclick="filterByCountry()" > Search </button>



                 </div>

函数filterByCountry（）{
var inputField=document.getElementById（'search-field'）；
变量字符串=inputField.value；
如果（字符串！=“”）{
var headers=document.getElementsByClassName（'csc-firstHeader'）；
var errorMessage=document.getElementById（'failure-message'）；
errorMessage.style.display=“无”；
var=0；
for（var i=0；iFirefox不支持
innerText
属性

您应该将
textContent
用于Firefox（以及所有支持它的浏览器，因为这是标准的W3C属性）。您可以像这样检查这两种浏览器：

var header = headers[i];
var headerText = header.textContent || header.innerText;
if( headerText.toLowerCase() == string.toLowerCase() ){

除此之外，我没有看到大多数主流浏览器不支持的任何其他函数或属性。作为参考，您可以在浏览器上的错误控制台中查看不起作用的-它应该显示类似于
不能调用函数“toLowerCase”的内容在未定义的
上。这告诉您，
innerText
未定义。然后您可以通过谷歌查看哪些浏览器支持该属性。
您问题的主要部分与JQueryTanks无关！控制台技巧与您预测的完全一致。由于某些原因，现在出现了一些问题，如果条件不起作用，我将升级将jfiddle添加到问题中，以便更容易调试