javascript - 设置名称与 XML 的名称生产不匹配的 DOM 元素的属性

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 解析器也无法创建任意属性。例如，它们不能包含空格。