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ツリーを経由しているJavaScript関数を持っていて、暗黙のうちに実行されたときに検出する必要があります。つまり、DOMにありますが、HTMLソースではありません。

どんなアイデアもこれを行う方法？オブジェクトには、ソースから発生したかどうかを伝えるオブジェクトにいくつかの属性がありますか？

役に立ちましたか？

解決

New idea based on Alex's idea. Still involves re-fetching the entire DOM, but it's impossible to do otherwise. You could implement this same logic server-side if it's feasible in your app. Using jQuery for brevity:

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

that will give you a list of all elements inserted :) May need some refinement , e.g. around the quotes matching class=" since a quote is technically optional there. Also un-tested, but should work.

Note that you're getting new elements back with this method, not the ones that currently exist in your DOM, so if that matters just be aware of it.

他のヒント

Reading your comment you just need to determine if a <tbody> tag has been added by the rendering process as opposed to being present in the source?

If so why not modify the source that does contain <tbody> by applying an attribute <tbody class="exp">, then as you walk the DOM you know that any tbody node not possessing that attribute was inserted by the rendering engine.

May be keep at the document.body.onload the string of the initial document.body.innerHTML

Then when you want to make the check, test first to see if they are still the same.
If not compare both strings and find the differences.

I guess this is ok, if you don't have a too heavy page.

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top