JavaScript 获取子元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10567709/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript get child element
提问by redacted
Why this does not work in firefox i try to select the category and then make subcategory visible.
为什么这在 Firefox 中不起作用我尝试选择类别，然后使子类别可见。
<script type="text/javascript">
function show_sub(cat) {
var cat = document.getElementById("cat");
var sub = cat.getElementsByName("sub");
sub[0].style.display='inline';
}
</script>
-
——
<ul>
<li id="cat" onclick="show_sub(this)">
Top 1
<ul style="display:none" name="sub">
<li>Sub 1</li>
<li>Sub 2</li>
<li>Sub 3</li>
</ul>
</li>
<li>Top 2</li>
<li>Top 3</li>
<li>Top 4</li>
</ul>
EDIT Answer is:
编辑答案是：
<script type="text/javascript">
function show_sub(cat) {
cat.getElementsByTagName("ul")[0].style.display = (cat.getElementsByTagName("ul")[0].style.display == "none") ? "inline" : "none";
}
</script>
回答by mkruzil
ULs don't have a name attribute, but you can reference the ul by tag name.
UL 没有名称属性，但您可以通过标签名称引用 ul。
Try replacing line 3 in your script with this:
尝试用以下内容替换脚本中的第 3 行：
var sub = cat.getElementsByTagName("UL");
回答by David says reinstate Monica
I'd suggest doing something similar to:
我建议做类似的事情：
function show_sub(cat) {
if (!cat) {
return false;
}
else if (document.getElementById(cat)) {
var parent = document.getElementById(cat),
sub = parent.getElementsByClassName('sub');
if (sub[0].style.display == 'inline'){
sub[0].style.display = 'none';
}
else {
sub[0].style.display = 'inline';
}
}
}
document.getElementById('cat').onclick = function(){
show_sub(this.id);
};????
Though the above relies on the use of a classrather than a nameattribute equal to sub.
尽管上述依赖于使用 aclass而不是name属性等于sub。
As to why your original version "didn't work" (not, I must add, a particularly useful description of the problem), all I can suggest is that, in Chromium, the JavaScript console reported that:
至于为什么你的原始版本“不起作用”（不是，我必须补充，一个特别有用的问题描述），我只能建议，在 Chromium 中，JavaScript 控制台报告说：
Uncaught TypeError: Object # has no method 'getElementsByName'.
未捕获的类型错误：对象 # 没有方法“getElementsByName”。
One approach to working around the older-IE family's limitations is to use a custom function to emulate getElementsByClassName(), albeit crudely:
解决旧 IE 系列限制的一种方法是使用自定义函数来模拟getElementsByClassName()，尽管很粗糙：
function eBCN(elem,classN){
if (!elem || !classN){
return false;
}
else {
var children = elem.childNodes;
for (var i=0,len=children.length;i<len;i++){
if (children[i].nodeType == 1
&&
children[i].className == classN){
var sub = children[i];
}
}
return sub;
}
}
function show_sub(cat) {
if (!cat) {
return false;
}
else if (document.getElementById(cat)) {
var parent = document.getElementById(cat),
sub = eBCN(parent,'sub');
if (sub.style.display == 'inline'){
sub.style.display = 'none';
}
else {
sub.style.display = 'inline';
}
}
}
var D = document,
listElems = D.getElementsByTagName('li');
for (var i=0,len=listElems.length;i<len;i++){
listElems[i].onclick = function(){
show_sub(this.id);
};
}?
回答by glarkou
Try this one:
试试这个：
function show_sub(cat) {
var parent = cat,
sub = parent.getElementsByClassName('sub');
if (sub[0].style.display == 'inline'){
sub[0].style.display = 'none';
}
else {
sub[0].style.display = 'inline';
}
}
document.getElementById('cat').onclick = function(){
show_sub(this);
};?
and use this for IE6 & 7
并将其用于 IE6 和 7
if (typeof document.getElementsByClassName!='function') {
document.getElementsByClassName = function() {
var elms = document.getElementsByTagName('*');
var ei = new Array();
for (i=0;i<elms.length;i++) {
if (elms[i].getAttribute('class')) {
ecl = elms[i].getAttribute('class').split(' ');
for (j=0;j<ecl.length;j++) {
if (ecl[j].toLowerCase() == arguments[0].toLowerCase()) {
ei.push(elms[i]);
}
}
} else if (elms[i].className) {
ecl = elms[i].className.split(' ');
for (j=0;j<ecl.length;j++) {
if (ecl[j].toLowerCase() == arguments[0].toLowerCase()) {
ei.push(elms[i]);
}
}
}
}
return ei;
}
}
