parentNode的应用
删除列表中的选项(不删除dom)
window.onload=function(){
// 假删除
var aNodes = document.querySelectorAll('.list > li > a');
for(var i=0;i<aNodes.length;i++){
aNodes[i].onclick = function(){
aNodes[i].parentNode.style.display='none';
}
}
}
执行以上代码进行删除时,会报错。原因是这里的aNodes[i]指向的是第六个a节点,而第六个a节点不存在。
将aNodes改为this,这样每次绑定的事件是谁,那么this就指向谁。这样即可实现。(也可用闭包来实现)
window.onload=function(){
// 假删除
var aNodes = document.querySelectorAll('.list > li > a');
for(var i=0;i<aNodes.length;i++){
aNodes[i].onclick = function(){
this.parentNode.style.display='none';
}
}
}
这样即可实现假删除,且dom结构没有改变,数据没有丢失。(数据很重要!!!)