(第一个问题制定得很厉害后,我再问我一个问题)
我面临以下问题:
<div class="testA" id="test1"></div>
上面编写的元素是预定义的。现在,我通过XMLHttpRequest&Co.加载xml树,并提供以下响应:
<response> <div class="colorSelector" id="0-0"> <div class="gbSelector" id="1-0"> <table style="none" id="2-0"></table> </div> </div> </response>
我现在追加第一个div使用
div
request.responseXML.getElementsByTagName("response")[0] .getElementsByTagName("div")[0]
进入预定义 div
<div class="testA" id="test1">
最终文档如下所示(已使用开发工具检查):
<div class="testA" id="test1"> <div class="colorSelector" id="0-0"> <div class="gbSelector" id="1-0"> <table style="none" id="2-0"></table> </div> </div> </div>
现在,当我尝试<div class="colorSelector" id="0-0">使用元素时,getElementById("0-0")会得到预期的结果。
<div class="colorSelector" id="0-0">
getElementById("0-0")
但是使用getElementsByClassName("colorSelector")退货[]。
getElementsByClassName("colorSelector")
[]
我错过了什么?这可能是节点属于类型Element而不是类型的事实的残余HTMLElement吗?
Element
HTMLElement
这是针对Firefox,Opera,Chrome和Safari的一种方法。基本上,您只需要执行div.innerHTML = div.innerHTML即可将其内容重新解释为HTML,这会将XML文件中的类属性视为HTML类名。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <script> window.addEventListener("DOMContentLoaded", function() { var div = document.getElementsByTagName("div")[0]; var req = new XMLHttpRequest(); req.onreadystatechange = function() { if (this.readyState === 4 && this.status === 200) { var doc = this.responseXML; div.appendChild(document.importNode(doc.getElementsByTagName("response")[0].getElementsByTagName("div")[0], true)); div.innerHTML = div.innerHTML; alert(document.getElementsByClassName("colorSelector").length); } }; req.open("GET", "div.xml"); req.send(); }, false); </script> </head> <body> <div class="testA"></div> </body> </html>
如果要在本地支持xhr的浏览器中进行本地测试,请删除this.status === 200。
importNode()函数似乎在IE中不起作用(例如9)。我收到一个模糊的“不支持接口”错误。
您也可以这样操作:
var doc = this.responseXML; var markup = (new XMLSerializer()).serializeToString(doc.getElementsByTagName("response")[0].getElementsByTagName("div")[0]); div.innerHTML = markup;
只要标记是HTML友好的,就空元素的结束标记而言。