Проблемы с getElementById и getElementsByClass

У меня возникают проблемы с getElementById и getElementsByClass.Проблемы с getElementById и getElementsByClass

То, что я пытаюсь сделать, - это скрыть все столбцы таблицы, которые были> 6 месяцев в прошлом, и> 3 месяца в будущем. Я думал, чтобы выбрать элементы заголовка таблицы, которые содержат даты, используя свой класс:

var elements = document.getElementsByClass('date_header');

Это получает нодлист из (правильные узлы показаны в console.log()), но это не кажется быть Iterable, то есть элементы [0] не определено и elements.length 0.

Как работа вокруг я думал, чтобы выбрать строку заголовка по идентификатору, и перебирать его дочерних узлов:

var element = document.getElementById('rent_log_table_header');

Однако содержимое элемента равно null.

Вытягивая мои волосы на этом! Не знаю, в чем проблема. HTML действителен в соответствии с W3c Validator. Протестировано на Safari 5.1.3, Firefox 10.0.2, & Chrome 17.0.963.78, как document.getElementsByClass, так и document.getElementById сбой.

<!DOCTYPE html> 

<html> 
<head> 
    <meta name="generator" 
      content="HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org"> 
    <link rel='icon' 
      type='image/png' 
      href='PropertyManagement/Media/Images/favicon.png'> 
    <meta http-equiv='content-type' 
      content='text/html; charset=us-ascii'> 
    <script type='text/javascript' 
      src='PropertyManagement/Script/Common.js'> 
    </script> 
    <script type='text/javascript' 
      src='PropertyManagement/Script/Rent_Log.js'> 
    </script> 
    <link type='text/css' 
      rel='stylesheet' 
      href='PropertyManagement/Style/Common.css'> 
    <link type='text/css' 
      rel='stylesheet' 
      href='PropertyManagement/Style/Rent_Log.css'> 
    <title> 
     Rent Log 
    </title> 
