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

Question

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

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

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

Мои вопросы:

1. Может такое поведение можно предотвратить в любом случае, кроме делая двойной выход содержимого атрибута? (Это будет выглядеть так: <test>)
2. Кто-нибудь знает, почему браузер так себя ведет? Есть ли место в спецификациях HTML, что это поведение упоминается явно?

Answer 1

1) Это может быть сделано без делать двойной побег

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

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

 
function htmlEncode(value){ 
 
    //create a in-memory div, set it's 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>

Если вы заинтересованы в решении JS чистый ванильный

alert(htmlEncode(document.getElementById("hau").attributes[1].value)) 
 
function htmlEncode(html) { 
 
    return document.createElement('a').appendChild( 
 
     document.createTextNode(html)).parentNode.innerHTML; 
 
};

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

2) Почему браузер работает так?

Только из-за этого мы можем сделать несколько конкретных вещей, таких как включение котировок внутри поля ввода с предварительно заполненным полем, как показано ниже, что было бы невозможно, если бы единственный способ вставить ", добавляя себя который снова потребует побега с другой полукокса как \

<input type='text' value="&quot;You &apos;should&apos; see the double quotes here&quot;" />

Answer 2

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

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