Любые умные способы сериализации элемента HTML? - JavaScript

Question

Я пытаюсь сохранить ссылку на тег HTML для последующего повторного использования.

Например, если я нажму на div и сохраню указатель на этот div в Javascript, появится либыть в состоянии я мог сериализовать такой указатель?Таким образом, я мог бы десериализовать его и использовать указатель в другом экземпляре веб-приложения?

---

Только следующие методы, о которых я могу думать, следующие:

• Использовать атрибуты id или name

• Создать CSS-селектор для этого элемента

Есть еще идеи, ребята?=) * +1022 *

Answer 1

Можно попытаться сгенерировать строку XPath для элемента - чем сложнее строка, тем точнее и переносимее будет идентификатор.

Например, простая строка запроса XPath только для элемента не будет очень уникальной и, вероятно, будет повторяться:

'//html/body/div/div/p/strong'

Факторинг по всем атрибутам может быть излишним

<code>'//html/body[@onclick="somereallylongjavascript" and class="nosidebar"]/div[@id="wrapper" and @class="posts"]/div[@class="entry" and @id="firstentry"]/p[@class="first"]/strong'

Но вы, вероятно, могли бы найти хорошую золотую середину, ограничившись определенными атрибутами, возможно, просто идентификаторами:

'//html/body/div[@id="wrapper"]/div[@id="firstentry"]/p/strong'

<Ч />

Вы можете извлекать XPath изначально во всех браузерах. Есть метод W3C:

var myElement=document.evaluate(
  XPathstring,
  document,
  function(ns){return{'html':'http://www.w3.org/1999/xhtml','':null}[ns];},
  9,
  null
).singleNodeValue;

(функция ns предназначена исключительно для поддержки application / xhtml + xml)

Метод IE более упрощен, но менее гибок:

var myElement=document.selectSingleNode(XPathString);

<Ч />

Создание строки XPath - это, конечно, другая проблема - есть разные варианты, но, к сожалению, ни одна из них не является родной. XPather - это дополнение к moz, которое предоставляет интерфейс, который делает это - его источник написан на языке MPL и относительно прост, но, вероятно, больше, чем вам нужно. Существуют различные более короткие сценарии, которые предоставляют более простые решения.

Редактировать: Джастин Джонсон предоставил ссылку на SO-ответ, содержащий ОЧЕНЬ короткую XPath-генерирующую функцию. Это немного упрощенно, оно использует запись нечетного идентификатора (id(blah) вместо [@id="blah"]) и не toLowerCase() его tagName s, что может ухудшить мобильность, но в остальном выглядит идеально для ваших нужд.

Answer 2

Как насчет innerHTML элемента?

Answer 3

Что именно вы пытаетесь сохранить?И где именно вы его повторно используете?

Элемент DOM будет очень специфичен для данного конкретного рендеринга браузера на этой странице - простое нажатие на обновление даст вам совершенно новый элемент DOM.Итак, что по этому поводу нужно сохранить и восстановить?

Answer 4

Другая идея - создать собственные пользовательские идентификаторы для всех элементов на основе некоторых правил:

1. идентификатор элемента начинается с родительского идентификатора.-> customid = "body / item"
2. Если доступен нормальный идентификатор, используйте его.если нет, используйте тип элемента.Чем добавить порядок в текущем поддереве.

, поэтому вы получите что-то вроде «body-0 / item-0», например, выше или «body-0 / div-4», если id неизвестен.

Когда вы попытаетесь использовать свой "пользовательский идентификатор", и страница изменится, у вас будет возможность найти ближайший элемент, сравнив все элементы пользовательского идентификатора с сохраненным "пользовательским идентификатором".

Answer 5

XPath представляется наиболее подходящим; однако, только если структура страницы (относительно) статична по отношению к этому узлу. Вот некоторые ссылки и код:

Метод получения xpath произвольного узла и пример использования

getPathTo($("a")[4]):

выходы

"id("hlinks-custom")/A[2]"

Документация MDC XPath

Answer 6

Исходя из того, как вы сформулировали свой вопрос, я не думаю, что это было бы возможно.Что именно вы подразумеваете под «другим экземпляром веб-приложения»?Поскольку JavaScript будет работать на стороне клиента, вы не сможете обмениваться данными между клиентами.Однако вы можете захотеть сделать что-то вроде сохранения / чтения из базы данных.Можете ли вы описать больше функций, которые вы пытаетесь достичь?

Answer 7

Похоже, JSON.stringify (yourDivReference) и JSON.parse (serializedObjectString) могут делать то, что вы ищете.

ОБНОВЛЕНИЕ: На самом деле, методам JSON не нравятся циклические ссылки в DOM. См. Этот вопрос для получения более подробной информации: Как сериализовать узел DOM в JSON, даже если есть циклические ссылки?

Я, однако, согласен с Сергеем, что использование идентификатора кажется лучшим способом.

Answer 8

Я пробовал что-то вроде этого:

{tag:"div", style:"float:left;", "class":"fancy", inner:[
  {tag:"a", href:"http://google.com", inner:"A link to google!" },
  {tag:"a", href:"http://yahoo.com", inner:"A link to yahoo!" }
]}

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

edit - возможно, я полностью неправильно понял, что вы хотите ... если вы хотите сериализовать дескриптор этого элемента, например, что будет возвращено getElementById, вы можете просто использовать идентификатор.

Answer 9

Единственным логичным способом является использование идентификатора.

Обычно нетрудно назначить идентификатор всем важным элементам на основе значений базы данных.