在IE / FF中使用getElementsByTagName时，自定义标签的处理方式不同 [英] Custom tags handled differently when using getElementsByTagName in IE / FF
本文介绍了在IE / FF中使用getElementsByTagName时，自定义标签的处理方式不同的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有以下页面：
<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。
When I click the Test button in IE the result is 0, when I click it in FF the result is 0123.
如何在两种浏览器中获得相同的结果？即'0123'。
How can I get the same result in both browsers? i.e. '0123'.
请注意，我已将此修改为尽可能简单的示例。我不能使用jquery或任何第三方库，我需要一个纯Javasscript解决方案。我也无法更改自定义：标签。
Note that I've trimmed this down to as simple an example as possible. I cannot use jquery or any third party libraries, I need a pure Javasscript solution. I also cannot change the custom: tags.
谢谢
推荐答案
<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>
这篇关于在IE / FF中使用getElementsByTagName时，自定义标签的处理方式不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
