likes
comments
collection
share

TypeScript Dom操作（上）

作者站长头像
站长
· 阅读数 9

介绍

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，发现标题已经变了

TypeScript Dom操作（上）

获取元素

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)

TypeScript Dom操作（上）

获取多个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)

TypeScript Dom操作（上）

操作文本内容

//读取
dom.innerText
//设置
dom.innerText = ‘xxx’

注意：需要通过类型断言来指定DOM元素的具体类型，才可以使用innerText属性

<h1 id="title">发如雪</h1>

let title = document.querySelector("#title") as HTMLHeadingElement
console.log(title.innerText)
title.innerText = '东风破'

TypeScript Dom操作（上）

注意：设置内容时，会覆盖原来的内容，如果想实现追加内容可以：

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
})

TypeScript Dom操作（上）