Question

我正在学习Javascript并玩一些函数，但是对getElementBy标记有困难。

我使用的任何标记，即Id，ClassName，TagName似乎都不起作用，但是如果我使用跟随它的数组的TagName，它似乎工作。

例如：

document.getElementsByTagName("p").style.background = "yellow"; - 不起作用。

document.getElementsByTagName("p")[0].style.background = "yellow"; - 作品

任何帮助我解决这个问题或解释为什么这可能会这样做？

谢谢

Answer 1

那是因为getElementById()旨在查找DOM中具有唯一ID的单个元素。

getElementsByTagName或通过类获取它们可以返回多个元素，因为元素或类在dom中不需要是唯一的。

因此方括号。 document.getElementsByTagName("p")[0]获取DOM中的第一个<p></p>标记。 document.getElementsByTagName("p")[1]将获得第二个找到的段落元素。

编辑：通过<p></p>更改DOM中所有getElementsByTagName元素的背景颜色的示例。

var pElementArray = document.getElementsByTagName("p");
for(var i = 0; i < pElementArray.length; i++) {
    pElementArray[i].style.background = "yellow";
}

此致

Answer 2

document.getElementsByTagName会生成一个DOM元素数组。这就是为什么你使用方括号（[0]）来选择第一个或[1]来选择第二个。

没有document.getElementByTagName('p')功能。

要更改所有段落，您必须首先遍历它们：

var paragraphs = document.getElementsByTagName('p');

for(var i = 0; i < paragraphs.length; i++) {
  var paragraph = paragraphs[i];
  paragraph.style.background = "yellow";
}

请记住，这些都是功能。没有按名称“getElementBy”分组，这只是他们共享的名称。

getElementsByClassName需要一个类名而不是一个标记，并返回许多项。

getElementById要求ID不是标记，只返回一个项目。

来自Huan Zhang

上面的大多数答案已经解释了使用[0]的原因。我只是＆gt;想要详细阐述，因为
document.getElementsByTagName('p')
返回一个数组，
document.getElementsByTagName("p").style.background = "yellow";
基本上是尝试将黄色的背景图像设置到数组上，这显然不起作用。

您可以创建一个简单的for循环，以便在该数组中的每个元素上设置黄色背景作为解决方法。

来自Olivier Krull

@HuanZhang提到的for循环可能如下所示：
var p = document.getElementsByTagName('p')
for(i =0; i<p.length ;i++){
  p[i].style.backgroundColor = 'yellow'
}

Answer 3

@Huan Zhang提到的for循环可能是这样的：

var p = document.getElementsByTagName('p');
for(i =0; i<p.length ;i++){
  p[i].style.backgroundColor = 'yellow';
};

这应该对你有用

getElementById难度大

3 个答案: