前端js-----DOM之操作元素

这篇博客介绍了DOM的概念,包括DOM树的组成和dir属性的使用。重点讲述了DOM中的事件处理,强调了事件三要素:事件源、事件类型和事件处理程序。还详细讲解了如何通过JavaScript操作DOM元素,如表单元素、样式属性(行内样式、类名样式)和自定义属性的获取、设置与移除。最后,提出了排他思想在处理一组元素时的应用,即先清除所有元素样式,再对当前元素设置样式,并确保其他元素样式被移除。
摘要由CSDN通过智能技术生成

DOM就是Document Object Model
DOM树:文档、元素(所有标签)、节点(标签、属性、文本、注释等)
dir的作用,可返回元素对象,更好的查看里面的属性
事件三要素:1.事件源 2.事件类型 3.事件处理程序
DOM之操作元素:
1.表单元素操作
2.样式属性操作
element.style;在js中产生的是行内样式
element.className;类名样式操作(适用于样式较多,功能复杂的情况),如果想要保留原先的类名,可以用多类名选择器,即this.className = ‘first change’;(这里的first和change为类名)
3.自定义属性操作(我们程序员自己添加的属性):
(1)获取属性值
element.属性; (获取内置属性值,元素本身自带的属性)
element.getAttribute(‘属性’);(主要获得自定义的属性)
(2)设置属性值
element.属性 = ‘值’;
element.setAttribute(‘属性’,‘值’);
(3)移出属性
element.removeAttribute(‘属性’);
注意:H5规定自定义属性以data- 开头作为属性名,并且赋值


最后-----排他思想内容:
如果有同一组元素,我们想要某一个元素实现某种样式,需要用到循环的排他思想算法:
(1)所有元素全部清除样式
(2)给当前元素设置样式
(3)首先干掉其他元素,在设置本身元素(顺序不可颠倒)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值