1

getElementByIdとgetElementsByClassの両方で問題が発生しています。

私がやろうとしているのは、過去6か月以上、将来3か月以上のすべてのテーブル列を非表示にすることです。クラスを使用して、日付を含むテーブルヘッダー要素を選択することを考えました。

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

これによりnodeListが取得されます(正しいノードはconsole.log()に表示されます)が、反復可能ではないようです。つまり、elements [0]は未定義で、elements.lengthは0です。

回避策として、IDでヘッダー行を選択し、その子ノードを反復処理することを考えました。

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

ただし、要素の内容はnullです。

これで髪を抜く!問題が何であるかわかりません。HTMLは、W3cValidatorに従って有効です。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>
4

2 に答える 2

3

今回はnodeListを取得します(正しいノードはに表示されますconsole.log())が、反復可能ではないようです。つまりelements[0]、未定義です。

console.log('%s', elements)また、他のさまざまな形式では、コードの実行が終了した後に要素が文字列に変換されるため、ログエントリのフォーマットによってログを実行するコードの実行が遅くなることはありません。ノードリストはライブであるため、これは、が呼び出されたときに存在する要素とは異なる要素を表示することを意味する場合console.logがあります。

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

NodeListNamedNodeMapDOM内のオブジェクトはライブです。つまり、基礎となるドキュメント構造への変更は、関連するすべてのNodeListオブジェクトに反映されNamedNodeMapます。たとえば、DOMユーザーがNodeListの子を含むオブジェクトを取得しElement、その後その要素にさらに子を追加する(または子を削除するか、変更する)とNodeList、ユーザー側でそれ以上のアクションを実行することなく、これらの変更が自動的にに反映されます。

要素が解析される前にスクリプトを実行していますか?その場合は、ドキュメントの読み込み時に実行する必要があります。

于 2012-03-09T20:01:28.990 に答える
0

document.getElementsByClassName関数を呼び出したいと思いませんか?詳細については、こちらをご覧ください。私の知る限り、クロスブラウザーではないため、jQueryまたはその他のフレームワークを使用してDOM要素を選択および制御することをお勧めします。

于 2012-03-09T20:03:44.423 に答える