TypeScript Dom操作

最新推荐文章于 2024-06-07 10:26:36 发布
最新推荐文章于 2024-06-07 10:26:36 发布
阅读量7.4k 收藏 8
点赞数 3
分类专栏： TypeScript学习笔记 文章标签： typescript javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010356768/article/details/124499952
版权
这篇博客详细介绍了DOM操作的基础知识，包括如何获取元素、修改文本内容、操作样式和处理事件。通过示例展示了queryselector与querySelectorAll的区别，以及如何使用类型断言和事件监听。还涵盖了如何通过classList进行类样式操作，并给出了实际的事件处理程序示例，如点击和鼠标移入事件。最后讲解了如何添加和移除事件监听器，以及如何确保事件处理程序的唯一性。
摘要由CSDN通过智能技术生成

文章目录

介绍

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 标签
在这里插入图片描述
修改 hello.ts

// 都只能获取第一个 p 标签
let title = document.querySelector("p")
// let title = document.querySelector("c1")
console.log(title)

在这里插入图片描述

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

在这里插入图片描述

操作样式

方式一
dom.style属性：行内样式操作，可以设置每一个样式属性（比如，字体大小、文字颜色等)

说明：所有的样式名称都与 css 相通，但命名规则为驼峰命名法

dom.style.fontSize = '30px'
dom.style.display = 'none'

我们来在代码中练习一下

<p id="txt">狼牙月 伊人憔悴</p>

let p = document.querySelector('#txt') as HTMLParagraphElement
//读取
console.log("字体大小：" + p.style.fontSize)
//设置
p.style.fontSize = '30px'
p.style.color = 'red'
console.log("字体大小：" + p.style.fontSize)

在这里插入图片描述
在这里插入图片描述
开始没有打印出字体大小，因为我们还没设置，设置后再打印就有值了

方式二
dom.classList属性：类样式操作，也就是操作类名，比如，添加类名、移除类名等。它包含三个常用方法：添加、移除、判断是否存在

【添加】
dom.classList.add(类名1，类名2，...)

参数表示：要添加的类名，可以同时添加多个

比如：
<p class="a"></p>
dom.classList.add ( 'b ', 'c')
就是添加 class 样式为 class=“a b c”

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>标题</title>
    <link rel="stylesheet" href="public/css/bootstrap.css">
    <style>
        .a {
            font-size: 30px;
        }

        .b {
            color: green;
        }

        .c {
            background-color: skyblue;
        }
    </style>
</head>
<body>
<p id="txt" class="a">狼牙月 伊人憔悴</p>
<script src="hello.js"></script>
</body>
</html>

let p = document.querySelector('#txt') as HTMLParagraphElement
p.classList.add('b','c')

在这里插入图片描述
【移除】
dom.classListremove(类名1，类名2， ...)

参数表示：要移除的类名，可以同时移除多个。

比如：
<p class="a b c"></p>
dom.classList,remove ( 'a', 'c')
那么移除 class 样式后就变成了 class=“b”

还是上边的 html，我们把 class a 移除

let p = document.querySelector('#txt') as HTMLParagraphElement
p.classList.remove('a')

在这里插入图片描述
【判断类名是否存在】
let has = dom.classList.contains(类名)

参数表示：要判断存在的类名

比如：
<p class="b"></p>
dom.classList.contains( 'a' )//false
dom.classList.contains ('b')//true

还是刚才的 html

let p = document.querySelector('#txt') as HTMLParagraphElement
console.log(p.classList.contains('a'))//true

操作事件

在浏览网页时，我们经常会通过移入鼠标、点击鼠标、敲击键盘等操作，来使用网站提供的功能。如果要让我们自己实现这样的功能，就需要通过操作事件来实现
实际上，移入鼠标、点击鼠标、敲击键盘等，都是常见的DOM事件

