Adı XML öğesinin eşleşmeyen DOM öğesinin özniteliğini ayarla İsim üretim

Question

Bir HTML öğem var.

Özniteliklerinden birinin değerini getAttribute kullanarak okuyabilirim. Özellik adı XML Name üretimini eşleşmiyorsa

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

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

Ancak, ben setAttribute kullanamaz. Bir " InvalidCharacterError" istisnası atar.

setAttributeNS

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

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

aynı şekilde davranır. createAttribute ve createAttributeNS kaldırıldı ve aynı davrandılar.

Sonra, bu kısıtlamayı HTML'de atlayabildiğim için, bunu DOM'da atlamanın bir yolu var mı?

Alt ağacın, değiştirilmiş bir HTML serileştirmesinin seri hale getirilmesiyle değiştirilmesi bir seçenek değildir. Dahili verileri yok etmek istemiyorum.

Answer 1

Şunları yapabilirsiniz:

1. Kullanım innerHTML istenen özellik adıyla birlikte bir öğede bir HTML dizesini ayrıştırmak için.
2. Özniteliği bu öğeden kaldırın (öznitelikler yalnızca tek bir öğeye ait olabilir).
3. Özniteliğin değerini istediğiniz değere değiştirin.
4. Özniteliği istenen öğeye ayarlayın. hatta HTML ayrıştırıcı Tabii

   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>

, keyfi özelliklerini oluşturma yeteneğine sahip değildir. Örneğin, boşluk içeremezler.