Setzen Sie das Attribut des DOM-Elements, dessen Name nicht mit der Produktion des XML-Namens übereinstimmt

Question

Ich habe ein HTML-Element.

Ich kann den Wert eines seiner Attribute mit getAttribute lesen.

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

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

Allerdings kann ich nicht setAttribute verwenden, wenn der Attributname nicht in XML Name Produktion entspricht. Es löst eine "InvalidCharacterError" Ausnahme aus.

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

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

setAttributeNS verhält sich das gleiche. createAttribute und createAttributeNS wurden entfernt, und sie verhielten sich gleich.

Dann, da ich diese Einschränkung in HTML umgehen kann, gibt es eine Möglichkeit, es in DOM zu umgehen?

Das Ersetzen des Teilbaums mit einer Deserialisierung einer geänderten HTML-Serialisierung ist keine Option. Ich möchte keine internen Daten zerstören.

Answer 1

Sie können:

1. Verwenden innerHTML ein HTML-String mit einem Elemente mit dem gewünschten Attributnamen zu analysieren.
2. Entfernen Sie das Attribut von diesem Element (Attribute können nur zu einem einzelnen Element gehören).
3. Ändern Sie den Wert des Attributs auf den gewünschten Wert.
4. Setzen Sie das Attribut auf das gewünschte Element.

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>

Natürlich auch der HTML-Parser ist nicht in der Lage beliebige Attribute zu schaffen. Zum Beispiel können sie keine Leerzeichen enthalten.