Блог

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

Есть идеи, как это сделать? Может быть, в объекте есть какой-то атрибут, который сообщает, получен ли он из источника или нет?

Может быть сохранено в document.body.onload строке начального document.body.innerHTML

Затем, когда вы захотите выполнить проверку, сначала протестируйте, чтобы убедиться, что они все те же.
Если нет, сравните обе строки и найдите различия.

Я думаю, это нормально, если у вас не слишком тяжелая страница.

Читая ваш комментарий, вам просто нужно определить, был ли <tbody> тег добавлен в процессе рендеринга, а не присутствует ли он в исходном коде?

Если да, то почему бы не изменить исходный код, который действительно содержит, <tbody> применив атрибут <tbody class="exp"> , тогда, когда вы проходите по DOM, вы знаете, что любой узел tbody, не обладающий этим атрибутом, был вставлен механизмом рендеринга.

Новая идея, основанная на идее Алекса. По-прежнему требуется повторная выборка всего DOM, но иначе поступить невозможно. Вы могли бы реализовать эту же логику на стороне сервера, если это возможно в вашем приложении. Использование jQuery для краткости:

 function getInsertedElements(callback){
    $.get('.', function(content){
        callback($(content
            .replace(/(<w [^>] classs*=s*")/gi, '$1from-source ')
            .replace(/(<w )(?![^>]* classs*=)/gi, '$1 class="from-source"')
        ).find(':not(.from-source)'));
    });
}
  

это даст вам список всех вставленных элементов 🙂 Возможно, потребуется некоторое уточнение, например, в отношении совпадения кавычек class=" , поскольку цитата там технически необязательна. Также не тестировался, но должен работать.

Обратите внимание, что с помощью этого метода вы получаете обратно новые элементы, а не те, которые в данный момент существуют в вашем DOM, так что, если это важно, просто имейте это в виду.