Почему браузер автоматически присваивает значения атрибутов тегов html?

Ниже я использую HTML-тег и использую JavaScript для извлечения значения атрибута виджета. Этот код будет предупреждать <test> вместо <test>, поэтому браузер автоматически отменяет значения атрибутов:

alert(document.getElementById("hau").attributes[1].value)

<div id="hau" widget="&lt;test&gt;"></div>

Ответ 1

1) может без выполнять двойной escape

Похоже, что ваш ближе к htmlEncode(). Если вы не против использовать jQuery

alert(htmlEncode($('#hau').attr('widget')))

function htmlEncode(value){
  //create a in-memory div, set it inner text(which jQuery automatically encodes)
  //then grab the encoded contents back out.  The div never exists on the page.
  return $('<div/>').text(value).html();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hau" widget="&lt;test&gt;"></div>

Ответ 2

Браузер отменяет значение атрибута, как только он анализирует документ (упомянутый здесь). Одна из причин может заключаться в том, что в противном случае было бы невозможно включить, например, двойные кавычки в значение вашего атрибута (ну, технически это было бы, если бы вы поместили значение в одинарные кавычки вместо этого, но тогда вы не смогли бы включить одинарные кавычки в значении).

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