Question

这是我正在处理的示例代码：

var DomClass = {
    Eprcent: ".item__percentage"
};
var EPrsent = function (prcent) {
    prcent.forEach(function (cur) {
    var ele = document.getElementById("exp-" + cur.id).innerHTML;
    var S = document.querySelector.call(ele, 'DomStrings.Eprcent'); //Uncaught TypeError: Illegal invocation 
    S.innerText = cur.prcnt + "%";
    });
}

我收到此异常：{7}在第7行。

如何在HTML中使用已经存在于HTML中的JavaScript代码，ID和类的HTML文档方法？

这是Uncaught TypeError: Illegal invocation class：

的数据结构

prcent

我知道我们可以直接使用文档查询，但这些HTML是使用唯一ID动态生成的。我必须根据我的HTML中的元素id放置信息。 ex document.getElementById（“exp-”+ cur.id）此行用于标识我想要放置值的HTML元素

我主要担心的是如何在QuerySelector上使用call方法，以便我可以将“this”指针更改为innerHTML变量？如果不可能，为什么呢？

Answer 1

querySelector对Document个对象起作用。它的签名是querySelector(String selector)

文档方法 querySelector（）以文档顺序返回文档中与指定选择器或选择器组匹配的第一个Element节点。如果未找到匹配项，则返回null。

与document.querySelector.call相关的问题是因为您提供了无效的this值。检查您是否将document.getElementById("exp-" + cur.id).innerHTML（字符串）设置为this的{{1}}参数（行：document.querySelector.call，5)）

Element 6)属性用于获取或设置表示序列化HTML的字符串，该字符串描述元素的后代。

因此，使用innerHTML上的call方法将querySelector指针更改为this是不可能的，因为该变量是字符串，不是文档对象。

在以下代码段中，您可以查看我们如何使用innerHTML（与任何其他功能使用querySelector.call没什么不同）：

call

const serializedHtml = document.getElementById('example').innerHTML;
console.log(typeof serializedHtml, serializedHtml); // -> string "<div id="inner">inner div</div><span>...</span>"

const inner = document.querySelector('#inner');
// equivalent call: same result using `.call` with the document object
const usingCall = document.querySelector.call(document, '#inner');
console.log(inner === usingCall, typeof inner, inner); // -> true object <div id="inner">inner div</div>

// using an empty Document
console.log(document.querySelector.call(new Document(), '#inner')); // -> null

// error code when pointing to innerHTML string
document.querySelector.call(serializedHtml, '#inner'); // -> Error: Uncaught TypeError: Illegal invocation...

#example, #inner {
  border: 1px solid;
  padding: 8px;
  text-align: center;
}

尝试将<div id="example"> <div id="inner">inner div</div> <span>...</span> </div>绑定到另一个文档实例对我没有意义，因为如果您有另一个 Document 对象，则可以始终直接调用{ {1}}其他文件的功能。

检查以下示例：

document.querySelector

希望所有这些都有帮助！

详细了解document.querySelector，Element.innerHTML，Function.prototype.call和DOMParser

Answer 2

如果元素是

之类的DOM元素，则可以直接在元素上使用querySelector

var DomClass ={
    Eprcent: ".item__percentage"
};
var EPrsent = function (prcent) {
   prcent.forEach(function (cur) {
       var ele = document.getElementById("exp-" + cur.id);
       var S = ele.querySelector(DomClass.Eprcent);
       S.innerText = cur.prcnt + "%";
   });
}

在JavaScript

2 个答案: