在IE / FF中使用getElementsByTagName时，自定义标签的处理方式不同

Custom tags handled differently when using getElementsByTagName in IE / FF

本文关键字：标签 自定义 处理 方式不 getElementsByTagName IE FF      更新时间：2023-09-26

我有以下页面：

<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中单击"测试"按钮时，结果为0，当我在FF中单击它时，结果为0123。

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

请注意，我已将其缩减为尽可能简单的示例。我不能使用jquery或任何第三方库，我需要一个纯粹的Javasscript解决方案。我也无法更改自定义：标签。

谢谢

<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>

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

相关文章：