javascript - getElementsByTagName().length 在 Firefox/Internet Explorer 中不起作用

Question

这与另一个问题 ( Chart is rendered in Chrome, but not in FF and IE ) 有关，但是，我认为这本身就是一个有效的问题，希望这有助于更深入地描述问题。

当我偶然用 Firefox 打开我的网页并注意到我的 amChart 图表不再工作时，我意识到了这种行为，我追溯到代码中的这些行:

xmlData = xmlHttp.responseXML;
var x=xmlData.getElementsByTagName("row");
xmlRowCount = x.length;

显然，Firefox 和 Internet Explorer 引擎执行“xmlData.getElementsByTagName”的方式与 Google Chrome(它运行良好)不同，这反过来会导致错误的返回值，从而彻底破坏所有后续代码。

问题是为什么 FF 和 IE 这样做，以及如何防止他们这样做并像 Chrome 一样返回正确的结果。

我很感激任何建议，希望你们中的一些人能帮助我，并且可能知道这种奇怪行为的原因。

最好的问候，

达扎

编辑:为了完成浏览器测试，我还下载并测试了Opera。它在那里工作得很好，这让整个事情变得更加陌生。 IE/FF 与 Chrome/Opera 之间有什么区别？

EDIT2: 这个发现看起来很有希望...我尝试添加第二条 console.log 消息，它打印出相同的内容，但使用 XML 标记的“非 namespace 名称”，在此case z:row 而不是row(row是命名空间名称，z:row是xml文件中的硬标签)。

我发现，Firefox/IE 在非命名空间名称上返回 417 和这个新的 console.log。 Chrome/Opera 返回 0。反之亦然，因此 Chrome 使用命名空间返回 417，而 FF/IE 返回 0。

这让我相信，FF/IE 有一个损坏的 XML DOM，无法利用/使用/检测/... XML 文件中的命名空间。

我想在这种情况下唯一的解决方法是使用不带 namespace 的 XML，以便它适用于所有浏览器？

这是 XML 文件的一个简短示例(取自 Sharepoint API):

 <xml xmlns:s='uuid:BDC6E3F0-6DA3-11d1-A2A3-00AA00C14882'
 xmlns:dt='uuid:C2F41010-65B3-11d1-A29F-00AA00C14882'
 xmlns:rs='urn:schemas-microsoft-com:rowset'
 xmlns:z='#RowsetSchema'>
 <s:Schema id='RowsetSchema'>
 <s:ElementType name='row' content='eltOnly' rs:CommandTimeout='30'>
  <s:AttributeType name='blub' rs:name='blah' rs:number='1'>
     <s:datatype dt:type='string' dt:maxLength='512' />
  </s:AttributeType>
 </s:ElementType>
 </s:Schema>
 <rs:data>
 <z:row blub="blahblah" />
 </rs:data>  
 </xml>

PS:以下是一些可能与问题相关的代码片段:

HTML header 底部的 JS 部分(这是发生错误的地方):

var xmlRowCount;

var arrArt = new Array();
var arrPriority = new Array();
var arrTermin = new Array();
var arrResult = new Array();

var arrCalcPrio = new Array();
var avgCalcPrio = new Array();

var terminCounter = 0;
var avgCounter = 0;

 // button_bereichand button_unterbereich are the values from two dropdown boxes. --> Shouldn't have relevance for the problem at hand. The xmlFile parameter is an well formed and validated XML file within the same domain.

function loadXML(xmlFile, button_bereich, button_unterbereich)
{

    var xmlHttp = null;
    var xmlData;
    var sum = 0;
    var bereich = button_bereich;
    var unterbereich = button_unterbereich;
    var spUnterbereich = "";

    console.log("Bereich: " + bereich);
    console.log("Unterbereich: " + unterbereich);

    arrArt.length = 0;
    arrPriority.length = 0;
    arrCalcPrio.length = 0;

    if (typeof XMLHttpRequest != 'undefined')
    {
        xmlHttp = new XMLHttpRequest();
    }

    if (!xmlHttp)
    {
        try
        {
            xmlHttp = new ActiveXObject("Msxm12.XMLHTTP");

        } 
        catch(e)
        {
            try
            {
                xmlHttp = new ActiveXObject("Mircosoft.XMLHTTP")

            } 
            catch(e)
            {
                xmlHttp = null;
            }
        }
    }

    if (xmlHttp)
    {
        var url = xmlFile;
        xmlHttp.open("GET", url, true);
        xmlHttp.onreadystatechange = function() 
        {
            if (xmlHttp.readyState == 4)
            {
                var txt="";
                xmlData = xmlHttp.responseXML;
                var x=xmlData.getElementsByTagName("row");

                xmlRowCount = x.length;

                // Chrome: 417 | Firefox: 0 | Internet Explorer: 0
                console.log("Rowcount: " + xmlRowCount);

                for (i=0;i<xmlRowCount;i++)
                {
                    // do something with each row
                }

                for (j=0;j<xmlRowCount-1;)
                {   
                    // do something
                }

            }   
            }
        }
        xmlHttp.send();
    }

    return xmlData;
}


