javascript를 사용하여 DOM의 HTML 객체가 HTML 소스 코드에 없는지 어떻게 알 수 있습니까?
-
15-11-2019 - |
문제
HTML DOM에 있지만 HTML 소스에 명시적으로 표시되지 않는 개체를 검색하는 방법에 대한 아이디어를 찾고 있습니다.
아시다시피 다음을 포함하는 HTML 소스가 있는 경우:
<table id="myTbl">
<tr id="row1">
<td id="name">George</td>
</tr>
</table>
...HTML DOM은 <tbody>
소스 코드를 변경하지 않고 객체 트리의 객체를 이해하고 소스 코드가 이를 암시한다는 것을 이해합니다.따라서 DOM에서 구조는 HTML 소스가 다음과 같습니다.
<table id="myTbl">
<tbody>
<tr id="row1">
<td id="name">George</td>
</tr>
</tbody>
</table>
DOM 트리를 통과하는 자바스크립트 함수가 있는데, 묵시적인 객체, 즉 DOM에는 있지만 HTML 소스에는 없는 객체를 언제 실행했는지 감지해야 합니다.
이 작업을 수행하는 방법에 대한 아이디어가 있습니까?어쩌면 객체가 소스에서 유래했는지 여부를 알려주는 속성이 객체에 있을 수도 있습니다.
해결책
Alex의 아이디어를 기반으로 한 새로운 아이디어.여전히 전체 DOM을 다시 가져오는 작업이 필요하지만 다른 방법으로는 불가능합니다.앱에서 가능하다면 이와 동일한 논리를 서버 측에서 구현할 수 있습니다.간결성을 위해 jQuery 사용:
function getInsertedElements(callback){
$.get('.', function(content){
callback($(content
.replace(/(<\w+[^>]+class\s*=\s*")/gi, '$1from-source ')
.replace(/(<\w+)(?![^>]* class\s*=)/gi, '$1 class="from-source"')
).find(':not(.from-source)'));
});
}
그러면 삽입된 모든 요소의 목록이 제공됩니다. :) 약간의 개선이 필요할 수 있습니다.일치하는 따옴표 주변 class="
견적은 기술적으로 선택 사항이기 때문입니다.또한 테스트되지 않았지만 작동해야 합니다.
받고 있다는 점 참고하세요 새로운 요소는 현재 DOM에 존재하는 요소가 아니라 이 메서드로 다시 돌아오므로 중요한 경우에는 이를 알아두시기 바랍니다.
다른 팁
귀하의 의견을 읽으면 다음 사항을 결정해야 합니다. <tbody>
태그가 소스에 존재하지 않고 렌더링 프로세스에 의해 추가되었습니까?
그렇다면 다음을 포함하는 소스를 수정해 보십시오. <tbody>
속성을 적용하여 <tbody class="exp">
, DOM을 탐색할 때 해당 속성을 보유하지 않은 모든 tbody 노드가 렌더링 엔진에 의해 삽입되었음을 알 수 있습니다.
보관할 수 있습니다. document.body.onload
초기의 문자열 document.body.innerHTML
그런 다음 확인하고 싶을 때 먼저 테스트하여 여전히 동일한지 확인하십시오.
두 문자열을 비교하지 않으면 차이점을 찾으십시오.
페이지가 너무 무겁지만 않다면 괜찮을 것 같습니다.