~~~ let listBox = document.getElementById('list'), headerBox = document.getElementById('header'), linkList = headerBox.getElementsByTagName('a'), productList = listBox.getElementsByTagName('li'); console.log(productList); ~function () { //=>AJAX let productData = null, xhr = new XMLHttpRequest; xhr.open('GET', 'json/product.json', false); xhr.onreadystatechange = () => { xhr.readyState === 4 && xhr.status === 200 ? productData = xhr.responseText : null; //->FORMAT DATA productData ? productData = JSON.parse(productData) : null; }; xhr.send(null); //=>BIND DATA let str = ``; for (let i = 0; i < productData.length; i++) { let { title, img, price, time, hot } = productData[i]; str += `<li data-price="${price}" data-time="${time}" data-hot="${hot}"> <a href="javascript:;"> <img src="${img}" alt=""> <p>${title}</p> <span>￥${price}</span> </a></li>`; } listBox.innerHTML = str; }(); console.log(productList); //=>HANDLE CLICK ~function () { let sortList = () => { let productAry = [].slice.call(productList); productAry.sort((a, b) => { let aP = a.getAttribute('data-price'), bP = b.getAttribute('data-price'); return aP - bP; }); for (let i = 0; i < productAry.length; i++) { let curLi = productAry[i]; listBox.appendChild(curLi);//=>appendChild:向容器的末尾追加新元素,但是頁面中不是20個,還是原有的10個,只不過順序改變了,這是為啥? } }; linkList[1].onclick = function () { sortList(); }; }(); /* * DOM的映射機制 * 頁面中的HTML元素，和JS中通過相關方法獲取到的元素集合或者元素對象存在映射關系(一個改另外一個會跟著自動修改) * * xxx.style.color='red' : 把xxx元素對象對應堆內存中的style屬性下的color屬性值修改為'red'（本質操作的是JS堆內存） ；但是由于DOM映射關系，頁面中的標簽和XXX元素對象是綁在一起的，我們修改元素對象空間的值，頁面中的元素會按照最新的值進行渲染； * * 在元素綁定前，我們獲取容器中元素，得到一個空的元素集合，元素數據綁定后，我們不需要重新獲取，DOM的映射機制會幫我們把新增加的元素映射到之前獲取的空集合中，讓其變為有元素的集合（querySelectorAll獲取的集合是靜態集合(staticNodeList)，不存在上述所謂的映射機制，所以基于這種辦法，數據綁定完成后需要重新的獲取一次才可以） * * appendChild在追加元素對象的時候，如果這個元素之前容器中已經存在，此時不是克隆一份新的追加到末尾，而是把原有的元素移動到末尾位置 * * ... */ ~~~