JavaScript使用DOM对象获取子结点的问题

今天做购物车的时候遇到了几个问题，基本操作是添加商品，删除商品，清空购物车，还有为商品添加数量（最大为99）或减少数量（最小为1），在写javascript脚本的时候用ajax连接后台，后台用Map集合保存商品的信息和商品的数量，保存在session作用域中，但是后台做完处理之后我不希望重新加载页面才看到效果，于是用javascript写，发现childNodes这个属性获取的集合包含了本身。

 

<tr>	
	<td>商品编号</td>
	<td>商品名称</td>
	<td>商品单价</td>
	<td>生产日期</td>
	<td>失效日期</td>
	<td>商品单位</td>
	<td>商品数量</td>
	<td>商品总额</td>
	<td>操作</td>
</tr>

 我用如下的代码弹出来的长度是19，这个属性是获得本结点和所有子结点的集合，包含文本结点，我把<tr>内的内容全都删了弹出的长度是1。

var trList = document.getElementsByTagName("tr");
var tdList = trList.item(0).childNodes;
alert(tdList.length);

 我想获得第一个<td>的内容“商品编号”，只好这样

var trList = document.getElementsByTagName("tr");
var tdList = trList.item(0).childNodes;
var tdElement = tdList.item(1);
alert(tdElement.innerHTML);

 而children这个属性是表示获得本结点的直接子结点，不包含本身。例如：

var trList = document.getElementsByTagName("tr");
var tdList = trList.item(0).children;
var tdElement = tdList.item(1);
alert(tdList.length);
alert(tdElement.innerHTML);

 第一个弹出来的长度是9，即<td>标签的个数，第二个弹出的是“商品名称”。