2

我有以下页面：

<html>
<head>
    <title>Test</title>
    <script type="text/javascript">
        function BuildTree() {
            var total = 0;
            var pages = document.getElementsByTagName('custom:page');
            var questions = pages[0].getElementsByTagName('custom:question');
            for (var i = 0; i < questions.length; ++i) {
                var question = questions[i];
                var val = question.getAttribute('value')
                total += val;
            }
            alert("Total: " + total);
        };
    </script>
</head>
<body>
    <custom:pages>
        <custom:page>
            <custom:question  value="1">aaa</custom:question>
            <custom:question  value="2">bbb</custom:question>
            <custom:question  value="3">ccc</custom:question>
        </custom:page>
        <custom:page>
            <custom:question  value="1">aaa</custom:question>
            <custom:question  value="2">bbb</custom:question>
            <custom:question  value="3">ccc</custom:question>
        </custom:page>
    </custom:pages>
    <input id="btnTest" type="button" value="Test" onclick="BuildTree();" />
</body>
</html>

当我在 IE 中单击 Test 按钮时，结果为 0，当我在 FF 中单击它时，结果为 0123。

如何在两个浏览器中获得相同的结果？即'0123'。

请注意，我已将其精简为尽可能简单的示例。我不能使用 jquery 或任何第三方库，我需要一个纯 JavaScript 解决方案。我也无法更改 custom: 标签。

谢谢

4

2 回答 2

2 
<html xmlns:custom="http://www.test.com">
<head>
    <title>Test</title>
    <script type="text/javascript">
        // We want to find all the question tags withing a page tag
        // getElementsByTagName works fine when using standard HTML tags within each other
        function BuildTree() {
            var total = 0;
            // These two do not work in IE but do work in FF
            //var pages = document.getElementsByTagName('custom:page');
            //var questions = pages[0].getElementsByTagName('custom:question');

            // These only work in FireFox (and require a namespace)
            //var pages = document.getElementsByTagNameNS('http://www.test.com', 'page'); // FF only
            //var questions = pages[0].getElementsByTagNameNS('http://www.test.com', 'question'); // FF only

            // Adding a namespace ' xmlns:custom="http://www.test.com"' to the document and removing the 'custom:' from the search works correctly
            var pages = document.getElementsByTagName('page');
            var questions = pages[0].getElementsByTagName('question');

            for (var i = 0; i < questions.length; ++i) {
                var question = questions[i];
                var val = question.getAttribute('value')
                total += val;
            }
            alert("Total: " + total);
        };
    </script>
</head>
<body>
    <custom:pages>
        <custom:page>
            <custom:question value="1">aaa</custom:question>
            <custom:question value="2">bbb</custom:question>
            <custom:question value="3">ccc</custom:question>
        </custom:page>
        <custom:page>
            <custom:question value="1">aaa</custom:question>
            <custom:question value="2">bbb</custom:question>
            <custom:question value="3">ccc</custom:question>
        </custom:page>
    </custom:pages>
    <input id="btnTest" type="button" value="Test" onclick="BuildTree();" />
</body>
</html>
于 2012-05-11T08:51:09.853 回答
1

为了使它工作，您需要制作页面 XHTML 并定义您的自定义命名空间，然后使用getElementsByTagNameNS。也可以使用XSLT 。

于 2012-05-09T12:47:00.363 回答