Установить атрибут элемента DOM, имя которого не совпадает с производным именем имени XML

Question

У меня есть элемент HTML.

Я могу прочитать значение одного из его атрибутов, используя getAttribute.

console.log(document.querySelector('div').getAttribute('~')); // "123"

<div class="test" ~="123"></div>

Однако, я не могу использовать setAttribute если имя атрибута не соответствует Name производства в XML. Он выдает исключение «InvalidCharacterError».

var el = document.querySelector('div'); 
 
el.setAttribute('~', '123'); // InvalidCharacterError

<div class="test"></div>

setAttributeNS ведет себя так же. createAttribute и createAttributeNS были удалены, и они вели себя одинаково.

Затем, учитывая, что я могу обойти это ограничение в HTML, есть ли способ обойти его в DOM?

Замена поддерева десериализацией измененной сериализации HTML не является вариантом. Я не хочу уничтожать внутренние данные.

Answer 1

Вы можете:

1. Использование innerHTML для разбора HTML-строку с элементом с желаемым именем атрибута.
2. Удалить атрибут из этого элемента (атрибуты могут принадлежать только одному элементу).
3. Измените значение атрибута на нужное значение.
4. Установите атрибут нужного элемента.

function setAttr(el, name, value) { 
 
    if(/[\u0000\u0009\u000A\u000C\u000D\u0020\u002F\u003D\u003E]/.test(name)) 
 
    throw new Error('InvalidCharacterError'); 
 
    var htmlString = '<br ' + name + ' />'; 
 
    var parser = document.createElement('div'); 
 
    parser.innerHTML = htmlString; 
 
    var attrs = parser.firstChild.attributes; 
 
    if(attrs.length !== 1 || attrs.item(0).name !== name) // Just to be safe 
 
    throw new Error('InvalidCharacterError'); // This should not happen 
 
    var attr = attrs.removeNamedItem(name); 
 
    attr.value = value; 
 
    el.attributes.setNamedItem(attr); 
 
} 
 
var el = document.querySelector('div'); 
 
setAttr(el, '~', '123'); 
 
console.log(el.getAttribute('~')); // "123"

<div class="test"></div>

Конечно, даже HTML анализатор не способен создавать произвольные атрибуты. Например, они не могут содержать пробелы.