Как найти с помощью javascript, если элемент существует в DOM или он виртуальный (только что создан createElement)

Question

Я ищу способ узнать, был ли элемент, на который есть ссылка в javascript, вставлен в документ.

Давайте проиллюстрируем случай следующим кодом:

var elem = document.createElement('div');

// Element has not been inserted in the document, i.e. not present

document.getElementByTagName('body')[0].appendChild(elem);

// Element can now be found in the DOM tree

Jquery имеет: видимый селектор, но он не даст точного результата, когда мне нужно будет найти, что невидимый элемент был помещен где-то в документе.

Answer 1

Вот более простой метод, использующий стандартный Node.contains DOM API для проверки того, что элемент в данный момент находится в DOM:

document.body.contains(MY_ElEMENT);

ПРИМЕЧАНИЕ: CROSS-BROWSER : объект документа в IE не имеет метода contains() - для обеспечения кросс-браузерной совместимости вместо этого используйте document.body.contains(). (или document.head.contains, если вы проверяете наличие таких элементов, как ссылка, скрипт и т. д.)

---

Примечания по использованию конкретной document ссылки относительно уровня узла ownerDocument:

Кто-то высказал идею использования MY_ELEMENT.ownerDocument.contains(MY_ELEMENT) для проверки наличия узла в документе. Хотя это может привести к намеченному результату (хотя в 99% случаев с большей степенью детализации, чем необходимо), это также может привести к неожиданным результатам, в зависимости от варианта использования. Давайте поговорим о том, почему:

Если вы имеете дело с узлом, который в данный момент находится в отдельном документе, например, сгенерированным с document.implementation.createHTMLDocument(), документом <iframe> или документом HTML Import, и используете свойство ownerDocument узла, чтобы проверить наличие в том, что вы думаете, будет вашим основным визуально визуализированным document, вы попадете в мир боли.

Свойство узла ownerDocument - это просто указатель на независимо от того, в каком текущем документе находится узел. Почти каждый сценарий использования contains включает проверку специфических document для присутствия узла. У вас есть 0 гарантий, что ownerDocument - это тот же документ, который вы хотите проверить, - только вы это знаете. Опасность ownerDocument заключается в том, что кто-то может ввести любое количество способов ссылки, импорта или создания узлов, которые находятся в других документах. Если они это сделают, и вы написали свой код, опираясь на относительный вывод ownerDocument, ваш код может сломаться. Чтобы гарантировать, что ваш код всегда дает ожидаемые результаты, вы должны сравнивать только с , на который конкретно ссылаются document, который вы собираетесь проверять, а не доверять относительным выводам, таким как ownerDocument.

Answer 2

Сделайте это:

var elem = document.createElement('div');
elem.setAttribute('id', 'my_new_div');

if (document.getElementById('my_new_div')) { } //element exists in the document.

Answer 3

Вы также можете использовать jQuery.contains:

jQuery.contains( document, YOUR_ELEMENT)

Answer 4

Самый безопасный способ - напрямую проверить, содержится ли элемент в документе:

function isInDocument(el) {
    var html = document.body.parentNode;
    while (el) {
        if (el === html) {
            return true;
        }
        el = el.parentNode;
    }
    return false;
}

var elem = document.createElement('div');
alert(isInDocument(elem));
document.body.appendChild(elem);
alert(isInDocument(elem));

Answer 5

function isInDocument(query){
  return document.querySelectorAll(query).length != 0;
}
// isInDocument("#elemid") 

Answer 6

Используйте compareDocumentPosition , чтобы увидеть, содержится ли элемент внутри document. PPK содержит сведения о совместимости браузера, а John Resig имеет версию для IE.