JavaScript通过链接更改div颜色

Question

这看起来很简单，但我是JavaScript的新手。我的页面上有一个链接。当您单击此链接时，会发生两件事。 1）使用html页面跳转到页面上引用的锚标记的位置。 2）保存链接的div改变其背景颜色。

HTML

<a href="#abcd"  onclick="makeRed(this.href);">Link to div on page</a>

<div id="abcd">
    <a name="abcd">Not a clickable link.</a>
</div>

JS

function makeRed(x) {
var highlight=x.slice(-4);
document.getElementsByName(highlight).parentNode.style.backgroundColor="red";
}

Firebug告诉我document.getElementsByName（突出显示）.parentNode未定义，这是我感到困惑的地方。

Answer 1

替换

document.getElementsByName(highlight).parentNode.style.backgroundColor="red";

与

document.getElementsByName(highlight)[0].parentNode.style.backgroundColor="red";

因为getElementsByName返回一个数组

Answer 2

getElementsByName返回一个列表（因此“... Elements ...”，而不是“...... Element ...”）。列表没有parentNodes。

使用getElementById引用具有给定id的单个元素，或者迭代getElementsByName返回的列表，直到找到您要查找的确切元素。