getElementsByClassName方法返回异步附加节点的[]，而不是 [英] getElementsByClassName returns [] instead of asynchronous appended node
问题描述
（我问我的问题后，再次第一个被可怕的制定）
(I ask my question again after the first one was terribly formulated)
我面临着以下问题：
<div class="testA" id="test1"></div>
上面这些元素是pdefined $ P $。我现在通过 XMLHtt prequest和放大器加载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 用
request.responseXML.getElementsByTagName("response")[0]
.getElementsByTagName("div")[0]
到pdefined的$ P $ DIV
<div class="testA" id="test1">
最后文件看起来像这样（使用开发工具选中）：
The final document looks like this (checked using development tools):
<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>
当我现在尝试获取元素＆LT; DIV CLASS =colorSelectorID =0-0＆GT; 使用的getElementById（ 0-0）我得到预期的结果。
When I now try to get the element <div class="colorSelector" id="0-0"> using getElementById("0-0") I get the expected result.
不过，使用 getElementsByClassName方法（colorSelector）返回 [] 。
我错过了什么？它是可能的事实节点的类型为元素，而不是一个剩 HTML元素？
Did I miss something? Is it probably a leftover of the fact the nodes were of type Element and not HTMLElement?
推荐答案
下面是一个办法做到这一点的Firefox，歌剧，Chrome和Safari。基本上，你只是做div.innerHTML = div.innerHTML到reinter preT其内容为HTML，这将使得从XML文件中的类属性被视为一个HTML类名。
Here's a way to do it for Firefox, Opera, Chrome and Safari. Basically, you just do div.innerHTML = div.innerHTML to reinterpret its content as HTML, which will make that class attribute from the XML file be treated as an HTML class name.
<!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>
删除this.status === 200如果你是在本地测试在支持本地XHR的浏览器。
Remove the this.status === 200 if you're testing locally in browsers that support xhr locally.
的importNode（）函数似乎没有在IE工作（9例如）。我得到一个模糊的接口不支持的错误。
The importNode() function doesn't seem to work in IE (9 for example). I get a vague "interface not supported" error.
您也可以做这种方式：
var doc = this.responseXML;
var markup = (new XMLSerializer()).serializeToString(doc.getElementsByTagName("response")[0].getElementsByTagName("div")[0]);
div.innerHTML = markup;
只要标记为HTML友好尽可能结束标记的空元素有关。
as long as the markup is HTML-friendly as far as end tags for empty elements are concerned.
这篇关于getElementsByClassName方法返回异步附加节点的[]，而不是的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
