DOM メソッドの包括的なアプリケーションの紹介

ドキュメント nav { height: 50px; } nav span { margin: 0 5px; } .show { color: red; } 手机: 锤子 T1 锤子 T2 坚果U1 锤子M1 坚果Pro 价格: 3200 2600 899 2799 2299 屏幕: 399 600 800 1200 (function(){ var nav = document.querySelector('nav'); var li = document.querySelectorAll(' li'); var ids = []; for(var i = 0; i

setClick(li[i],i); } function setClick(parent,index){ var option = parent.getElementsByTagName("a"); for(var i = 0; i /* 建一数组 */ option[i].onclick = function(){ for(var i = 0; i option[i ].className = ""; } this.className = "show"; var spam = ids[index]; if(ids[index]){ scan.children[0].innerHTML = this.innerHTML; return; } span = document.createElement("span"); var a = document.createElement("a"); var Strong = document.createElement("strong"); a.innerHTML = "x "; a.href="javascript:;"; a.onclick = function(){ nav.removeChild(span); ids[index]=""; /* 删除元素清空数组对象位 */ for(var i = 0; i option[i].className = ""; } } strong.innerHTML = this.innerHTML; span.appendChild(strong ); span.appendChild(a); ids[index] = span; /* 元素生成之後，先存入量组的对应位 */

/* 按照数组の顺序再追加一遍元素 */ for(var i = 0;私は＜ ids.length; i++){ if(ids[i]){ nav.appendChild(ids[i]); } } }; } } })();