JavaScript之DOM(一)(获取元素、事件基础、操作元素）

最新推荐文章于 2024-07-18 11:48:33 发布

2401_85123349

最新推荐文章于 2024-07-18 11:48:33 发布

阅读量745

点赞数 11

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/2401_85123349/article/details/139929241

版权

4、返回对文档中所有Form对象引用

document.forms

5、返回对文档中所有Image对象引用

document.images

三、事件基础

=====================================================================

1、事件三要素

事件三要素是指事件源、事件类型和事件处理程序这3部分。

事件源：触发事件的元素（谁触发了事件）

事件类型：如click 单击事件（触发了什么事件）

事件处理程序：事件触发后要执行的代码（函数形式），也称事件处理函数（触发事件以后要做什么）

做一个“点击按钮弹出警示框”的案例。如下所示：

点击

运行结果如下：

在这里插入图片描述

2、执行事件的步骤

1.获取事件源

2. 注册事件（绑定事件）

3. 添加事件处理程序（采取函数赋值形式）

如上例所示，就是一个采用了该步骤的事件。

3、常见的鼠标事件

| 鼠标事件 | 触发条件 |

| — | — |

| onclick | 鼠标点击左键触发 |

| onmouseover | 鼠标经过触发 |

| onmouseout | 鼠标离开触发 |

| onfocus | 获得鼠标焦点触发 |

| onblur | 失去鼠标焦点触发 |

| onmousemove | 鼠标移动触发 |

| onmouseup | 鼠标弹起触发 |

| onmousedown | 鼠标按下触发 |

四、操作元素

======================================================================

JavaScript 的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容、属性等。

1、改变元素内容

分别有如下几种方式：

//1.

element.innerHTML

设置或返回元素开始和结束标签之间HTML。包括HTML标签，同时保留空格和换行

//2.

element.innerText

设置或返回元素的文本内容，在返回的时候会去除HTML标签和多余的空格、换行，在设置的时候会进行特殊字符转义

//3.

element.textContent

设置或者返回指定节点的文本内容，同时保留空格和换行

例如：

分别利用innerHTML、innerText、textContent属性在控制台输出一段HTML文本。

代码如下：

你好呀

你好，我是王欢。

你是？

我是小熊哦！

打印结果为：

在这里插入图片描述

我们可以发现这三种方法打印的结果也是不同的。

innerHTML在使用时会保持编写的格式以及标签样式

innerText去掉所有格式以及标签的纯文本内容

textContent属性在去掉标签后会保留文本格式

2、常用元素的属性操作

在DOM中，HTML属性操作是指使用JavaScript来操作一个元素的HTML属性。一个元素包含很多的属性，例如，对于一个img图片元素来说，可以操作它的src、title属性等，或者对于input元素来说，可以操作它的disabled、checked、selected属性等。

例如：通过修改图片的路径实现点击不同的按钮出现不同的图片的效果。

图1

图2