DOM操作事件基础

Try Tomato

已于 2022-04-14 19:21:46 修改

阅读量517

点赞数 2

分类专栏： # + 浏览器 DOM 文章标签： DOM事件前端 javascript

于 2022-04-14 18:45:27 首次发布

本文链接：https://blog.csdn.net/weixin_63836026/article/details/124177646

版权

+ 浏览器 DOM 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

本文详细介绍了DOM操作，包括理解事件的构成、改变元素内容（innerText与innerHTML的区别）、调整元素属性、修改表单元素状态、操纵样式属性、控制表单焦点以及实现页面强制刷新。通过实例展示了JavaScript如何实现这些功能，帮助开发者更好地进行网页交互设计。

摘要由CSDN通过智能技术生成

一.了解事件

事件也就是触发响应机制，我们网页中的任何一个元素都可以产生某些DOM事件

事件由三个要素组成：事件源、事件类型、事件处理程序

什么是事件源？事件源就是事件被触发的对象，比如我们点击一个按钮，网页背景换了。那么这个按钮就是事件源

什么是事件类型？事件类型包含了如何触发、什么事件、什么事件等等

什么是事件处理程序？事件处理程序就是通过一个函数赋值的方式来完成一些交互动作

我们完成一个交互效果或者说一个事件通常需要以下三步：

1.获取事件源

2.绑定事件

3.函数赋值添加事件处理程序

二.改变元素内容

我们可以通过以下俩种文档属性来修改元素的内容：

//修改内容，并去除html标签、空格以及换行
element.innerHTML = '内容'


//修改内容，保留html标签、空格以及换行
element.innerText = '内容'

通过上面的了解，我们知道innerText是不识别html标签的，也是一个非标准的

而innerHTML可以识别html标签，并且是W3C标准

<body>
    <div>hello</div>
</body>
<script>
    const box = document.querySelector('div')
    box.innerHTML = '<em>你好——DOM</em>'
</script>

识别em斜体，并修改了div中的文字

如果是innerText呢？

<body>
    <div>hello</div>
</body>
<script>
    const box = document.querySelector('div')
    box.innerText = '<em>你好——DOM</em>'
</script>

好吧，并不是太友好

不过innerText有一个特点，我们有时也会使用到，它可以保留空格和换行，意思就是我们在html页面上是怎么写的，它在网页上呈现的就是怎样的

三.改变元素属性

我们还可以改变元素的属性：

img.src = './image/4.jpg'

还可以改变href,id,alt,title等等

四.修改表单元素

我们可以改变表单的type属性，value属性，checked属性，selected属性，disabled属性

当我们想要修改表单中的值：

<body>
    <input type="text" value="你好">
</body>
<script>
    const input = document.querySelector('input')
    input.value = 'hello'
</script>

如果我们想要禁用表单：

<body>
    <input type="text" value="你好">
</body>
<script>
    const input = document.querySelector('input')
    input.disabled = true
</script>

此时表单是禁用状态，变为灰色，我们不能输入内容

五.样式属性修改

我们可以修改行内样式：

//修改行内样式
element.style

//修改类名样式
element.className

tips：需要注意的是style中的里面的复合属性需要采用驼峰命名法：

div.style.backgroundColor = '#fff'

六.修改表单焦点

获得焦点：focus

失去焦点：blur

<body>
    <input type="text" value="你好">
    <button>点我</button>
</body>
<script>
    const input = document.querySelector('input')
    const btn = document.querySelector('button')
    btn.onclick = ()=>{
        input.focus()
    }
        
</script>

七.强制刷新（Ctrl + 5）

我们使用DOM来操作强制刷新网页的效果：

location.reload(true)

例子（点击按钮，刷新网页）：

<body>
    <button>点我刷新网页</button>
</body>
<script>
    const btn = document.querySelector('button')
    btn.onclick = ()=>{
        location.reload(true)
    }
</script>

如果我们需要修改的元素很多，建议将修改的属性写到CSS中给到一个类型，我们可以直接使用className修改类名，以此达到修改元素的效果