Question

我正在为包含此HTML代码块的页面编写用户脚本。

<span id="mediaSetUfiLikeLink">
    <button class="like_link stat_elem as_link" title="Like this item" type="submit" name="like">
        <span class="default_message">Like</span>
        <span class="saving_message">Unlike</span>
    </button>
</span>

<span>
    <a href="/ajax/sharer/?s=3&appid=2305272732&p[]=1012781954&p[]=2063763" rel="dialog">Share</a>
</span>

我需要在最后 id块中添加span标记。（下面一个）

<span>
    <a href="/ajax/sharer/?s=3&appid=2305272732&p[]=1012781954&p[]=2063763" rel="dialog">Share</a>
</span>

我已经到了这一点，

document.getElementById("mediaSetUfiLikeLink").getElementsByTagName("span")[1];

我尝试使用span这样返回nextSibling

null

有人可以帮我解决这个问题吗？为了再次清楚，我希望“访问”上一个document.getElementById("mediaSetUfiLikeLink").getElementsByTagName("span")[1].nextSibling;块，以便我可以为其添加span属性..

P.S - 我需要使用jQuery或任何其他外部库不使用。仅限纯JavaScript。

谢谢

Answer 1

由于这是支持用户脚本的浏览器，因此您可以使用document.querySelector，如下所示：

var node = document.querySelector ("#mediaSetUfiLikeLink + span");

node.id = "myId";

See it in action at jsFiddle

Answer 2

document.getElementById("mediaSetUfiLikeLink").nextElementSibling;

或

function nextElementSibling( elem ) {

    do {

        elem = elem.nextSibling;

    } while( elem && elem.nodeType !== 1 );

    return elem;
}

var elem = nextElementSibling( document.getElementById("mediaSetUfiLikeLink") );

http://jsfiddle.net/tXGQ6/

使用DOM nextSibling

2 个答案: