JavaScript DOM編程藝術(shù)是一本非常經(jīng)典的前端開發(fā)書籍，其對于DOM編程進(jìn)行了深入的研究，讓開發(fā)人員能夠更加深入地理解JavaScript和DOM之間的關(guān)系，從而能夠開發(fā)出更加高效和可靠的網(wǎng)頁應(yīng)用。而在如今的網(wǎng)頁開發(fā)中，京東作為中國一流電子商務(wù)平臺，其所使用的JavaScript DOM編程技術(shù)，給我們提供了很好的學(xué)習(xí)和借鑒的機(jī)會。

當(dāng)我們用京東購物時，比如說在首頁上搜索商品，輸入框下面的推薦搜索是怎么實現(xiàn)的呢？其實就是通過JavaScript DOM編程實現(xiàn)的。以下代碼演示了實現(xiàn)推薦搜索的JS代碼：

//獲取搜索框?qū)ο?
var suggestWrap = document.querySelector("#search-mb-main-suggest");
//點擊頁面任意處關(guān)閉搜索框推薦
document.body.onclick = function () {
suggestWrap.style.display = "none";
}
//搜索框內(nèi)容改變時發(fā)送AJAX請求獲取數(shù)據(jù)
inputEle.oninput = function () {
var text = inputEle.value.trim();
if (text == "") {
suggestWrap.style.display = "none";
return;
}
//通過Ajax請求獲取后臺數(shù)據(jù)
ajax();
}
//將返回的數(shù)據(jù)顯示在頁面上
function onSuccess(data) {
var html = "";
for (var i = 0; i< data.results.length; i++) {
html += "
" + data.results[i] + "
";
}
//將數(shù)據(jù)顯示在搜索框推薦列表中
suggestWrap.style.display = "block";
suggestWrap.innerHTML = "
" + html + "
";
}

另外，京東商城的商品價格篩選功能也是通過JavaScript DOM編程編寫實現(xiàn)的。當(dāng)我們在商品列表頁選擇價格范圍時，商品列表會實時的根據(jù)我們所選擇的價格區(qū)間進(jìn)行篩選。以下是實現(xiàn)價格篩選的JavaScript代碼：

//綁定價格區(qū)間按鈕的點擊事件
for (var i = 0; i< priceBtnList.length; i++) {
(function (i) {
priceBtnList[i].onclick = function () {
//設(shè)置選中價格區(qū)間樣式
setPriceSelected(this);
//計算價格區(qū)間
var price = getPriceRange();
//根據(jù)價格區(qū)間過濾商品列表
filterGoods(price.min, price.max);
};
})(i);
}
//根據(jù)用戶所選擇的價格區(qū)間過濾商品列表
function filterGoods(minPrice, maxPrice) {
for (var j  = 0; j< goodsList.length; j++) {
var itemPrice = goodsList[j].querySelector(".goods-price").innerText;
itemPrice = parseFloat(itemPrice.slice(1));
if (itemPrice< minPrice || itemPrice >maxPrice) {
goodsList[j].style.display = "none";
} else {
goodsList[j].style.display = "block";
}
}
}

通過這些例子，我們不難看出JavaScript DOM編程在京東商城中得到了廣泛的應(yīng)用。后續(xù)的網(wǎng)頁開發(fā)中，我們也可以借鑒這些實踐經(jīng)驗，通過JavaScript DOM編程，來實現(xiàn)更加高效和可靠的網(wǎng)頁應(yīng)用。