TypeScript Dom操作（上）
介绍
DOM 是浏览器提供的（浏览器特有)，专门用来操作网页内容的一些JS对象(API)
通过DOM操作，可以让Js/Ts控制页面（(HTML)内容，让页面“动”起来，从而实现web开发
HTML标签和DOM的关系：每个HTML标签都有对应的DOM对象
DOM操作的套路(技巧)︰先找到 后修改
1、我们来看一个简单例子。首先我们在终端运行tsc --watch hello.ts
2、然后在根目录新建 demo.html，引入生成的 hello.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<link rel="stylesheet" href="public/css/bootstrap.css">
<script src="hello.js"></script>
</head>
<body>
</body>
</html>
3、在 hello.ts 中修改网页标题
//document对象:文档对象（整个页面)，是操作页面内容的入口对象
document.title = 'TS学习'
4、运行 demo.html，发现标题已经变了
获取元素
1、queryselector (selector)：获取某一个DOM元素
document 对象：文档对象(整个页面)，是操作页面内容的入口对象
selector 参数：是一个css选择器（标签、类、id选择器等）
作用：查询(获取）与选择器参数匹配的 DOM元素，但是，只能获取到第一个!
推荐：使用id选择器(唯一)
例如：获取页面中 id 为 title 的 DOM元素
let title = document.queryselector ( '#title ')
demo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<link rel="stylesheet" href="public/css/bootstrap.css">
</head>
<body>
<h1 id="title">发如雪</h1>
<p class="c1">狼牙月 伊人憔悴</p>
<p class="c1">我举杯 饮尽了风雪</p>
<script src="hello.js"></script>
</body>
</html>
hello.ts
let title = document.querySelector("#title")
console.log(title)
运行 demo.html 打印出了 h1 标签
<h1 id="title">发如雪</h1>
修改 hello.ts
// 都只能获取第一个 p 标签
let title = document.querySelector("p")
// let title = document.querySelector("c1")
console.log(title)
<p class="c1">狼牙月 伊人憔悴</p>
2、queryselectorAll (selector)作用：同时获取多个DOM元素
类型断言
调用queryselector()通过 id 选择器获取 DOM元素时，拿到的元素类型都是Element，因为无法根据 id 来确定元素的类型，所以该方法就返回了一个宽泛的类型：元素(Element)类型
不管是 h1 还是 img 都是元素。但这样导致新问题：无法访问 img 元素的src属性了。因为 Element 类型只包含所有元素共有的属性和方法（比如: id属性)
解决方式：使用类型断言，来手动指定更加具体的类型(比如，此处应该比 Element 类型更加具体)。使用as指定更具体的类型
index.html中
<body>
<h1 id="title">发如雪</h1>
<image id="image" src="./1.png"></image>
<script src="hello.js"></script>
</body>
hello.ts中
//获取h1元素
let title = document.querySelector("#title")
//获取img元素
let img = document.querySelector("#image") as HTMLImageElement
img.src = './2.png'
解释：我们确定id="image"的元素是图片元素，所以，我们将类型指定为HTMLImageElement
技巧：通过console.dir()打印DOM元素，在属性的最后面，即可看到该元素的类型
let title = document.querySelector("#title")
console.dir(title)
获取多个DOM元素
使用：document.queryselectorAll(selector)可以获取所有与选择器参数匹配的DOM元素，返回值是一个列表
推荐：使用 class 选择器
示例：let list = document.queryselectorAll('.a')可以获取页面中所有 class 属性包含 a 的元素
<p class="a">狼牙月 伊人憔悴</p>
<p class="b">我举杯 饮尽了风雪</p>
<p class="a c">是谁打翻前世柜 惹尘埃是非</p>
<script src="hello.js"></script>
let list = document.querySelectorAll(".a")
console.log(list)
操作文本内容
//读取
dom.innerText
//设置
dom.innerText = ‘xxx’
注意：需要通过类型断言来指定DOM元素的具体类型，才可以使用innerText属性
<h1 id="title">发如雪</h1>
let title = document.querySelector("#title") as HTMLHeadingElement
console.log(title.innerText)
title.innerText = '东风破'
注意：设置内容时，会覆盖原来的内容，如果想实现追加内容可以：
title.innerText += '东风破'
练习：给每个p标签前增加索引
原来 html
<p class="a">狼牙月 伊人憔悴</p>
<p class="b a">我举杯 饮尽了风雪</p>
<p class="a c d">是谁打翻前世柜 惹尘埃是非</p>
let list = document.querySelectorAll('.a')
list.forEach(function (item,index) {
let p = item as HTMLParagraphElement
p.innerText = "[" + index + "]" + p.innerText
})
转载自:https://juejin.cn/post/7127089997697515557