The problem of JavaScript using DOM object to get child nodes

I encountered several problems when making a shopping cart today. The basic operations are to add items, delete items, clear the shopping cart, and add the quantity (maximum is 99) or reduce the quantity (minimum is 1) for items. When writing javascript scripts When I use ajax to connect to the background, the background uses the Map collection to save the product information and the number of products, and save it in the session scope, but after the background is processed, I don't want to reload the page to see the effect, so I wrote it in javascript and found childNodes The collection obtained by this property contains itself.

 

<tr>	
	<td>Item ID</td>
	<td>Product name</td>
	<td>Product unit price</td>
	<td>Date of manufacture</td>
	<td>Expire Date</td>
	<td>Product Units</td>
	<td>Item Quantity</td>
	<td>Total Items</td>
	<td>操作</td>
</tr>

 I use the following code to pop up the length of 19, this attribute is to get the set of this node and all child nodes, including text nodes, I deleted all the content in <tr> The length of the pop-up is 1.

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

 I want to get the content "item number" of the first <td>, so I have to do this

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

 The children attribute indicates that the direct child node of this node is obtained, not including itself. E.g:

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

 The length of the first pop-up is 9, which is the number of <td> tags, and the second pop-up is "product name".