javascript - 为什么明明存在父节点，但是 .parentNode 函数却显示父节点为null?

问题描述

问 题

本人欲制作一获取网页点击事件的xpath的chrome插件，但是在点击事件发生，从节点回溯的的时候，却发生了存在父节点的节点在调用.parentNode函数的时候返回结果居然是null。

而确认被标记为null的节点的id之后，使用getElementById却可以去到，而使用getElementById获取其位置并且用childNodes[2]获得其子节点后调用parentNode方法也表示存在该节点。

前面的节点都可以，问题只在这个节点。被标为null的那个父节点的id为detailcnt。

不知原因为何？请路过的高手予以指点！谢谢！

document.addEventListener('click',function handler(e){
          console.log(this);
          console.log(this.window);
          console.log(this.parent);
          console.log(this.parentNode);
          var pw = window;
          var end = window.top.document;
          console.log("hhtsdd");
          var route ="";
          console.log(route);
          console.log(e.target.tagName);
          var p = e.target;
          var i = 0;
          while(p!=this && p!=p.parentNode ){
            if($(p).parent().children($(p).prop("tagName")).index($(p))+1==0){

            }
            route = "/"+$(p).prop("tagName")+"["+($(p).parent().children($(p).prop("tagName")).index($(p))+1)+"]"+route;
            console.log(route);
            if(p.tagName == "HTML"){
              if(pw == pw.parent){
                console.log(p);
                break;
              }
              $("iframe",pw.parent.document).each(function(){
                if(pw.document == this.contentWindow.document){
                  route = "*"+this.src+"%"+route;
                  p = this;
                  pw = pw.parent;
                }
              });
            }else{
              console.log(document.getElementById("detailcnt").childNodes[2].parentNode);
              console.log(p == document.getElementById("detailcnt").childNodes[2]);
              console.log(p.parentNode);
                p = p.parentNode;
              }
          }},false);

问题发生位置：
http://www.duitang.com/blog/?...
这种图片的切换图片位置：

解决方案

点向右的那个箭头图标，网页里的js把那个元素删除了，这时候就没有父元素。
下一个页面还能看到一个箭头图标，这是用js重新生成的另一个，跟之前的不是同一个

这篇关于javascript - 为什么明明存在父节点，但是 .parentNode 函数却显示父节点为null?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！