使用嵌套的getElementById IE

所以基本上我试图使用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;

如果你有这样的东西：

<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() );
});

自定义标签很难，因为浏览器不知道它们是什么，所以它们实际上没有任何可以依赖的默认属性或方法

我使用了xhtml 1.1 Doctype声明

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

实际上，它在<!DOCTYPE html>上运行良好，但该页面无法通过W3C进行验证。自定义标记永远不会被验证，因为验证器不知道它们是什么。

为我的自定义DTD添加了适当的名称空间和一个额外的名称空间：url是不相关的，它只是一个标识符。

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:custom="http://www.custom_dtd.org/xhtml">
在头中包含charset和jQuery。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="jquery.js"></script>
我没有在自定义标记上使用getElementsByTagName，而是使用了jQuery，因为它们是自定义标记，DTD不知道自定义标记有什么或没有什么方法或属性，默认情况下它们不会得到任何方法或属性。但jQuery发现它们都很好。据我所知，jQuery搜索可用的标记并查找匹配项(因此regex查找转义)。
我发现这适用于Chrome、FF和IE8/9/10+，而不是IE7，但谁在乎呢？

正文内容：

<select id='a' style='display:none'>
<option id='b'>t1</option>
</select>
// our custom tags
<custom:drop id='c' style='display:none'>
<custom:option id='d'>t2</custom:option>
</custom:drop>
<div id='result'></div>
<div id='result2'></div>
<script type="text/javascript">
var queue = document.getElementsByTagName("select");
var options = queue.item(0).getElementsByTagName("option");
document.getElementById('result').innerHTML = options.item(0).innerHTML;
// have to escape the colon
var queue = $("custom\:drop");
var options = queue.find("custom\:option");
document.getElementById('result2').innerHTML = options.html();
</script>

相关内容

最新更新

热门标签：