Метод, который вы ищете, называется getElementsByTagName. Возвращает массив элементов в виде списка (который не является массивом).
Обратите внимание, что ваш последний пример .attributes['media'] не возвращает строку, как другие методы. Вместо этого он возвращает узел атрибута.
Теоретически способы доступа к контенту должны быть эквивалентны, но ошибки браузера приводили к другому поведению в реальности. Вероятно, лучше всего использовать уровень абстракции (такую как jQuery), чтобы получить согласованное поведение. Если вы намереваетесь программировать без библиотеки, выбор зависит от вашего вкуса, однако я бы сказал, что в целом проход через узел атрибута является наиболее безопасным.
Чтобы добавить немного больше технических деталей, хотя в большинстве случаев разные способы возвращают одни и те же способы, это не всегда верно для несуществующих атрибутов. В качестве примера возьмем следующий HTML: <a href='test'>. Вы можете попробовать сами в другом браузере на тесте jsFiddle (вывод ниже от Firefox).
// Get reference to element
var a = document.getElementsByTagName('a')[0];
// Existent attributes
console.log(a.href); // String: http://fiddle.jshell.net/_display/test
console.log(a.getAttribute('href')); // String: test
console.log(a.attributes['href']); // Attribute node: href
Обратите внимание, что один раз был возвращен абсолютный URI, в другой раз - оригинальное значение.
// Existent invalid attributes
console.log(a.other); // undefined
console.log(a.getAttribute('other')); // String: thing
console.log(a.attributes['other']); // Attribute node: other
Все, что существует при загрузке страницы, объединяется в DOM, но недоступно как свойство, если недействительно.
// Inexistent but valid attributes
console.log(a.title); // Empty string
console.log(a.getAttribute('title')); // null
console.log(a.attributes['title']); // undefined
Первый вызов вернул значение свойства по умолчанию. Затем мы увидели null как маркер несуществующего атрибута. Наконец, мы получили так называемый NamedNodeMap, который является чем-то вроде смеси массива и объекта. Доступ к нему как к объекту дал значение undefined.
// Creating attributes
a.setAttribute('title', 'test title');
console.log(a.title); // String: test title
console.log(a.getAttribute('title')); // String: test title
console.log(a.attributes['title']); // Attribute node: title
Атрибут также становится доступным как свойство.
// Creating "attributes" by using property
a.rel = 'test rel';
console.log(a.rel); // String: test rel
console.log(a.getAttribute('rel')); // String: test rel
console.log(a.attributes['rel']); // Attribute node: rel
Установка свойства для действительного атрибута также создает запись в attributes map.
// Inexistent invalid attributes
console.log(a.dummyInvention); // undefined
console.log(a.getAttribute('dummyInvention')); // null
console.log(a.attributes['dummyInvention']); // undefined
Доступ к свойству на a, возвращаемое значение маркера и доступ к индексу на карте узла.
// Creating invalid attributes via setAttribute
a.setAttribute('title2', 'test title2');
console.log(a.title2); // undefined
console.log(a.getAttribute('title2')); // String: test title2
console.log(a.attributes['title2']); // Attribute node: title2
Атрибут создается, даже если его существующее является недействительным, но оно не доступно как свойство.
// Creating invalid "attributes" via property
a.title3 = 'test title3';
console.log(a.title3); // String: test title3
console.log(a.getAttribute('title3')); // null
console.log(a.attributes['title3']); // undefined
Объект a расширен, но DOM нетронут.
// NamedNodeMap of length 4 and indexes other, href, title, rel, title2 (valid attributes or result of setAttribute in order of creation except those from parsing)
console.log(a.attributes);
Карта узлов отражает только текущее состояние DOM. Он не знает о расширении нашего объекта a, который мы получили через getElementsByTagName.
Важно отметить, что манипулирование объектом JavaScript не обязательно влияет на DOM. DOM отражает только те вещи, которые были доступны при разборе и модификации с помощью методов DOM или модификаций свойств (предопределенных свойств). Я надеюсь, что я не пропустил ни одного важного случая и что комментарии были достаточно многословны, чтобы увидеть, что происходит.
Я был бы признателен за комментарий к окончательному NamedNodeMap, потому что я хотел бы знать, корректно ли поведение Firefox, чтобы отбрасывать порядок атрибутов при разборе.