如何访问嵌套在h1标记中的img标记元素

时间:2015-01-09 03:06:38

标签: javascript

我试图访问嵌套在h1元素中的img元素,以便我可以更改图像的source属性。但是,我似乎无法获得firstChild,nextSibling或nextElementSibling的正确组合。

**注意:**我使用的平台只允许使用内联样式和脚本。我无法将功能放在头脑中。脚本标记被忽略。

我想在点击h1元素时替换图像源。这是我的代码:

<div>
    <h1 onclick="(function()
    {
    if(this.nextElementSibling.style.display !== 'none'){
    this.nextElementSibling.style.display = 'none';
    this.innerHTML = '&nbsp;Click';
    console.log(this.nextElementSibling.nodeName);
    console.log(this.firstChild.nodeName);
    }else{
    this.nextElementSibling.style.display = 'block';
    this.innerHTML = '&nbsp;Click';
    console.log(this.firstChild.nodeValue);
    }
    }).call(this);">&nbsp;<img src="r_arrow.png" />Click</h1>

    <div style="display:none; border:solid 1px red;">
    Some hidden content
    </div>
</div>

我已经使用了console.log,但我仍然无法弄清楚如何获取该img标记。

2 个答案:

答案 0 :(得分:1)

您的img元素是h1的唯一子元素,但是当您使用this.firstChild时,您可能会返回对包含&nbsp;的文本节点的引用。要选择实际元素,您有几个选项,包括:

this.querySelector("img").src = "whatever";
this.getElementsByTagName("img")[0].src = "whatever";

另外,我注意到您的代码包含一行:

this.innerHTML = '&nbsp;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);">&nbsp;<img src="r_arrow.png" />Click</h1>

演示:http://jsbin.com/kubufexabu/1/edit?html,output

答案 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);">&nbsp;<img src="r_arrow.png" />Click</h1>

    <div style="display:none; border:solid 1px red;">
    Some hidden content
    </div>
</div>