TS之Html事件

自动刷新插件

先为VScode安装自动刷新浏览器插件Live Server

右击选择Open with Live Server打开

DOM操作

1、获取DOM元素

querySelector()作用：获取某一个DOM元素。

querySelectorAll()作用：同时获取多个DOM元素。

document对象：文档对象（整个页面）。

let title = document.querySelector('#title')
let title = document.querySelector('div')
let title = document.querySelector('.c1')

console.log(title)

//找出body标签下的所有div标签
document.body.querySelectorAll("div")
//找出body标签下的第一个div标签
document.body.querySelectorAll("div")[0]
//或
document.body.querySelector("div")

//找出所有class=box的标签
document.querySelectorAll(".box")
//找出所有p标签并且id=txt的标签
document.querySelectorAll("p#txt")
//找出所有name=sex的标签
document.querySelectorAll("*[name=sex]")
//找出所有class=txt且有name属性的p标签
document.querySelectorAll("p.txt[name]")
//或
document.querySelectorAll("p[class=txt][name]")

//在 document 中选取 class = test 的 div 的第一个子元素 p 的第一个子元素
document.querySelectorAll("div.test>p:first-child")[0];
//或
document.querySelector("div.test>p:first-child");

//找到所有 id属性以box开始的input标签 document.querySelectorAll("input[id^='box']");
//找到所有 id属性以box结束的input标签
document.querySelectorAll("input[id$='box']");
//找到所有 id属性包含box的input标签
document.querySelectorAll("input[id*='box']");

//选择表身中所有索引为偶数的tr标签
document.querySelectorAll("tbody tr:even");
//选择表身中所有索引为偶数的tr标签
document.querySelectorAll("tbody tr:odd");

断言

类型断言：手动指定更具体（精确）的类型

 <img id="image" src="https://static.oschina.net/uploads/user/1603/3206710_50.jpg?t=1483675086000" alt="">

let img = document.querySelector('#image') as HTMLImageElement
img.src = 'http://hwoo.com/img/hwoo.png'
//查看DOM元素类型
console.dir(img)

//读取H1内容
let titles = document.querySelector('#title') as HTMLHeadElement
console.log(titles.innerText += '--周杰伦')

案例

//给所有p标签的内容前面添加索引
let list = document.querySelectorAll("p") 
list.forEach(function(item,index){
    //给遍历后item断言
    let p = item as HTMLParagraphElement
    //拼接
    p.innerText = '['+ index +']'+p.innerText

})

2、设置样式

读取、设置

let aa = document.querySelector('a') as HTMLAnchorElement
aa.style.fontSize = '140px'
aa.style.color = 'red'

操作样式

//添加类样式
let aa = document.querySelector('a') as HTMLAnchorElement
aa.classList.add('b','c')
//移除类样式
aa.classList.remove('c')
//判断类名是否存在
let hasx = aa.classList.contains('b')
console.log(hasx)

3、设置内容

4、绑定（解绑）事件

绑定触发事件

let bb = document.querySelector('a')
//点击
bb.addEventListener('click',function(){
    console.log('鼠标点击触发')
})
//移入
bb.addEventListener('mouseenter',function(){
    console.log('鼠标摸我啦')
})

事件对象

bb.addEventListener('click',function(event){
    console.log(event.type)
    console.log(event.target)
    //断言
    let target = event.target as HTMLParagraphElement
    target.style.fontSize='24px'
})

移除事件

let ww = document.querySelector('#ww') as HTMLSpanElement
function wwClick(){
    console.log('点我有什么好处')
}
function cwwClick(){
    console.log('触摸我有什么好处')
}
ww.addEventListener('click',wwClick)
ww.addEventListener('mouseenter',cwwClick)

let yichu = document.querySelector('button') as HTMLButtonElement
yichu.addEventListener('click',function(){
    ww.removeEventListener('click',wwClick)
    ww.removeEventListener('mouseenter',cwwClick)
})

事件只触发一次

//once:如果值为true，会触发一次后，事件自动移除
bb.aaddEventListener('click',function(){},{ once:true })