javascript를 사용하여 DOM의 HTML 객체가 HTML 소스 코드에 없는지 어떻게 알 수 있습니까?

StackOverflow https://stackoverflow.com/questions/6047064

  •  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

그런 다음 확인하고 싶을 때 먼저 테스트하여 여전히 동일한지 확인하십시오.
두 문자열을 비교하지 않으면 차이점을 찾으십시오.

페이지가 너무 무겁지만 않다면 괜찮을 것 같습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top