$ (this)를 DB에 저장하십시오.

DOM에 대한 이해가 부족하기 때문에이 질문을 올바르게하는 방법을 모르겠습니다.

내가하려는 것은 주어진 DOM 요소에서 클릭 이벤트를 잡는 것입니다. 그런 다음 요소 유형과 데이터베이스에 대한 요소에 대한 전체 참조를 저장하려고합니다. 그러나 이것이 가능한지 확실하지 않습니다.

내가 원하는 것은 나중에 웹 응용 프로그램과 구멍 상호 작용을 저장하여 특정 세션에서 사이트에서 수행 된 모든 작업을 나중에 재생할 수 있도록하는 것입니다.

나는 클릭 한 요소의 X 및 Y 위치를 얻는 것과 같은 방법을 시도했으며, 나중에 이러한 x-y 좌표에 대한 클릭을 트리거했지만이 접근 방식에 몇 가지 문제점이 있습니다. 나는 또한 바디 태그에 도달 할 때까지 돔을 거꾸로 통과하려고 시도했지만, 하나의 선택기를 만들었지 만 이것 역시 단점이있다. 내가 생각할 수있는 최선의 해결책은 $ (this)에 포함 된 것을 저장하는 것이다.

출처

2013-08-05 Rasmus L. Knabe

+12

당신은 [셀레늄]과 같이 조사 할 수 있습니다 (http://docs.seleniumhq.org/)의 경우 이게 다 네가하는거야. 나는 그것이 당신이 찾고있는 것을 정확히 할 수 있는지 모르지만 요즘처럼 복잡한 웹 어플리케이션을 사용하면'click' 이벤트를 모두 기록하는 것은 아마도 전체를 기록 할만큼 충분히 가까이 있지 않을 것입니다 세션. –

윈도우 객체를 보아라. – 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) 또는 DB의 내용을 DB에 저장할 수 없다는 뜻입니까? (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) > 섹션 : nth-child (1)> ul : nth-child (1)> li : nth-child (3)> a : nth-child (1) ") 트리거 ('클릭'); 나는 당신의 충고를 고려하여 Xpath를 시도 할 것입니다. –

$ (this)를 DB에 저장하십시오.

답변

관련 문제