7、TypeScript 中的 DOM 操作与类和接口使用

TypeScript 中的 DOM 操作与类和接口使用

1. DOM 操作

1.1 添加新的待办事项

在网页应用中，添加新的待办事项需要为 main_add 按钮添加事件监听器，在事件处理函数中组装待办事项的 HTML 部分。以下是具体步骤和代码：
1. 获取 main_add 按钮并添加点击事件监听器：

let mainAdd = document.getElementById("main_add");
if (mainAdd != null) mainAdd.addEventListener("click",
    (evt: MouseEvent) =>
    {
        // 在这里组装待办事项，并将其追加到 ul 元素中
    });

2. 创建包含待办事项文本的 span 元素：

let textSpan = document.createElement("span");
textSpan.innerText = " "+(document.getElementById("main_input") as HTMLInputElement).value;

3. 创建带有删除图标的 span 元素：