相关疑难解决方法(0)

我想知道,JavaScript提供了各种方法来从任何元素中获取第一个子元素,但哪个是最好的？最好的,我的意思是:大多数跨浏览器兼容,最快,最全面和可预测的行为.我用作别名的方法/属性列表:

var elem = document.getElementById('container');
var child = elem.children[0];
var child = elem.firstElementChild; // == children[0]

这适用于两种情况:

var child = elem.childNodes[0]; // or childNodes[1], see below

这是形式或<div>迭代的情况.如果我可能遇到文本元素:

var child = elem.childNodes; // treat as NodeList
var child = elem.firstChild;

据我所知,firstChild使用NodeList childNodes,并firstElementChild使用children.我将这个假设建立在MDN参考上:

childNode是对元素节点的第一个子元素的引用,或者null如果没有元素节点的引用.

我猜测,就速度而言,差异(如果有的话)几乎没有,因为firstElementChild它实际上是一个引用children[0],并且children对象已经在内存中了.

扔我的是childNodes对象.我用它来查看表格元素中的表单.虽然children列出了所有表单元素,但childNodes似乎也包含HTML代码中的空格:

console.log(elem.childNodes[0]);
console.log(elem.firstChild);

两个日志 <TextNode textContent="\n ">

console.log(elem.childNodes[1]);
console.log(elem.children[0]);
console.log(elem.firstElementChild);

所有日志<input type="text" …

我正在开发一个有32个孩子的div的项目.我需要创建一个下拉菜单,它将改变每个div和父级的背景.对于没有孩子的项目的其他部分,我一直在使用以下代码:

function changediv(color) {
document.getElementById('div1').style.background = color;
}

HTML:

<select>
<option onClick="changediv('#555');">Hex</option>
<option onClick="changediv('blue');">Colorname</option>
<option onClick="changediv('url(example.com/example.png)');">Image</option>
</select>

我可以为每个孩子添加一个不同的ID(id1,id2,id3,...),但是有32个孩子,我不仅需要添加32个ID,还需要32行Javascript.一定有更好的方法; 以某种方式选择孩子甚至改变选择孩子的实际CSS代码.

谢谢,伊恩