Пользовательские самозакрывающиеся / непарные теги в HTML? - PullRequest
Новая
       40

Пользовательские самозакрывающиеся / непарные теги в HTML?

7 голосов
/ 01 февраля 2012

Следующий код [ jsfiddle ] ... 

var div = document.createElement("div");
div.innerHTML = "<foo>This is a <bar /> test. <br> Another test.</foo>";
alert(div.innerHTML);

... показывает эту проанализированную структуру: 

<foo>This is a <bar> test. <br> Another test.</bar></foo>

т.е. браузер знает, что <br> не имеет закрывающего тега, но поскольку <bar> является неизвестным тегом для браузера, предполагается, что ему нужен закрывающий тег.

Я знаю, что синтаксис /> (solidus) игнорируется в HTML5 и недопустим в HTML4, но в любом случае хотел бы как-то научить браузер, что <bar> не нужен конечный тег, и я могу его опустить, Возможно ли это?

Да, я пытаюсь (временно) неправильно использовать HTML-код для пользовательских тегов, и у меня есть конкретные причины для этого.В конце концов, браузеры должны игнорировать неизвестные теги и обращаться с ними как со встроенными тегами без стилей, поэтому я не должен ничего ломать, пока я могу быть уверен, что имена тегов никогда не будут использоваться в реальных стандартах HTML.

1 Ответ

6 голосов
/ 01 февраля 2012

Вы должны будете использовать Object.defineProperty в HTMLElement.prototype, чтобы переопределить метод установки и получения innerHTML своей собственной реализацией innerHTML, которая обрабатывает требуемые элементы как void . Посмотрите здесь , чтобы узнать, как innerHTML и анализатор HTML реализованы по умолчанию.

Обратите внимание, что Firefox отстой в наследовании, когда дело доходит до определения вещи в HTMLElement.prototype, где он фильтруется, например, до HTMLDivElement. В Opera все должно работать нормально.

Другими словами, то, какие элементы являются недействительными, зависит от парсера HTML. Синтаксический анализатор следует этому списку , и innerHTML в основном использует те же правила.

Итак, другими словами, если вы не хотите создавать свою собственную реализацию innerHTML в JS, вам, вероятно, следует просто забыть об этом.

Вы можете использовать live DOM Viewer , чтобы показать другим, как анализируется определенная разметка. Затем вы, вероятно, заметите, что те же самые конечные теги неявно закроют открытый элемент.

У меня есть какой-то устаревший код getHetML (не для установщика) здесь , в котором используется список элементов void. Это может дать вам некоторые идеи. Но написание реализации сеттера может быть более сложным.

С другой стороны, если вы используете createElement (), appendChild () и т. Д. Вместо innerHTML, вам не нужно беспокоиться об этом, а собственный метод получения innerHTML выведет неизвестные элементы с конечными тегами.

Обратите внимание, что вы можете рассматривать неизвестный элемент как xml и использовать XMLSerializer () и DOMParser () для выполнения действий: 

var x = document.createElement("test");
var serializer = new XMLSerializer();
alert(serializer.serializeToString(x));
var parser = new DOMParser();
var doc = parser.parseFromString("<test/>", "application/xml");
var div = document.createElement("div");
div.appendChild(document.importNode(doc.documentElement, true));
alert(serializer.serializeToString(div));

Это не совсем то, что вы хотите, но то, с чем вы можете играть. (Проверьте это в Opera вместо Firefox, чтобы увидеть разницу с атрибутами xmlns. Также обратите внимание, что Chrome не похож на Opera и Firefox.)

...