【html】parentNode的应用

最新推荐文章于 2023-08-04 08:47:36 发布

小孙小孙睡不醒

最新推荐文章于 2023-08-04 08:47:36 发布

阅读量267

点赞数

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/sylbiubiubiu/article/details/126640003

版权

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结构没有改变，数据没有丢失。（数据很重要！！！）
在这里插入图片描述