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
}

因为它将调用设置器，结果为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);

扩展Element.prototype，出现锚点问题

2 个答案: