Как выбрать элемент HTML из JavaScript, не зная его идентификатора?

Question

У меня есть неизвестное количество <img> элементов на моей странице без идентификаторов, и мне нужно иметь возможность просматривать их и устанавливать определенные атрибуты на основе ряда непредсказуемых факторов.

Answer 1

Все забывают о 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 2

Вы бы использовали эту функцию для просмотра их в виде массива:

document.getElementsByTagName('img');

Это массив img элементов, и вы можете обращаться с ним так, как если бы вы использовали функцию getElementById() (т.е. вы все еще можете выполнять те же операции над элементами, но вам нужно ссылаться на элемент):

document.getElementsByTagName('img')[0]

Если факторы, о которых вы говорите, действительно сложны, я бы использовал jQuery (это действительно мощно):

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

Это добавит 10px дополнение к каждому изображению с атрибутом alt (надеюсь, я печально известен размещением почти рабочего кода).

Удачи!

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, вероятно, ваш лучший выбор. В противном случае вам придется пройти через дерево и проверить атрибуты вручную. Когда вы используете jQuery, вы можете выбирать элементы по таким атрибутам, как имя, класс, имя тега (входные данные, изображение и т. Д.) И их комбинации.

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

http://www.jquery.com

Answer 7

Используйте jQuery и ищите по типу элемента $ ("img"). Each (), чтобы выполнить операцию am для каждого элемента

Answer 8

Трудно ответить на этот вопрос, не зная больше подробностей, но рассматривали ли вы вопрос об использовании Jquery?