如何获取parentNode

时间:2012-02-08 07:02:56

标签: javascript jquery html css

尝试创建一个获取parentNode的简单文档,然后应用背景颜色。我的getElementByTagName是“p”,因此parentNode将是<body>。然后应该将背景颜色应用于整个文档,对吗?我收到了“预期的对象”错误。

<!--purpose is to use parent node and change the background color-->
<html>
<body>
<head>
<script type="text/javascript" language="javascript">
function changeIt() {
  var node;
  node = document.getElementsByTagName("p").parentNode;
  node.style.background-color = '#0033dd';
}
</script>
</head>

<div id="teams">
  <h1>NFL Teams</h1>

  <h2>NFC North</h2>
  <p>Chicago Bears</p>
  <p>Green Bay Packers</p>
  <p>Minnesota Vikings</p>
  <p>Detroit Lions</p>

  <h2>NFC South</h2>
  <p>New Orleans Saints</p>
  <p>Atlanta Falcons</p>
  <p>Carolina Panthers</p>
  <p>Tampa Bay Buccannears</p>

  <h2>NFC East</h2>
  <p>Dallas Cowboys</p>
  <p>Washington Redskins</p>
  <p>Philadelphia Eagles</p>
  <p>NY Giants</p>

  <h2>NFC West</h2>
  <p>San Francisco 49ers</p>
  <p>Arizona Cardinals</p>
  <p>Seattle Seahawks</p>
  <p>St.Louis Rams</p>
</div>

<input type="button" value="change background color" onClick="changeIt()">   

</body>
</html>

1 个答案:

答案 0 :(得分:5)

背景颜色是个问题。它在javascript中表示为backgroundColor。事实上,我认为css风格的所有javascript符号都使用骆驼而不是破折号。

此外,您需要为javascript选择getElementsByTagName数组的位置以获取其父级。 parentNode通过获取特定元素的父级来工作。不是一系列元素。

function changeIt() {
  var node;
  node = document.getElementsByTagName("p")[0].parentNode;
  node.style.backgroundColor = '#0033dd';
}