Не удается получить доступ к значению HTMLCollection

test.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <script>
    var eles = document.getElementsByClassName('review');
    console.log(eles);
    console.log(eles.length);
    console.log(eles[0]);
    // for(var i=0, max=eles.length)
    </script>
</head>
<body>
    <div class="review"></div>
    <div class="review"></div>
    <div class="review"></div>
    <div class="review"></div>
    <div class="review"></div>
</body>

I checked eles represents HTMLCollenction.

Здесь говорится, что HTMLCollection также предоставляет свои элементы непосредственно как свойства по обоим именам и указатель.

Поэтому я попытался выполнить отладку с помощью console.log(eles.length) и console.log(eles[0]). Но, к сожалению, консоль показывает 0 и не определено (используя Google Chrome Tool Developer)

Как я могу получить доступ к результату eles? Я хочу изменить стиль и добавить атрибут к тегам, полученным ClassName. Кроме того, я могу использовать только естественный Javascript.


javascript html dom htmlcollection
person REI    schedule 26.08.2015    source источник

Ответы (3)


arrow_upward
12
arrow_downward

Проблема в том, что вы поместили скрипт в заголовок, который выполняется до загрузки элементов html, поэтому getElementsByClassName() не вернет никаких элементов.

Одним из решений является дождаться загрузки элементов html, а затем выполнить ваш скрипт, для этого вы можете использовать событие загрузки оконных объектов.

window.addEventListener('load', function () {
    var eles = document.getElementsByClassName('review');
    console.log(eles);
    console.log(eles.length);
    console.log(eles[0]);
})

Или вы можете разместить свой скрипт в нижней части элемента body вместо head, чтобы к моменту анализа и выполнения скрипта элементы загружались в dom

person Arun P Johny    schedule 26.08.2015
comment
Я выбрал ответ Аруна как лучший, хотя другие отзывы так же благодарны, как и этот. Спасибо. - person REI; 26.08.2015

arrow_upward
2
arrow_downward

Ваши элементы html не существуют, когда вы запускаете код. ваш код обрабатывается, в этот момент ваш тег тела не существует. так:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
</head>
<body>
    <div class="review"></div>
    <div class="review"></div>
    <div class="review"></div>
    <div class="review"></div>
    <div class="review"></div>

    <script>
      var eles = document.getElementsByClassName('review');
      console.log(eles);
      console.log(eles.length);
      console.log(eles[0]);
    </script>
</body>

Работает нормально, потому что вы запустили свой код после добавления html-элементов.

Лучше всего использовать JavaScript прямо в конце тега body.

(Или другой метод использует «готовый» сценарий, например document.load или $(function(){)

person atmd    schedule 26.08.2015

arrow_upward
-2
arrow_downward

Используйте приведенный ниже код для доступа к элементу позиции 0: -

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
</head>
<body>
    <div class="review"></div>
    <div class="review"></div>
    <div class="review"></div>
    <div class="review"></div>
    <div class="review"></div>
</body>
<script>
    var eles = document.getElementsByClassName('review');
    console.log(eles);
    console.log(eles.length);
    console.log(eles[0]);
    // for(var i=0, max=eles.length)
    </script>
</html>
person NaveenG    schedule 26.08.2015