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

iamrunner 2017-03-18

今天做购物车的时候遇到了几个问题,基本操作是添加商品,删除商品,清空购物车,还有为商品添加数量(最大为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>标签的个数,第二个弹出的是“商品名称”。

相关推荐