innerhtml js执行_JS 中 DOM 操作

本文通过实例演示了JavaScript中DOM的各种操作技巧,包括元素选择、属性修改、计时器使用、节点创建与删除等,适合前端开发者快速掌握并应用于实际项目。

v2-32bcae4c1efa4ffb547d2d45047f4fa1_1440w.jpg?source=172ae18b
封面图片来源:沙沙野

内容概览

  1. 获取元素
  2. 元素属性
  3. value 属性
  4. 显示时间
  5. 计时器
  6. 节点的增删改查

JS 的 DOM 操作

  1. 获取元素
<!

​ 运行结果:

v2-20b25726703801877b4cc053eb6d1718_b.png

2. 元素的属性

<!

​ 运行结果:

v2-b30d694d8aa2f6ddaef9e5a659ac8150_b.jpg

3. value 属性

<!

​ 运行结果:

v2-5d90e7e2c72e899623e9f00b2053c712_b.png

​ 点击第二个框时:

v2-9a4787681468e61156c512d75916b4da_b.png

​ 点击第三个框时:

v2-44ca2912feaf597b02ade6060a1af8cc_b.png

4. 显示系统时间

<!

​ 运行结果如下,时间在走动

v2-aff01ef6acfbb3582891f12c371549ce_b.png

5. 计时器

<!

​ 运行结果如下,点击按钮有反应

v2-f3f296260b281d7ead4ce269e58f02b9_b.png

6. 购物车全选功能

<!

​ 运行结果:

v2-e4f20a7390abec51f3bacbf240d62772_b.png

7. 创建和删除节点

<!

​ 运行结果:

v2-167bfa33c490f12e8b9bb2328eab44cb_b.jpg

8. 添加和删除附件

<!

​ 运行结果:

v2-52440694bf76b8a4a56d197054b52d36_b.png

9. 操作元素 CSS

<!

​ 运行结果:

v2-5c799a4b700b7d8f852adf72a2564305_b.png

​ 点击按钮后样式会改变

v2-f95dabf7f7b97d94f232a8347a0e26e8_b.png

10. 生成验证码

<!

​ 运行结果如下,每次刷新内容不一样

v2-5d5f619eefe97d8a55a6baab7854b7b6_b.png

11. JS 知识回顾

ECMA 
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值