我试图访问嵌套在h1元素中的img元素,以便我可以更改图像的source属性。但是,我似乎无法获得firstChild,nextSibling或nextElementSibling的正确组合。
**注意:**我使用的平台只允许使用内联样式和脚本。我无法将功能放在头脑中。脚本标记被忽略。
我想在点击h1元素时替换图像源。这是我的代码:
<div>
<h1 onclick="(function()
{
if(this.nextElementSibling.style.display !== 'none'){
this.nextElementSibling.style.display = 'none';
this.innerHTML = ' Click';
console.log(this.nextElementSibling.nodeName);
console.log(this.firstChild.nodeName);
}else{
this.nextElementSibling.style.display = 'block';
this.innerHTML = ' Click';
console.log(this.firstChild.nodeValue);
}
}).call(this);"> <img src="r_arrow.png" />Click</h1>
<div style="display:none; border:solid 1px red;">
Some hidden content
</div>
</div>
我已经使用了console.log,但我仍然无法弄清楚如何获取该img标记。
答案 0 :(得分:1)
您的img元素是h1的唯一子元素,但是当您使用this.firstChild
时,您可能会返回对包含
的文本节点的引用。要选择实际元素,您有几个选项,包括:
this.querySelector("img").src = "whatever";
this.getElementsByTagName("img")[0].src = "whatever";
另外,我注意到您的代码包含一行:
this.innerHTML = ' Click';
这将覆盖h1元素的现有内容并将其替换为该文本,即它将删除img元素。鉴于你的if / else的两个分支都将.innerHTML
设置为相同的字符串,我认为你不需要它。
这是您的代码的工作版本:
<h1 onclick="(function()
{
var next = this.nextElementSibling,
img = this.querySelector('img');
if(next.style.display !== 'none'){
next.style.display = 'none';
img.src = 'r_arrow.png';
}else{
next.style.display = 'block';
img.src = 'some_other_arrow.png';
}
}).call(this);"> <img src="r_arrow.png" />Click</h1>
答案 1 :(得分:0)
有人给我打电话给querySelector。我的代码现在可以做它需要做的事情。
我的最终代码:
<div>
<h1 onclick="(function()
{
if(this.nextElementSibling.style.display !== 'none'){
this.nextElementSibling.style.display = 'none';
this.querySelector('img').setAttribute('src','r_arrow.png');
console.log(this.nextElementSibling.nodeName);
console.log(this.firstChild.nodeName);
}else{
this.nextElementSibling.style.display = 'block';
this.querySelector('img').setAttribute('src','d_arrow.png');
}
}).call(this);"> <img src="r_arrow.png" />Click</h1>
<div style="display:none; border:solid 1px red;">
Some hidden content
</div>
</div>