【发布时间】：2012-03-09 19:58:00
【问题描述】：
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');
但是元素的内容是空的。
把我的头发拉到这个上！不知道是什么问题。根据 W3c Validator，HTML 是有效的。在 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&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&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&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&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&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='&page=Rent__Log&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","&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","&pid=12345678");'
name="edit_payment_info">Edit Payment Information</a>
</div>
</form>
</div>
<div id='footer'>
<div id='footer_inside'>
Copyright © 2011 Our Company Ltd.<br>
All rights reserved.
</div>
</div>
</div>
</div>
</body>
</html>
【问题讨论】：
-
只是一个建议，但 jquery 会让您更轻松。
-
用 document.getElementsByClass('date_header') 你需要定义地方。示例 var element = document.getElementsByClass('date_header')[0];
标签： javascript getelementbyid getelementsbyclassname