本人欲制作一获取网页点击事件的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重新生成的另一个,跟之前的不是同一个
document就是根文档了啊,你再往上什么都没了。
要加点击事件就加在你需要点击事件的地方,别什么都往document上扔。
解决方法是 将里面的两个false更改为TRUE
楼上说的对,这跟这个页面有关系,当你点击箭头时,这个
center
里面的内容就被js换掉了,节点的联系被切断了,所以parentNode
就变成null
比如你点击一个空白的地方,图片中的蓝色框内,没有切换图片,就能获取所有的路径。