一致地从 XML 节点获取文本

Question

我知道这已经被问了很多，但我已经听从了建议，我仍然从我的 xml/jQuery 文件中得到一些非常具体、看似不一致的行为： 在我回答这个问题之前，这是我的 jQuery：

$(document).ready(function() {
    var $body = $('body');
    var currentXMLObjects;
    var $currentXMLContainers = new Array();
    var previousXMLObjects;
    $body.append("<div id='content'><h3>Staff Organisational Chart</h1></div>");
    // Load the xml file using ajax 
    $.ajax({
        type: "GET",
        url: "xml/content.xml",
        dataType: "xml",
        success: function (xml) {
            $xml = $(xml);
            console.log(xml.children[0]);
            appendNewContainers(xml.children[0].children);
        }
    });

    function appendNewContainers(children) {
        currentXMLObjects = children;
        console.log("currentXMLObjects.length = "+currentXMLObjects.length);
        for (var x=0;x<currentXMLObjects.length;x++) {
            $currentXMLContainers.push( $( currentXMLObjects[x] ) );
            $("#content").append('<div class="container"><div>' + currentXMLObjects[x].childNodes[1].firstChild.nodeValue + '</div><div>' + currentXMLObjects[x].childNodes[1].firstChild.nodeValue + '</div><div>' + currentXMLObjects[x].childNodes[1].firstChild.nodeValue + '</div></div>');
        }
    }
});

这是 XML：

<content>
    <level name="first name">
        <title>Title 1 Here</title>
        <firstName>First Name 1</firstName>
        <lastName>Last Name 1</lastName>
        <contact>Active</contact> 
    </level>
    <level name="second name">
        <title>Title 2 Here</title>
        <firstName>First Name 2</firstName>
        <lastName>Last Name 2</lastName>
        <contact>Active</contact>
    </level>
    <level name="third name">
        <title>Title 3 Here</title>
        <firstName>First Name 3</firstName>
        <lastName>Last Name 3</lastName>
        <contact>Active</contact>
    </level>
    <level name="fourth name">
        <title>Title 4 Here</title>
        <firstName>First Name 4</firstName>
        <lastName>Last Name 4</lastName>
        <contact>Active</contact>
    </level>
    <level name="fifth name">
        <title>Title 5 Here</title>
        <firstName>First Name 5</firstName>
        <lastName>Last Name 5</lastName>
        <contact>Active</contact>
    </level>
</content>

现在我要做的是从标题、名字和姓氏节点中获取文本，并将它们附加到 div 到包含的 div 中。

我花了一段时间，尝试了 .childNodes[0]、firstChild 和 nodeValue 的各种排列，才意识到我可以使用 currentXMLObjects[x] 中的索引“1”来获取每个“标题”的文本。 childNodes[1]... 问题是我似乎无法访问 firstName 和 lastName 节点。我已经尝试了所有我能想到的安排：

currentXMLObjects[x].childNodes[1].childNodes[1].nodeValue 抛出空错误，如下所示： currentXMLObjects[x].childNodes[0].childNodes[1].nodeValue

currentXMLObjects[x].childNodes[1].nodeValue 返回并附加'null'，并且

currentXMLObjects[x].childNodes[2].nodeValue 不附加任何内容。

类似地，任何缺少中间 'childNodes[n]' 的组合都返回 null 或根本不返回任何内容。

有人知道这里发生了什么吗？我很惊讶“标题”节点似乎如此深入地嵌套在 XML 中。发送到“appendNewContainers”函数的节点列表已经被深入研究。但是在较浅的深度上寻找“级别”元素的子节点是行不通的。

任何帮助，非常感谢。 干杯。

Answer 1

你为什么不使用 jQuery 来处理 xml 数据呢？查看此示例（使用您当前的 xml 结构）：jsFiddle

var $target = $('content');
$target.children().each(function(){
    $body.append($(this).attr('name') + "<br />");
    $body.append($('title', this).text() + "<br />");
    $body.append($('lastName', this).text() + "<br />");
    $body.append($('contact', this).text() + "<br />");
    $body.append('<br /><br/>');
});

编辑：

使用您的代码结构（包括使用 jQuery 的示例）：jsFiddle

var xml = $('content');

appendNewContainers(xml[0].children);

function appendNewContainers(children) {
    currentXMLObjects = children;

    for (var x= 0; x < currentXMLObjects.length; x++) {
        $("#content").append(
            '<div class="container"><div>' + currentXMLObjects[x].children[0].innerText + 
            '</div><div>' + currentXMLObjects[x].children[1].innerText + 
            '</div><div>' + currentXMLObjects[x].children[2].innerText + '</div></div>'
        );
    }

    $('#content').append('<br style="margin-bottom: 40px" />');

    // jQuery way using tag names
    $(currentXMLObjects).each(function(){
        $("#content").append(
            '<div class="container"><div>' + $('title', this).text() + 
            '</div><div>' + $('firstName', this).text() + 
            '</div><div>' + $('lastName', this).text() + '</div></div>'
        );
    });
}

Answer 2

将检索到的 xml 附加到文档中并使用 querySelectors 查询内容是一个想法吗？类似的东西（简单的没有 jQuery 示例，但应该很容易使用 jQuery 来附加 xml 并查询它）：

var xml = document.querySelector('content');

var names = document.querySelectorAll('[name]');
var result = document.querySelector('#result');

[].slice.call(names).forEach(
  function(nameElement) {
    result.textContent += 
      nameElement.querySelector('firstName').textContent + ' ' +
      nameElement.querySelector('lastName').textContent +
      '\n';
  } 
);

content {
  display: none;
 }

<pre id="result"></pre>

<content>
    <level name="first name">
        <title>Title 1 Here</title>
        <firstName>First Name 1</firstName>
        <lastName>Last Name 1</lastName>
        <contact>Active</contact> 
    </level>
    <level name="second name">
        <title>Title 2 Here</title>
        <firstName>First Name 2</firstName>
        <lastName>Last Name 2</lastName>
        <contact>Active</contact>
    </level>
    <level name="third name">
        <title>Title 3 Here</title>
        <firstName>First Name 3</firstName>
        <lastName>Last Name 3</lastName>
        <contact>Active</contact>
    </level>
    <level name="fourth name">
        <title>Title 4 Here</title>
        <firstName>First Name 4</firstName>
        <lastName>Last Name 4</lastName>
        <contact>Active</contact>
    </level>
    <level name="fifth name">
        <title>Title 5 Here</title>
        <firstName>First Name 5</firstName>
        <lastName>Last Name 5</lastName>
        <contact>Active</contact>
    </level>
</content>