《Web前端基础》课件——任务7：学习DOM模型 元素属性操作.pptx

元素属性操作

元素属性操作

在一个功能完善的页面中，交互效果往往

多种多样，仅通过操作元素的内容和样式

并不能满足开发条件，我们还需要学习如

何操作元素属性。

在DOM中，我们可以操作property属性、

attribute属性和data-*属性。

1操作property属性

例如，img元素、input元素常用的property属性如下。

limg元素：src、title属性。

linput元素：disabled、checked和selected属性。

2操作attribute属性

操作attribute属性的方式如下。

l设置属性：通过元素对象的setAttribute()方法可以设置属性。

element.setAttribute(属性,值);

l获取属性值：通过元素对象的getAttribute()方法可以获取属性值。

element.getAttribute(属性);

l移除属性：通过元素对象的removeAttribute()方法可以移除属性。

element.removeAttribute(属性);

3【案例】Tab栏切换

Tab栏在网站中的使用非常普遍，它的

优势在于可以在有限的空间内展示多块

的内容，用户可以通过单击标签项在多

个内容块之间进行切换。

3【案例】Tab栏切换

编写HTML页面

Tab栏由上、下两部分结构组成，上半部分是Tab栏的标签结构，用于展示标签项；下半

部分是Tab栏的内容区，用于展示内容项。每个标签项都有相对应的内容项，通过鼠标单

击Tab栏的标签项可以实现对应内容项的切换。

3【案例】Tab栏切换

通过JavaScript实现Tab栏的切换效果

首先需要获取目标元素，然后通过for语句为每个元素对象注册单击事件，最后

实现Tab栏的切换效果。

3【案例】Tab栏切换

通过JavaScript实现内容区的展示效果

内容区展示的内容随标签项的切换而切换，我们可以通过操作attribute属性来完成。

4动手实践：显示和隐藏密码

案例需求：使用两张不同状态的“眼睛”图片充当按钮功能。

图片中“眼睛”睁开时密码显示，闭合时密码隐藏。

默认情况下，输入的密码是隐藏的，对应闭合状态的“眼睛”。

隐藏密码的效果图显示密码的效果

图

4动手实践：显示和隐藏密码

案例实现思路

首先通过img和input等元素搭建密码结构，然后通过

JavaScript操作元素的属性，通过更改input元素的type

属性完成密码框和文本框的切换，并切换对应的“眼睛”

图片。

THANKYOU!