使用嵌套的getElementById IE

Question

所以基本上我试图使用javascript为所有不同的浏览器编写自定义标签,但IE 8-9(尚未测试其他)似乎无法正常工作(多么令人惊讶)(我试图使这个功能兼容在Chrome FF IE 8-10中)

如果你在不同的浏览器中测试这个,你会发现结果2在IE中不起作用,我可以让它像在例子中一样工作,但我真的更喜欢使用我的自定义标签名称而不是现有的标签名称.

如何让结果2显示在IE中仍然使用标签名称"drop"？ 另外我真的希望html保持不变,只是对javascript进行更改,提前谢谢

http://jsfiddle.net/9GXtH/

<select id='a' style='display:none'>
    <option id='b'>t1</option>
</select>

<drop id='c' style='display:none'>
    <option id='d'>t2</option>
</drop>

<div id='result'></div>

<div id='result2'></div>


var queue = document.getElementsByTagName("select");
var options = queue.item(0).getElementsByTagName("option");

document.getElementById('result').innerHTML = options.item(0).innerHTML;




var queue = document.getElementsByTagName("select");
var options = queue.item(0).getElementsByTagName("option");

document.getElementById('result').innerHTML = "result: " +   options.item(0).innerHTML;


var queue = document.getElementsByTagName("drop");
var options = queue.item(0).getElementsByTagName("option");

document.getElementById('result2').innerHTML = "result2: " +  options.item(0).innerHTML;

Answer 1

如果你有这样的事情：

    <custom:drop id='c1' style='display:none'>
        <custom:option id='d1'>t2c1</custom:option>
    </custom:drop>
    <custom:drop id='c2' style='display:none'>
        <custom:option id='d2'>t2c2</custom:option>
    </custom:drop>
    <custom:drop id='c3' style='display:none'>
        <custom:option id='d3'>t2c3</custom:option>
    </custom:drop>
    <custom:drop id='c4' style='display:none'>
        <custom:option id='d4'>t2c4</custom:option>
    </custom:drop>

您可以在脚本中迭代它们，如下所示：

$("custom\\:drop custom\\:option").each(function(){
            console.log( $(this).html() );
        });

1