为什么明明存在父节点,但是 .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/?...
这种图片的切换图片位置:


document就是根文档了啊,你再往上什么都没了。
要加点击事件就加在你需要点击事件的地方,别什么都往document上扔。


楼上说的对,这跟这个页面有关系,当你点击箭头时,这个center里面的内容就被js换掉了,节点的联系被切断了,所以parentNode就变成null

比如你点击一个空白的地方,图片中的蓝色框内,没有切换图片,就能获取所有的路径。


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


解决方法是 将里面的两个false更改为TRUE



相关阅读:
css3 定义轨迹动画
vs2010下载nuget包的方法
内嵌app 的web 页面如何应用 app 内置的静态文件
部署到heroku后,无法发送邮件,哪里出了问题?
appendchild报错
nginx中,proxy_pass和rewrite执行顺序
js如何定义点击事件,弹出一个提醒事件后,2s消失,时间从点击按钮开始
如何修改URL地址中参数的值?
关于ES5中构造函数的问题
electron打包问题,多出来的那个窗口是什么鬼?有解决的吗?
linux下如何用C语言读取大于10G的文件?
afsdfsdfsdfsdfsdfsdf
idea debugmaven install 项目启动出现异常,求解决?
如何使用一次性定时器模拟周期性定时器?
echart 环形图悬浮如何不显示高亮效果
学习前端具体到了什么阶段可以去工作了呢?
为什么七牛上传图片会报错
关于过载动画的问题
gulp配合node运行程序时两个浏览器联动
element ui 的datePicker 日期控件怎么获取到鼠标选中的时间?



快速导航

Copyright © 2016 phpStudy |