方案
我正在开发一个现有的Web实现。我正在添加一些逻辑客户端来跟踪用户体验。
约束
不幸的是,当前的实现缺少一些有用的Id属性。我不允许插入它们,我不允许修改现有的DOM结构
方法
所以我不得不利用Javascript DOM遍历方法:
var gameLink = eventSource.parentNode.parentNode.querySelector('a.arrow-label');
出于设计原因,我将所有功能都放在配置JSON对象中。这样我就可以将实现逻辑与任何可更改的东西分开:
gt.conf = {
pages: {
'homepage':'Home page'
,'help':'Supporto utente'
}
, user: {
'loggedIn':'autenticato'
'registered':'registrato'
}
};
现在我很乐意在配置对象中添加选择器:
gt.conf = {
/* ... */
, selectors: {
'gameLink':'a.arrow-label'
}
}
那样:
var gameLink = eventSource.parentNode.parentNode.querySelector(gt.conf.selectors.gameLink);
但我也会在配置中存储代码中的(可怕的)parentNode
链。
问题
有没有办法将'parentNode'链存储为字符串并使用它来执行DOM遍历?
答案 0 :(得分:0)
以Frédéric Hamidi's评论为基础:
gt.conf ={
/* ... */
traverseUp: 2
}
然后:
var i = gt.conf.traverseUp,
scope = eventSource;
while(i > 0){
scope = scope.parentNode;
i--;
}
var gameLink = scope.querySelector(gt.conf.selectors.gameLink);