扩展Element.prototype，锚点问题

Question

考虑以下：

JS

Element.prototype.text = function(str) {
  this.textContent = str;
  return this;
}

let div = document.createElement('div').text('div text'); //Works fine
let a = document.createElement('a').text('anchor text'); //Blows up
document.body.append(div, a);

我添加到原型的函数很好地工作div或我试过的任何其他元素，除了锚元素，当我打印锚元素的原型链时，我确实发现它有预期的元素。

知道为什么这不适用于我试过的每个浏览器中的Anchor元素吗？

Answer 1

问题是：

https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement#Properties

HTMLAnchorElement.text

DOMString是Node.textContent属性的同义词。

所以，HTMLAnchorElement.prototype.text正在影响你的自定义Element.prototype.text。

另一个问题是HTMLAnchorElement.prototype.text是一个制定者 - 你不能简单地重新分配它，例如

HTMLAnchorElement.prototype.text = function(str){
   this.textContent = str
   return this
}

因为那将调用setter，导致Illegal Invocation。您必须首先删除原型上的text属性，然后分配给HTMLAnchorElement.prototype：

Element.prototype.text = function(str){
   this.textContent = str
   return this
}
delete HTMLAnchorElement.prototype.text;
HTMLAnchorElement.prototype.text = function(str){
  this.textContent = str
  return this
}

let div = document.createElement('div').text('div text')
let a = document.createElement('a').text('anchor text')
document.body.append(div,a)

Answer 2

这会爆炸，因为锚标签没有文本属性/字段，因此无法设置它。首先创建元素，然后创建文本并将其附加到链接。

var anchortext = document.createTextNode("your text here");
a.appendChild(anchortext);