操作事件的两个方法：
addEventListener添加(绑定)事件
removeEventListener移除(解绑）事件

addEventListener添加事件
dom. addEventListener (事件名称，事件处理程序)
作用：给DOM元素添加事件
事件名称：字符串，比如: click(鼠标点击事件)、 mouseenter(鼠标进入事件)
事件处理程序：回调函数、指定要实现的功能，该函数会在触发事件时调用

示例：鼠标点击按钮，打印内容

btn.addEventListener('click', function() {
	console.log ('鼠标点击事件触发了')
})

实践一下，我们给 button 绑定点击事件

<button id="btn">点我打印</button>

let btn = document.querySelector('#btn')
btn.addEventListener('click',function () {
    console.log("点击事件触发了")
})

在这里插入图片描述
也可以绑定鼠标移入事件

btn.addEventListener('mouseenter',function () {
    console.log("鼠标移入事件触发了")
})

在这里插入图片描述
事件对象(event)，是事件处理程序(回调函数)的参数，表示与当前事件相关的信息，比如：事件类型(type)、触发事件的DOM元素(target)等

比如：

btn.addEventListener ( 'click ', function (event){
	console.log (event.type)//click
	console.log(event.target)//btn元素
})

来做个练习，点击按钮让文字变大
在这里插入图片描述

<button id="btn">点我变大</button>

let btn = document.querySelector('#btn')
btn.addEventListener('click', function (event) {
    console.log(event.type)//click
    console.log(event.target)//btn元素
    let target = event.target as HTMLButtonElement
    target.style.fontSize = '30px'
})

同时，控制台输出了
在这里插入图片描述
removeEventListener移除(解绑）事件
dom.removeEventListener(事件名称，事件处理程序)
作用：移除给DOM元素添加的事件，移除后，事件就不再触发了
事件名称：同添加事件的第一个参数
事件处理程序：必须要跟添加事件时的事件处理程序是同一个，否则无法移除!

正确方式：

function handleclick () { }
btn.addEventListener('click ', handleclick)
btn.removeEventListener('click', handleclick)

说明：添加和移除事件时，事件处理程序是同一个，都是函数 handleclick

错误演示:

btn.addEventListener ( 'click ' , function () { })
btn.removeEventListener ( 'click ', function () { })

注意：以上两个函数虽然长的一样，却是不同的函数(双胞胎，不是同一个人)

<button id="btn">点我</button>
<button id="remove">移除上面按钮click事件</button>

let btn = document.querySelector('#btn')
let removeBtn = document.querySelector('#remove')

function handleClick() {
    console.log("click事件触发了")
}

btn.addEventListener('click', handleClick)
removeBtn.addEventListener('click', function () {
    btn.removeEventListener('click', handleClick)
})

在这里插入图片描述
如果事件只需要触发—次，可以在添加事件时处理，即传入第三个参数，将once属性设置为true。once如果值为 true，会在触发事件后，自动将事件移除，达到只触发一次的目的

btn.addEventListener ( 'click', function () {}, { once: true })

let btn = document.querySelector('#btn')

btn.addEventListener('click', function () {
    console.log("click事件触发了")
}, {once: true})

在这里插入图片描述
函数声明形式的事件处理程序说明

可以先使用函数，再声明函数
原因：函数声明在当前 ts 文件中的任意位置都有定义，所以可以先调用，再声明

btn.addEventListener ( 'click ', handleclick)
function handleclick() { }
Errol_King
关注
  • 3
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
TypeScript的类型
yuyangchen123的博客
07-15 663
类型 TypeScript通过向JavaScript增加可选的静态类型声明来把JavaScript变成强类型的程序语言。 当一个变量的类型无法被推测时，一个特殊的类型 any会作为他的类型 类型 描述 boolean var isDone： boolean = false; number 所有的数字在TypeScript中都是浮点数。 var height: number = 6; string var name:string = "bob"; name = 'smith';
详解Angular如何正确的操作DOM
08-27
Angular框架为开发者提供了一系列内置指令和API，用于在不直接操作DOM的情况下进行DOM操作，这有助于保持代码的清晰和可维护性。直接操作DOM的原生方法通常与Angular的变更检测机制不兼容，容易造成性能问题，因此在...
typescript 对dom操作展开和隐藏
GAOJINGZHEN36的博客
11-05 406
判断展开/收起的dom显示和隐藏，小于68隐藏功能 获取dom结构，页面数据page_list const dom_text = document.querySelectorAll('.circular_text') as any; const heights: any = []; dom_text.forEach((item: any, index: number) => { // console.log(item.offsetHeight......
Ts项目中操作DOM时定义类型总结
最新发布
Liu
06-07 529
在使用TypeScript进行DOM操作和事件绑定时，正确地定义元素类型可以显著提升代码的可读性和健壮性，减少类型错误。以下是一些常用类型和实践建议：常用类型。
Typescript学习系列---《DOM》
A_bad_horse的专栏
03-21 823
DOM (Document Object Model) 文档对象模型 DOM是所有浏览器都遵循的规范 一个网页就是一个DOM document. document.getElementById('xx'):返回一个对象 document.getElementsByTagName('li'):返回一组对象 document.querySelectorAl...
从TypeScript视角看HTML DOM（四）：Event Flow
HermitSun的博客
07-15 1275
说起DOM，除了HTML到DOM树结点的映射之外，最让人印象深刻的，大概也是最重要的，就是事件了。我们在浏览器中的操作，大多属于UI事件。我们先来看看W3C对UI事件的定义： This specification defines UI Events which extend the DOM Event objects defined in DOM. UI Events are those typ...
TypeScript渲染dom函数
Lidppp的博客
09-06 1691
以后可能会用到 保存一下, 也顺便分享给有需要的人 先实现的是以方法形式实现的, 心情好的话封装个类出来 // 元素挂载style export function styleList(dom: HTMLElement, styleList: object) { for (let item in styleList) { dom.style[item] = styleList[item]; } } // 元素挂载className export function classN
TypeScript与DOM操作：深入理解相关类型及实战示例
昔人'
05-12 377
TypeScript允许通过接口扩展来增强现有类型，这对于给DOM元素添加自定义属性非常有用。示例// 输出: Custom Value。
ts-dom-router:只是另一个DOM Typescript路由器
03-18
**标题解析：** "ts-dom-router" 是一个专门针对DOM操作和管理路由的库，它使用了TypeScript作为开发语言。"只是另一个DOM Typescript路由器" 表明这个库是众多DOM路由器中的一个，可能提供了与其它类似库相似但可能...
TypeScript 贪吃蛇源码
03-21
TypeScript可以与HTML和CSS结合，使用DOM操作来实现游戏的可视化。 在TypeScript中，我们可以使用`enum`来定义方向常量，如`UP`, `DOWN`, `LEFT`, `RIGHT`，以便更好地控制蛇的移动。同时，`interface`可以用来定义...
自制日历，typescript编写
11-20
这可以通过DOM操作（例如，添加/移除类名，改变元素内容）来实现。 7. **时间区间处理** 待办事项的时间段需要以可读格式展示，例如“9:00 - 11:30”。JavaScript的`toLocaleTimeString()`方法可以用于格式化时间...
Exemplos-TDS:用于演示TDS故事JavaScript和TypeScript语言示例
05-22
**TDS（Theming and Design System）** 是一个框架或工具集，主要用于创建和维护一致的设计语言和用户体验。...同时，这也是一种实践JavaScript和TypeScript编程技巧的好方法，尤其是当涉及到DOM操作和事件处理时。
从TypeScript视角看HTML DOM（六）：Scripting
HermitSun的博客
07-15 1239
这一篇可能和TypeScript没太大关系。 看到TypeScript实现的script接口（去掉了deprecate的属性），除了我们平时经常用的几个属性之外，还可以添加监听，倒是让人耳目一新。 interface HTMLScriptElement extends HTMLElement { async: boolean; defer: boolean; src: ...
dom的typescript类型定义
weixin_42283818的博客
07-16 1828
typescript、dom 、ts、type如何定义dom
从TypeScript视角看HTML DOM（一）：前言
HermitSun的博客
07-13 1481
按照信息隐藏的观点，一个模块应该暴露自己的职责，同时隐藏具体实现。 其实，我们认识一个模块，其实只需要一份“契约”而已：知道了供接口、需接口，和本身的“不变式”，这个模块的职责也就清楚了（模块的交互体现在供需接口里，作为参数出现）。 以往，JavaScript没有强类型，在契约的实现上有所欠缺；现在TypeScript提供了强类型和接口机制，正好给了我们一个更深刻（也更简单）的认识DOM的机会。 ...
【TypeScript】Class中dom元素监听事件的this指向问题
Vangogh的博客
02-13 359
Class中dom元素监听事件的this指向问题
React-ts获取Dom元素并做相关操作
suqiusi7571的博客
02-20 2198
React-ts获取Dom元素并做相关操作 react-ts获取button按钮元素，并在点击时切换颜色（添加或移除类名） export default function () { const ascRef = useRef<HtmlButtonElement>(null) const descRef = useRef<HtmlButtonElement>(null) const ascOrder = () => { ascRef.cur
Vue3 + Ts 获取dom
pony君的博客
02-01 2154
【代码】Vue3 + Ts 获取dom。
ul dom元素typescript 类型
04-01
在 TypeScript 中，DOM 元素类型可以被定义为 `HTMLElement`。它是一个表示 HTML 元素的接口，它包含了所有 HTML 元素的共同属性和方法。例如，下面是一个使用 `HTMLElement` 类型的 TypeScript 示例： ```typescript const myElement: HTMLElement = document.getElementById('my-element'); myElement.style.color = 'red'; myElement.innerHTML = 'Hello, world!'; ``` 在这个例子中，我们使用 `document.getElementById` 方法获取了一个具有 `id` 属性为 `my-element` 的元素，并将它的引用存储在 `myElement` 变量中。然后，我们可以使用 `myElement` 对象的属性和方法来操作该元素的样式和内容。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值