// bereichElement and bereichText are the values from two dropdown boxes. --> Shouldn't have relevance for the problem at hand
function getGraph()
{
    chartData.length = 0;
    validateData();

    var bereichElement = document.getElementById("bereich");
    var bereichText = bereichElement.options[bereichElement.selectedIndex].text;
    var unterbereichElement = document.getElementById("unterbereich");
    var unterbereichText = unterbereichElement.options[unterbereichElement.selectedIndex].text;

    var xmlDoc=loadXML("sp_xml.xml", bereichText, unterbereichText);
}

HTML Body 中的 JS(Body 有 body onload="getGraph();"> 参数):

// Actual chart creation (amCharts lib)
 var chart;
        var chartData = [];
        var chartCursor;

        AmCharts.ready(function() {

            // SERIAL CHART
            chart = new AmCharts.AmSerialChart();
            chart.pathToImages = "amcharts/images/";
            chart.dataProvider = chartData;
            chart.categoryField = "date";
            chart.dataDateFormat = "YYYY-MM-DD";
            chart.baseHref = true;

            // listen for "dataUpdated" event (fired when chart is rendered) and call zoomChart method when it happens
            chart.addListener("dataUpdated", zoomChart);

            // AXES
            // category
            var categoryAxis = chart.categoryAxis;
            categoryAxis.parseDates = true; 
            categoryAxis.minPeriod = "DD"; 
            categoryAxis.dashLength = 1;
            categoryAxis.gridAlpha = 0.15;
            categoryAxis.minorGridEnabled = true;
            categoryAxis.axisColor = "#DADADA";

            // value
            var valueAxis = new AmCharts.ValueAxis();
            valueAxis.axisAlpha = 0.2;
            valueAxis.dashLength = 1;
            chart.addValueAxis(valueAxis);

            // GRAPH
            var graph = new AmCharts.AmGraph();
            graph.title = "red line";
            graph.valueField = "visits";
            graph.bullet = "round";
            graph.bulletBorderColor = "#FFFFFF";
            graph.bulletBorderThickness = 2;
            graph.bulletBorderAlpha = 1;
            graph.lineThickness = 2;
            graph.lineColor = "#0db503";
            graph.negativeLineColor = "#b5030d";
            graph.balloonText = "[[category]]<br><b><span style='font-size:14px;'>value: [[value]]</span></b>";
            graph.hideBulletsCount = 50; 
            chart.addGraph(graph);

            // CURSOR
            chartCursor = new AmCharts.ChartCursor();
            chartCursor.cursorPosition = "mouse";
            chart.addChartCursor(chartCursor);

            // SCROLLBAR
            var chartScrollbar = new AmCharts.ChartScrollbar();
            chartScrollbar.graph = graph;
            chartScrollbar.scrollbarHeight = 40;
            chartScrollbar.color = "#FFFFFF";
            chartScrollbar.autoGridCount = true;
            chart.addChartScrollbar(chartScrollbar);

            // WRITE
            chart.write("charts_container");

        });




         // this method is called when chart is first inited as we listen for "dataUpdated" event
        function zoomChart() {
            // different zoom methods can be used - zoomToIndexes, zoomToDates, zoomToCategoryValues
            chart.zoomToIndexes(chartData.length - 40, chartData.length - 1);
        }

         // changes cursor mode from pan to select
        function setPanSelect() {
            if (document.getElementById("rb1").checked) {
                chartCursor.pan = false;
                chartCursor.zoomable = true;

            } else {
                chartCursor.pan = true;
            }
            chart.validateNow();
        }

        function validateData()
        {
            chart.validateData();
            console.log("Data validated");

        }

Answer 1

您的问题是在 http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-A6C9094 中指定的 getElementsByTagName在“tagname”而非本地名称上指定匹配，并且标签名称包含前缀(请参阅 http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-104682815，其中明确说明 tagName 是限定名称)。

这就是 Firefox 和 IE 实现的行为。

据我所知，WebKit 从未正确实现该规范，而是仅匹配 localName。

您可以使用 getElementsByTagNameNS 来解决这个问题，它允许您在所有现代浏览器中仅在本地名称上显式匹配。您可以传入实际的命名空间，如果您不关心命名空间部分，也可以只传入 "*"。