Question

我有一个HTML元素。

我可以使用getAttribute读取其中一个属性的值。

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

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

但是，如果属性名称与XML中的setAttribute生产不匹配，则无法使用Name。它会引发“InvalidCharacterError”异常。

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

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

setAttributeNS表现相同。 createAttribute和createAttributeNS已被删除，但行为相同。

然后，鉴于我可以在HTML中绕过这个限制，有没有办法在DOM中绕过它？

使用已修改的HTML序列化的反序列化替换子树不是一种选择。我不想破坏内部数据。

Answer 1

你可以：

使用innerHTML解析带有所需属性名称的元素的HTML字符串。
从该元素中删除属性（属性只能属于单个元素）。
将属性的值更改为所需的值。
将属性设置为所需元素。

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

设置DOM元素的属性，其名称与XML的Name生成不匹配

1 个答案: