类型“节点”上不存在属性“querySelector”。 在 TypeScript
[英]Property 'querySelector' does not exist on type 'Node'. in TypeScript
问题描述
I have the following code: test.html
我有以下代码：test.html
<!DOCTYPE html>
<html>
<head lang="zh-CN">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title></title>
</head>
<body>
<div id="container">
<div id="box"></div>
</div>
<script src="test.js"></script>
</body>
</html>
and the ts file test.ts和 ts 文件 test.ts
var box = document.querySelector('#box');
console.log(box.parentNode.querySelector('#box'));
and i got the error.我得到了错误。
Error:(2, 28) TS2339: Property 'querySelector' does not exist on type 'Node'.
I found the following sentence in MDN我在MDN中找到了以下句子
parentNode is the parent of the current node. parentNode 是当前节点的父节点。 The parent of an element is an Element node, a Document node, or a DocumentFragment node.元素的父节点是 Element 节点、Document 节点或 DocumentFragment 节点。
here is my test这是我的测试
var ul = document.querySelector('ul')
undefined
ul.parentNode.toString()
[object HTMLDivElement]"
could someone tell me what's wrong with that?有人可以告诉我这有什么问题吗？
the version of typescript is 1.4 typescript 的版本是 1.4
7 个解决方案
解决方案1
21 2015-07-06 03:22:06
could someone tell me what's wrong with that
TypeScript's view of the API. TypeScript 的 API 视图。 At the moment there is no way to say that the type of foo.parentNode depends on the type of foo .目前没有办法说foo.parentNode的类型取决于foo的类型。 Currently it is inferred to always be of type Node and Node does not contain the API querySelector (available on Element )目前推断它始终是Node类型，并且Node不包含 API querySelector （在Element上可用）
Fix使固定
Use a type assertion as shown:使用类型断言，如下所示：
var box = document.querySelector('#box');
console.log((<Element>box.parentNode).querySelector('#box'));
解决方案2
17 2018-05-09 14:36:46
For those looking for a solution using Typescript and JSX ( .tsx ):对于那些使用 Typescript 和 JSX ( .tsx ) 寻找解决方案的人：
const box = document.querySelector('#box');
console.log((box.parentNode as HTMLElement).querySelector('#box'));
解决方案3
5 2020-01-01 05:29:26
For anyone encountering this problem with React Hooks / tsx, I updated my declaration of useRef with as HTMLElement | null对于使用 React Hooks / tsx 遇到此问题的任何人，我将我的 useRef 声明更新as HTMLElement | null as HTMLElement | null , then I could use optional chaining without error. as HTMLElement | null ，那么我可以使用可选链接而不会出错。
const formRef = useRef(null as HTMLElement | null);
const form = formRef?.current?.querySelector('form');
解决方案4
3 2016-12-17 17:49:01
利用
let box = <Element>document.querySelector('#box');
解决方案5
0 2018-05-18 05:39:51
The parentNode member returns the parent node, which can be of type Element or Node. parentNode 成员返回父节点，可以是 Element 或 Node 类型。 You have to use parentElement to traverse DOM tree instead of parentNode which traverse XML tree.您必须使用 parentElement 来遍历 DOM 树，而不是使用 parentNode 来遍历 XML 树。
var box = document.querySelector('#box');
console.log(box.parentElement.querySelector('#box'));
解决方案6
0 2018-12-16 15:52:29
I was using create-react-app 2.1 's TS setup.我正在使用create-react-app 2.1的 TS 设置。
For me it was a matter of adding dom to the lib list in tsconfig.json .对我来说，只需将dom添加到tsconfig.json的lib列表中即可。
"lib": [..., "dom"]
解决方案7
0 2022-09-08 22:43:14
If you use @ts-check inside.js file, there is a clean solution for you – just check if a node is an instance of Element or whatever it should be:如果你使用@ts-check inside.js 文件，有一个干净的解决方案适合你——只需检查一个节点是否是Element的实例或者它应该是什么：
const box = document.querySelector('#box');
const parentNode = box?.parentNode;
if (!(parentNode instanceof Element)) {
throw new Error('box.parentNode is not an Element');
}
console.log(parentNode.querySelector('#box'));
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.