</head> 
<body id='body' 
     onload='__init();'> 
    <div id='wrapper'> 
     <div id='content'> 
      <ul id='nav_property_specific' 
       class='nav'> 
       <li class='portfolio'> 
        <a href='?page=Portfolio'><span class='left'><span class='right'><span class='middle'> <span class='page_title'>Back to Portfolio</span></span></span></span></a> 
       </li> 
       <li class='property__information'> 
        <a href='?page=Property__Information&amp;pid=12345678'><span class='left'><span class='right'><span class='middle'> <span class='page_title'>34 
        Greenhill</span></span></span></span></a> 
       </li> 
       <li class='tenants'> 
        <a href='?page=Tenants&amp;pid=12345678'><span class='left'><span class='right'><span class='middle'> <span class='page_title'>Tenants</span></span></span></span></a> 
       </li> 
       <li class='rent__log'> 
        <a id='selected' 
         href='?page=Rent__Log&amp;pid=12345678' 
         name="selected"><span class='left'><span class='right'><span class='middle'> <span class='page_title'>Rent Log</span></span></span></span></a> 
       </li> 
       <li class='services'> 
        <a href='?page=Services&amp;pid=12345678'><span class='left'><span class='right'><span class='middle'> <span class='page_title'>Services</span></span></span></span></a> 
       </li> 
       <li class='documents'> 
        <a href='?page=Documents&amp;pid=12345678'><span class='left'><span class='right'><span class='middle'> <span class='page_title'>Documents</span></span></span></span></a> 
       </li> 
       <li class='logout'> 
        <a href='?page=Logout'><span class='left'><span class='right'><span class='middle'> <span class='page_title'>Logout</span></span></span></span></a> 
       </li> 
      </ul> 
      <div id='main'> 
       <form name='rent__log_form' 
         action='&amp;page=Rent__Log&amp;pid=12345678' 
         method='post' 
         id="rent__log_form"> 
        <table id='rent_log_table'> 
         <tr id='rent_log_table_header' 
          class='calendar_header'> 
          <td class='name_field'> 
           Name 
          </td> 
          <td> 
           Fees 
          </td> 
          <td> 
           Deposit 
          </td> 
          <td class='date_header' 
           data-numeric-date='01 2012' 
           data-col-num='0'> 
           Jan 2012 
          </td> 
          <td class='date_header' 
           data-numeric-date='02 2012' 
           data-col-num='1'> 
           Feb 2012 
          </td> 
          <td class='date_header' 
           data-numeric-date='03 2012' 
           data-col-num='2'> 
           Mar 2012 
          </td> 
          <td class='date_header' 
           data-numeric-date='04 2012' 
           data-col-num='3'> 
           Apr 2012 
          </td> 
          <td class='date_header' 
           data-numeric-date='05 2012' 
           data-col-num='4'> 
           May 2012 
          </td> 
          <td class='date_header' 
           data-numeric-date='06 2012' 
           data-col-num='5'> 
           Jun 2012 
          </td> 
          <td class='date_header' 
           data-numeric-date='07 2012' 
           data-col-num='6'> 
           Jul 2012 
          </td> 
          <td class='date_header' 
           data-numeric-date='08 2012' 
           data-col-num='7'> 
           Aug 2012 
          </td> 
          <td class='date_header' 
           data-numeric-date='09 2012' 
           data-col-num='8'> 
           Sep 2012 
          </td> 
          <td class='date_header' 
           data-numeric-date='10 2012' 
           data-col-num='9'> 
           Oct 2012 
          </td> 
          <td class='date_header' 
           data-numeric-date='11 2012' 
           data-col-num='10'> 
           Nov 2012 
          </td> 
          <td class='date_header' 
           data-numeric-date='12 2012' 
           data-col-num='11'> 
           Dec 2012 
          </td> 
         </tr> 
         <tr> 
          <td class='name_field'> 
           John Smith 
          </td> 
          <td> 
           <span>Unpaid</span> 
          </td> 
          <td> 
           <span>Unpaid</span> 
          </td> 
          <td> 
           <span>-</span> 
          </td> 
          <td> 
           <span>Unpaid</span> 
          </td> 
          <td> 
           <span>Unpaid</span> 
          </td> 
          <td> 
           <span>-</span> 
          </td> 
          <td> 
           <span>-</span> 
          </td> 
          <td> 
           <span>-</span> 
          </td> 
          <td> 
           <span>-</span> 
          </td> 
          <td> 
           <span>-</span> 
          </td> 
          <td> 
           <span>-</span> 
          </td> 
          <td> 
           <span>-</span> 
          </td> 
          <td> 
           <span>-</span> 
          </td> 
          <td> 
           <span>-</span> 
          </td> 
         </tr> 
         <tr> 
          <td class='name_field'> 
           John Smuth 
          </td> 
          <td> 
           <span>Unpaid</span> 
          </td> 
          <td> 
           <span>Unpaid</span> 
          </td> 
          <td> 
           <span>Unpaid</span> 
          </td> 
          <td> 
           <span>Unpaid</span> 
          </td> 
          <td> 
           <span>Unpaid</span> 
          </td> 
          <td> 
           <span>Unpaid</span> 
          </td> 
          <td> 
           <span>Unpaid</span> 
          </td> 
          <td> 
           <span>Unpaid</span> 
          </td> 
          <td> 
           <span>Unpaid</span> 
          </td> 
          <td> 
           <span>Unpaid</span> 
          </td> 
          <td> 
           <span>Unpaid</span> 
          </td> 
          <td> 
           <span>Unpaid</span> 
          </td> 
          <td> 
           <span>Unpaid</span> 
          </td> 
          <td> 
           <span>Unpaid</span> 
          </td> 
         </tr> 
         <tr> 
          <td class='name_field'> 
           John Smythe 
          </td> 
          <td> 
           <span>Unpaid</span> 
          </td> 
          <td> 
           <span>Unpaid</span> 
          </td> 
          <td> 
           <span>-</span> 
          </td> 
          <td> 
           <span>Unpaid</span> 
          </td> 
          <td> 
           <span>Unpaid</span> 
          </td> 
          <td> 
           <span>-</span> 
          </td> 
          <td> 
           <span>-</span> 
          </td> 
          <td> 
           <span>-</span> 
          </td> 
          <td> 
           <span>-</span> 
          </td> 
          <td> 
           <span>-</span> 
          </td> 
          <td> 
           <span>-</span> 
          </td> 
          <td> 
           <span>-</span> 
          </td> 
          <td> 
           <span>-</span> 
          </td> 
          <td> 
           <span>-</span> 
          </td> 
         </tr> 
        </table> 
        <div class='button_container'> 
         <a href='#' 
          id='edit_payment_log' 
          class='button' 
          onclick='document.pressed="edit_payment_log"; Link.hyper("Rent__Log","&amp;pid=12345678");' 
          name="edit_payment_log">Edit Payment Log</a> 
        </div> 
        <div id='account_info_q' 
         class='question'> 
         <div id='account_info' 
          class='text_field_set_question'> 
          <label class='question_label'>Account Information</label> 
          <div> 
           <div id='account_info_bank_name_account_info' 
            class='text_field_region'> 
            <label>Bank Name</label><label id='bank_name_account_info' 
             class='text_field_locked'>-</label> 
           </div> 
           <div id='account_info_sort_code_account_info' 
            class='text_field_region'> 
            <label>Sort Code</label><label id='sort_code_account_info' 
             class='text_field_locked'>-</label> 
           </div> 
           <div id='account_info_account_number_account_info' 
            class='text_field_region'> 
            <label>Account Number</label><label id='account_number_account_info' 
             class='text_field_locked'>-</label> 
           </div> 
          </div> 
         </div> 
        </div> 
        <div class='button_container'> 
         <a href='#' 
          id='edit_payment_info' 
          class='button' 
          onclick='document.pressed="edit_payment_info"; Link.hyper("Rent__Log","&amp;pid=12345678");' 
          name="edit_payment_info">Edit Payment Information</a> 
        </div> 
       </form> 
      </div> 
      <div id='footer'> 
       <div id='footer_inside'> 
        Copyright &copy; 2011 Our Company Ltd.<br> 
        All rights reserved. 
       </div> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

