Используя JavaScript, как я могу сказать, если объект HTML в DOM не находится в исходном коде 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>
.

У меня есть функция 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