Chrome에서 JavaScript로 XML 문서 읽기

Question

다음은 Internet Explorer에서 JavaScript가 포함 된 XML에서 테이블을 동적으로 생성하기 위해 완벽하게 작동하지만 Chrome에서 최선의 결과를 얻었습니다. ,하지만 여전히 모든 정보를 표시하지 않습니다.이 모든 셀에 실제로 "정의되지 않은"표시 및 크롬 존재하지 않는 childNode 가져 오려고 시도하고 중지합니다. 크롬 디버그가 발생하는 오류는 다음과 같습니다

"Uncaught TypeError: Cannot read property 'childNodes' of undefined"...

사람이 크로스 브라우저 호환 XML 문서에서 HTML 테이블을 구축하는 좋은 사례가 있습니까? 또는 Chrome에서이 작업을 수행하기 위해 변경해야 할 사항을 알고있는 사람이 있습니까? 이 질문과 관련하여 수많은 Q & A Stack Overflow를 읽었으며이 문제를 특별히 다뤘습니다.

var rSecTable = null; 
function buildSecTable() { 
var DASHBOARD = new DASHBOARDUI(); 
var XMLDoc = DASHBOARD.DASHDataSource("DashboardService.asmx/RecentSecurityChanges?"); 
var element = 'secTbl'; 
var rootNode = 'Security'; 
var objNode = 'results'; 
var tblhdClass = 'DASHTableHead'; 
var innerNodes = new Array("time", "search_text", "name"); // for now, these need to be in reverse order 
rSecTable = DASHBOARD.DASHDataTableXML(element, XMLDoc, rootNode, objNode, innerNodes, tblhdClass); 
} 

function DASHBOARDUI() { 

this.DASHDataSource = function (url) { 
    var xmlDoc; 
    var xmlhttp; 
    if (window.XMLHttpRequest) { 
     xmlhttp = new XMLHttpRequest(); 
    } 
    else { 
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.open("GET", url, false); 
    xmlhttp.send(); 
    xmlDoc = xmlhttp.responseXML; 
    return xmlDoc; 
} 

this.isEvenRow = function (value) { 
    if (value % 2 == 0) 
     return 'DASHTableBodyEven'; 
    else 
     return 'DASHTableBodyOdd'; 
} 

this.DASHTableHeaderFormatter = function (text) { 
    var value = ""; 
    if (text == 'name') { 
     value = 'User Name'; 
    } 
    else if (text == 'search_text') { 
     value = 'Search Syntax'; 
    } 
    else if (text == 'time') { 
     value = 'Date\/Time'; 
    } 
    else if (text == 'rights') { 
     value = 'Current Security Rights'; 
    } 
    else if (text == 'Volume_Name') { 
     value = 'Volume Name'; 
    } 
    else if (text == 'Size_On_Disk') { 
     value = 'Volume Size On Disk (GB)'; 
    } 
    else if (text == 'Total_Disk_Space') { 
     value = 'Total Disk Space Where Volume Resides (GB)'; 
    } 
    else { 
     value = text; 
    } 
    return value; 
} 


this.DASHDataTableXML = function (element, xmlDoc, rootNode, objectNode, innerNodes, tblhdClass) { 
    // assign base object node and child count 
    var root = xmlDoc.getElementsByTagName(rootNode)[0]; 
    var rowcount = root.childNodes.length; 
    var oNodeOne = xmlDoc.getElementsByTagName(objectNode)[0]; 
    var colcount = oNodeOne.childNodes.length; 

    // call table element (must be a 'table' tag for now) 
    var dt = document.getElementById(element); 
    dt.className = 'DASHTable'; 

    var hdRow = dt.insertRow(0); 
    hdRow.className = tblhdClass; 
    var i = 0; 
    for (n in innerNodes) { 
     var nCell = hdRow.insertCell(i); 
     nCell.innerHTML = this.DASHTableHeaderFormatter(innerNodes[n]); 
    } 

    for (var j = 0; j < rowcount; j++) { 
     var newRow = dt.insertRow(j + 1); 
     newRow.className = this.isEvenRow(j); 
     for (var y = 0; y < colcount; y++) { 
      var dataCell = newRow.insertCell(y); 
      var base = xmlDoc.getElementsByTagName(objectNode)[j]; 
      var xNodeName = innerNodes[n]; 
      var node = base.childNodes[y]; 
      if (node.nodeType == 1) { 
       var value = node.text; 
       dataCell.innerHTML = value; 
      } 
     } 
    } 
} 

} 

예 XHR 반환 : 내가 찾을 수

<?xml version="1.0" ?> 
<Security> 
<results> 
<name>Bill</name> 
<rights>Scan , Export , Print , Search , Delete , Import , Move , Process , Edit ,  Migrate , Get Information , Apply Watermarks</rights> 
<time>8/29/2011 3:58:30 PM</time> 
</results> 
<results> 
<name>Mary</name> 
<rights>Scan , Export , Print , Search , Delete , Import , Move , Process , Edit , Migrate , Get Information , Apply Watermarks</rights> 
<time>8/19/2011 4:33:45 PM</time> 
</results> 
<results> 
<name>Paul</name> 
<rights>Scan , Export , Print , Delete , Import , Move , Process , Migrate , Get Information , Apply Watermarks</rights> 
<time>8/19/2011 4:33:38 PM</time> 
</results> 
<results> 
<name>Jane</name> 
<rights>Export , Print , Import , Edit , Migrate</rights> 
<time>8/19/2011 4:32:57 PM</time> 
</results> 
<results> 
<name>Walter</name> 
<rights>Scan , Export , Print , Import , Move , Process , Edit</rights> 
<time>8/19/2011 4:31:23 PM</time> 
</results> 
<results> 
<name>Frank</name> 
<rights>Scan , Import , Move , Process , Edit</rights> 
<time>8/19/2011 4:17:44 PM</time> 
</results> 
<results> 
<name>Dan</name> 
<rights>Scan , Import</rights> 
<time>8/19/2011 3:49:18 PM</time> 
</results> 
<results> 
<name>Tom</name> 
<rights>Scan , Export , Print , Search , Import , Move , Process , Edit , Apply Watermarks</rights> 
<time>8/19/2011 3:36:24 PM</time> 
</results> 
<results> 
<name>Russ</name> 
<rights>Scan , Export , Print , Search , Delete , Import , Move , Process , Edit , Migrate , Get Information , Apply Watermarks</rights> 
<time>8/16/2011 4:31:43 PM</time> 
</results> 
<results> 
<name>ADMIN</name> 
<rights>Scan , Export , Print , Search , Delete , Import , Move , Process , Edit , Migrate , Get Information , Apply Watermarks</rights> 
<time>8/16/2011 2:23:47 PM</time> 
</results> 
</Security> 

Answer 1

유일한 오류는

var value = node.text

대신

var value = node.firstChild.nodeValue

012,351,641의 사용이었다

노드는 TextNode 인 단일 자식 Node을 가진 Element이므로이 node.firstChild.nodeValue 패턴을 사용해야합니다.

for (n in ... 대신 for (var n = 0 ... 루프를 사용합니다. 때로는 JS 프레임 워크가 Array 개체를 변경할 수 있기 때문에 불쾌한 부작용이 있습니다.

예를 들어 this jsfiddle link에 있습니다.