将参考$（this）保存到DB

我不知道如何正确地问这个问题，因为我对DOM的理解是缺乏的。

我想要做的是捕捉任何给定的DOM元素上的任何点击事件。然后我想保存元素类型以及元素在数据库中的完整引用。但我不确定这是否可能？

我想实现的目标是保存与Web应用程序的漏洞交互，以便以后可以在给定会话中重播网站上执行的每个操作。

我已经尝试了不同的方法，如获取单击元素的X和Y位置，稍后触发点击这些x-y坐标，但是这种方法存在几个问题。我也试图向后遍历Dom，直到我到达身体标记，建立一个单一的选择，但这也有它的缺点..我能想到的最好的解决方案将是保存什么$（this）包含。

来源

2013-08-05 Rasmus L. Knabe

+12

你可能想看看像[硒（http://docs.seleniumhq.org/）如果这是你所追求的一切。我不知道它是否能够完全符合你的要求，但是现在网络应用程序像现在这样复杂，只是记录所有的“点击”事件可能不会足够满足记录一个完整的会话。 –

看看窗口对象 – Rooster

如果你正在寻找一个JS解决方案，我会尝试PhantomJS –

如果点击事件是您想要跟踪的唯一事物，那么您可能希望将点击事件处理程序添加到页面上的每个可点击元素。

这需要从<body>开始，然后走DOM，随时添加处理程序。

同时，我会为每个包含XPath选择器的元素添加一个新的data-xpath属性，以便您可以在处理程序中使用它来记录被单击的元素，并重播用户的交互。

有关XPath的介绍，请参见http://www.w3schools.com/xpath/xpath_intro.asp。

来源

2013-08-05 17:34:39

只是为了确保我明白。你建议我解析洞DOM树并在所有元素的自定义属性中添加uniqe标识符？ –

是的，尽管你不需要“解析”DOM。相反，你走它，从身体的子元素开始，并添加到所有可点击的元素XPath作为一个属性和一个通用的点击处理程序，点击时，读取$（this）的attr并将其报告给您数据库。通过这种方式，您不需要在点击某个特定元素时计算路径，这将需要对DOM进行回溯，并且既耗时又耗费技术问题。 –

非常感谢 - 这很有道理..但这是否意味着我不能简单地将$（this）或其内容保存到数据库？（我猜它必须包含DOM元素的某种唯一标识符） –

昨天打瞌睡我有一个想法，今天结束了这个代码。 - 它按预期工作，但我猜Xpath会表现更好！？

$(document).click(function(event) { 
    var target = $(event.target); 
    var parents = target.parents(); 
    var myParents = ''; 
    $($(parents).get().reverse()).each(function(key, value){ 
     var parentIndex = $(this).index()+1; 
     myParents += $(this).prop("tagName")+':NTH-CHILD('+parentIndex+') > '; 
    }); 
    var childIndex = target.index()+1; 
    var childTag = target.get(0).tagName; 
    myParents += childTag+':NTH-CHILD('+childIndex+')'; 
    alert(myParents); 
});

上面的代码将返回唯一的选择字符串喜欢这样的：

HTML:NTH-CHILD(1) > BODY:NTH-CHILD(2) > SECTION:NTH-CHILD(1) > UL:NTH-CHILD(1) > LI:NTH-CHILD(3) > A:NTH-CHILD(1)

来源

2013-08-06 13:48:01

你肯定是在右边，错误，路径。 :-)。我建议您使用XPath作为标准，这意味着您可以轻松地与其他人分享您的代码，而不需要编写新代码来导航，而不是“重新发明轮子”。 DOM中的元素。 –

@RobRaisch感谢我的方法的反馈和确认。使用jQuery和上面的代码我不需要任何额外的代码来导航到DOM元素 - 我可以简单地这样做： '$（“html：nth-child（1）> body：nth-child（2） > section：n-child（1）> ul：n-child（1）> li：n-child（3）> a：n-child（1）“）。trigger（'click'）;' 但我会考虑你的建议，并尝试Xpath。 –

将参考$（this）保存到DB

回答

相关问题