admin管理员组文章数量:1327843
(I ask my question again after the first one was terribly formulated)
I face the following problem:
<div class="testA" id="test1"></div>
The above written element is predefined. I now load a xml tree via XMLHttpRequest & Co. delivering the following response:
<response>
<div class="colorSelector" id="0-0">
<div class="gbSelector" id="1-0">
<table style="none" id="2-0"></table>
</div>
</div>
</response>
I now append the first div
using
request.responseXML.getElementsByTagName("response")[0]
.getElementsByTagName("div")[0]
into the predefined 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>
When I now try to get the element <div class="colorSelector" id="0-0">
using getElementById("0-0")
I get the expected result.
But using getElementsByClassName("colorSelector")
returns []
.
Did I miss something? Is it probably a leftover of the fact the nodes were of type Element
and not HTMLElement
?
(I ask my question again after the first one was terribly formulated)
I face the following problem:
<div class="testA" id="test1"></div>
The above written element is predefined. I now load a xml tree via XMLHttpRequest & Co. delivering the following response:
<response>
<div class="colorSelector" id="0-0">
<div class="gbSelector" id="1-0">
<table style="none" id="2-0"></table>
</div>
</div>
</response>
I now append the first div
using
request.responseXML.getElementsByTagName("response")[0]
.getElementsByTagName("div")[0]
into the predefined 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>
When I now try to get the element <div class="colorSelector" id="0-0">
using getElementById("0-0")
I get the expected result.
But using getElementsByClassName("colorSelector")
returns []
.
Did I miss something? Is it probably a leftover of the fact the nodes were of type Element
and not HTMLElement
?
-
Are the nodes actually mented out? If not, what is the context from which you're calling
getElementsByClassName
? – user113716 Commented Sep 30, 2011 at 17:06 -
1
The real question is, why would
GetElementById
be getting something that is mented out? Are you sure it is returning something? – ThatMatthew Commented Sep 30, 2011 at 17:15 -
1
@ThatMatthew: OP has verified that
.getElementsByClassName
returns[]
, which probably means the console is being used to verify. I'd guess that either the code ments aren't actually there, or there's another element on the page with the same ID. – user113716 Commented Sep 30, 2011 at 17:21 - Yes, those are my two guesses as well. – ThatMatthew Commented Sep 30, 2011 at 17:27
- Is there any reason why this topic is tagged as XML ? I guess you'll need to provide a demo, there are only 2 options so far: both method return results or none. – Dr.Molle Commented Sep 30, 2011 at 17:33
6 Answers
Reset to default 3colorSelector
is mented out. JavaScript only works within the DOM, and mented out portions aren't in the DOM.
Since you said that your getElementById("0-0")
is successful, then clearly you don't actually have the nodes mented out.
I'm guessing you're doing:
document.getElementById("0-0").getElementsByClassName('colorSelector');
...which will not work because the element selected by ID does not have any descendants with that class.
Since you show HTML ments in the markup, I'd also wonder if you have some different element on the page with the ID "0-0"
. Take a look for that.
If your nodes are actually mented out, you'll need to first select the ment, and replace it with the markup contained inside:
var container = document.getElementById('test1'),
ment = container.firstChild;
while( ment && ment.nodeType !== 8 ) {
ment = ment.nextSibling;
}
if( ment ) {
container.innerHTML = ment.nodeValue;
}
...resulting in:
<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>
...but there again, this doesn't seem likely since your getElementsById
does work.
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>
Remove the this.status === 200 if you're testing locally in browsers that support xhr locally.
The importNode() function doesn't seem to work in IE (9 for example). I get a vague "interface not supported" error.
You could also do it this way:
var doc = this.responseXML;
var markup = (new XMLSerializer()).serializeToString(doc.getElementsByTagName("response")[0].getElementsByTagName("div")[0]);
div.innerHTML = markup;
as long as the markup is HTML-friendly as far as end tags for empty elements are concerned.
<!--<div class="colorSelector" id="0-0">
<div class="gbSelector" id="1-0">
<table style="none" id="2-0"></table>
</div>
</div>-->
The above code is gray for a reason: it's a ment. Comments aren't parsed by the browser at all and have no influence on the page whatsoever.
You'll have to parse the HTML, read the ments, and make a new DOM object with the contents of the ment.
Please describe what you are doing with the returned results. There is a significant difference between a nodeList and a node, nodeLists are LIVE.
So if you assign a nodeList returned by getElementsByClassName()
(or similar) to a variable, this variable will change when you remove the nodes inside the nodeList from the DOM.
I now append the first div
How do you do that? What you have in the responseXML
are XML elements, and not HTML elements.
You shouldn't be able to
appendChild
them into a non-XHTML HTML document;actually you shouldn't be able to
appendChild
them into another document at all, you're supposed to useimportNode
to get elements from one document to another, otherwise you should getWRONG_DOCUMENT_ERR
;even if you managed to insert them into an HTML due to browser laxness, they're still XML elements and are not semantically HTML elements. Consequently there is nothing special about the
class
attributes; just having that name doesn't make the attribute actually represent a class.getElementsByClassName
won't return elements just because they have attributes with the nameclass
; they have to be elements whose language definition associates the attributes with the concept of classness (which in general means HTML, XHTML or SVG).
(The same should be true of the id
attributes; just having an attribute called id
doesn't make it conceptually an ID
. So getElementById
shouldn't be working. There is a way to associate arbitrary XML attributes with ID-ness, which you don't get with class-ness, by using an <!ATTLIST
declaration in the doctype. Not usually worth bothering with though. Also xml:id
is a special case, in implementations that support XML ID.)
You could potentially make it work if you were using a native-XHTML page by putting suitable xmlns
attributes on the content to make it actual-XHTML and not just arbitrary-XML, and then using importNode
. But in general this isn't worth it; it tends to be simpler to return HTML markup strings (typically in JSON), or raw XML data from which the client-side script can construct the HTML elements itself.
本文标签: javascriptgetElementsByClassName returnsinstead of asynchronous appended nodeStack Overflow
版权声明:本文标题:javascript - getElementsByClassName returns [] instead of asynchronous appended node - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742216727a2434703.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论