Javascript DOM遍历和CSS选择器

Question

情境

我正在研究现有的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遍历？

Answer 1

基于弗雷德里克·哈米迪（FrédéricHamidi）的评论：

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);