如何在不知道ID的情況下從JavaScript中選擇HTML元素？

Question

我的頁面上沒有未知數量的<img>元素，沒有ID，我需要能夠瀏覽它們並根據一些不可預測的因素設置某些屬性。

Answer 1

您可以使用此函數將它們作為數組進行瀏覽：

document.getElementsByTagName('img');

這是一個img元素數組，您可以將其視為使用getElementById()函數（即您仍然可以對元素執行相同的操作，但需要引用元素）：

document.getElementsByTagName('img')[0]

如果你說的因素真的很復雜，我會使用jQuery （它真的很強大）：

$('img[alt]').css('padding', '10px');

這將為每個具有alt屬性的圖像添加10px填充（我希望，因為我因發布幾乎正常工作的代碼而臭名昭着）。

祝好運！

Answer 2

每個人都忘記了document.images ...

for(var i = 0; i < document.images.length; i++) {
  var img = document.images[i];

  if(img.src == "banner.gif") {
     img.alt = "Banner";
  }
  else if(img.alt == "Giraffe") {
     img.title = "15 feet tall!";
  }
}

如果您需要在另一個元素中獲取圖像，可以使用getElementsByTagName ...

var elem = document.getElementById('foo');
var fooImages = elem.getElementsByTagName('img');

Answer 3

使用document.getElementsByTagName() ：

var imgs = document.getElementsByTagName("img");

for(var i = 0; i < imgs.length; i++) {
   var currentImg = imgs[i];
   if (currentImg.somAttr) {
       // do your stuff
   }
}

Answer 4

您可以使用getElementsByTagName獲取img標記的列表：

https://developer.mozilla.org/en/DOM/element.getElementsByTagName

Answer 5

您可以為圖像標記設置名稱屬性，並可以使用document.getElementsByName執行任何操作。

例如

<script type="text/javascript">
function getElements()
  {
  var x=document.getElementsByName("x");
  alert(x.length);
  }
</script>

<input name="x" type="text" size="20" /><br />
<input name="x" type="text" size="20" />

Answer 6

使用jQuery並按元素類型$（“img”）搜索.every（）對每個元素執行am操作

Answer 7

jQuery可能是你最好的選擇。 否則，您將必須遍歷dom樹並手動檢查屬性。 使用jQuery后，您可以按名稱，類，標簽名稱（輸入，圖像等）及其組合等屬性選擇元素。

$("image .className").attr(....

http://www.jquery.com

Answer 8

在不了解更多細節的情況下很難回答這個問題，但您是否考慮過使用Jquery？