Javascript document.getElementsByTagName("img"); 对比 document.getElementById('testimg');
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5813317/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
document.getElementsByTagName("img"); vs. document.getElementById('testimg');
提问by Chris
Here is my html
这是我的 html
<a href="index.php"><img id="testimg" src="images/logo.png"/></a>
Here is my javascript
这是我的 javascript
function getW(){
var theImg = document.getElementById('testimg');
return theImg;
}
theImg = getW();
if (theImg.width > 119){
document.write(theImg.width);
}
Now when I use this script it out puts the img width
现在，当我使用此脚本时，它会显示 img 宽度
However when I use this script
但是当我使用这个脚本时
function getW(){
var theImg = document.getElementsByTagName("img");
return theImg;
}
theImg = getW();
if (theImg.width > 119){
document.write(theImg.width);
}
It doesn't output anything. What is the difference and why would this 2nd script work?
它不输出任何东西。有什么区别，为什么第二个脚本会起作用？
Thanks!
谢谢！
回答by alex
Because getElementsByTagName()returns a set of multiple elements (note the elements). You'd need to use [0]to get the first matched.
因为getElementsByTagName()返回一组多个元素（注意元素）。您需要使用[0]来获得第一个匹配项。
On the other hand, an idshould always be unique so getElementById()returns a reference to a single element.
另一方面， anid应该始终是唯一的，因此getElementById()返回对单个元素的引用。
回答by meder omuraliev
gEBTN returns a node list. Do theImg[0]for the first element.
gEBTN 返回一个节点列表。做theImg[0]的第一要素。
For your other question, do a forloop on the lengthof the nodeList.
对于您的另一个问题，请在 nodeList的 上for循环length。
回答by BraedenP
getElementsByTagName() returns an array of nodes (elements) that match the tag name you provided. So while your first code example returns a single element, your second one is working with an array.
getElementsByTagName() 返回与您提供的标签名称匹配的节点（元素）数组。因此，当您的第一个代码示例返回单个元素时，您的第二个代码示例正在处理一个数组。
In order to get the image you are looking for through getElementsByTagName, you will need to either need to do an attribute search (finding an appropriate name or id tag, for example) or simply know the order of it on the page.
为了通过 getElementsByTagName 获取您要查找的图像，您需要进行属性搜索（例如，查找适当的名称或 id 标记）或仅知道它在页面上的顺序。
In your example, theImg[0] will return the image you are looking for.
在您的示例中， theImg[0] 将返回您要查找的图像。
回答by HarryAki
The method document.getElementById('testimg')returns a real element object whose id is testimg. the method document.getElementsByTagName("img")will return an array including all element objects whose tag is img.
该方法document.getElementById('testimg')返回一个真实的元素对象，其 id 为testimg。该方法document.getElementsByTagName("img")将返回一个数组，其中包含标签为 的所有元素对象img。
But if there are more than one element whose id is testimg, the method document.getElementById('testimg')will return the first one.
但是如果有多个元素的 id 为testimg，该方法document.getElementById('testimg')将返回第一个。
回答by z666zz666z
Replace on your code:
替换您的代码：
var theImg = document.getElementsByTagName("img");
with this code:
使用此代码：
var theImg = document.getElementsByTagName("img").item(0);
or with this code:
或使用此代码：
var theImg = document.getElementsByTagName("img")[0];
Both are equivalent, pay attention to the .item(0), it is equivalent to [0].
两者是等价的，注意.item(0)，它等价于[0]。
The zero is correct if the desired image is the first, else replace the zero to a correct index.
如果所需图像是第一个，则零是正确的，否则将零替换为正确的索引。