источник

2012-03-09 Bilal Khan

просто предложение, но jquery сделает это намного проще для вас. – mason81

с document.getElementsByClass ('date_header'), вам нужно определить место. пример var element = document.getElementsByClass ('date_header') [0]; –

На этот раз мы получаем Nodelist из (правильные узлы показаны в console.log()), но это, кажется, не быть итерацию, т.е. elements[0] не определено.

console.log('%s', elements) и различные другие формы будут преобразовывать элементы в строку после кода завершения работы, так что запись журнала форматирование не замедлит ход кода, выполняющий регистрацию. Поскольку списки узлов являются живыми, это может означать, что он отображает элементы, которые отличаются от тех, которые присутствуют при вызове console.log.

http://www.w3.org/TR/DOM-Level-2-Core/core.html

NodeList и NamedNodeMap объекты в DOM находятся под напряжением; то есть изменения в структуре базового документа отражаются во всех соответствующих объектах NodeList и NamedNodeMap. Например, если пользователь DOM получает объект NodeList, содержащий дочерние элементы Element, то впоследствии добавляет к этому элементу больше детей (или удаляет их или изменяет их), эти изменения автоматически отражаются в NodeList без дальнейших действий на часть пользователя.

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

источник

2012-03-09 20:01:28

Спасибо! Это именно то, что было! добавление кода в документы, работающие по загрузке, как и ожидалось. –

@BilalKhan, Добро пожаловать.Задержанный материал форматирования, который 'console.log' делает, заставлял меня тратить время, расстраивающее часы в кругах :) –

Возможно, вы хотели вызвать функцию document.getElementsByClassName? Для получения дополнительной информации смотрите here. Насколько я знаю, это не crossbrowser, поэтому я бы посоветовал вам использовать jQuery или другую структуру для выбора и управления элементами DOM.

источник

2012-03-09 20:03:44

document.getElementsByClassName производит точно такое же поведение, к сожалению. –

Проблемы с getElementById и getElementsByClass

ответ

Смежные вопросы