باستخدام جافا سكريبت، كيف يمكنني معرفة ما إذا كان كائن HTML في DOM غير موجود في كود مصدر HTML؟

Question

أنا أبحث عن أفكار حول كيفية اكتشاف الكائنات الموجودة في 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.

أي أفكار كيف نفعل ذلك؟ربما هناك سمة ما في الكائن تخبرنا ما إذا كان نشأ من المصدر أم لا؟

Answer 1

فكرة جديدة مبنية على فكرة أليكس.لا يزال الأمر يتضمن إعادة جلب 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 الخاص بك، لذا إذا كان هذا مهمًا، فكن على دراية به.

Answer 2

قراءة تعليقك تحتاج فقط إلى تحديد ما إذا كان أ <tbody> هل تمت إضافة العلامة من خلال عملية العرض بدلاً من وجودها في المصدر؟

إذا كان الأمر كذلك فلماذا لا تقوم بتعديل المصدر الذي يحتوي عليه <tbody> من خلال تطبيق السمة <tbody class="exp">, ، أثناء سيرك في DOM، تعلم أن أي عقدة tbody لا تمتلك هذه السمة قد تم إدراجها بواسطة محرك العرض.

Answer 3

يمكن الاحتفاظ بها في document.body.onload سلسلة الأولي document.body.innerHTML

ثم عندما تريد إجراء الشيك، اختبر أولاً لمعرفة ما إذا كانت لا تزال كما هي.
إذا لم تقم بمقارنة كلا السلسلتين والعثور على الاختلافات.

أعتقد أن هذا أمر جيد، إذا لم يكن لديك صفحة ثقيلة جدًا.