具有 html 元素属性的类答案

【问题标题】：class with html element property具有 html 元素属性的类
【发布时间】：2022-01-17 18:14:43
【问题描述】：

我想创建一个以 div 元素为属性的类

<div id="corpus"></div>


class ProtoDiv {
    divElement: HTMLDivElement;

    constructor(){
        this.divElement = <HTMLDivElement>document.getElementById("corpus")!;

    }

    getDivElem(this:ProtoDiv){
        console.log(this.divElement)
    }
    
}

const myDiv = new ProtoDiv();

console.log(myDiv.divElement);

为什么属性返回null而不是html div元素？

【问题讨论】：

哇——里面有一些不寻常的代码！目前还不清楚这是如何工作的，你能解释一下吗？
! 在this.divElement =<HTMLDivElement>document.getElementById("corpus")!; 的末尾是什么意思
非空断言操作符
我试图将 div 元素的引用存储在类属性中
"non-null assertion operator" 会导致错误 - 就像 "divElement: HTMLDivElement" 和 "this:ProtoDiv" 一样

标签： javascript html typescript es6-class

【解决方案1】：

您的代码完全可以作为纯 JavaScript 运行（我刚刚粘贴了 TypeScript 转换的结果）。您一定缺少脚本执行顺序之类的东西（代码执行时div是否存在？）。

"use strict";
class ProtoDiv {
    constructor() {
        this.divElement = document.getElementById("corpus");
    }
    getDivElem() {
        console.log(this.divElement);
    }
}

const myDiv = new ProtoDiv();

console.log(myDiv.divElement);

&lt;div id="corpus"&gt;&lt;/div&gt;

【讨论】：