DOM元素的操作

DOM元素的操作

文档对象模型(Document Object Model,简称DOM ),是W3C组织推荐的处理可扩展标记语言( HTML或者XML)的标准编程接口
W3C已经定义了一系列的DOM接口,通过这些DOM接口可以改变网页的内容、结构和样式。

  1. 对于JavaScript,为了能够使JavaScript操作HTML,JavaScript就有了一套自己的dom编程接口。

  2. 对于HTML , dom使得html形成一棵dom树.包含文档、元素、节点

image-20220221213853677

关于dom操作,我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。

1、创建

  1. document.write

  2. innerHTML.

  3. createElement

2、增

  1. appendChild

  2. insertBefore

3.、删

  1. removeChild

4、改

主要修改dom的元素属性,dom元素的内容、属性表单的值等

  1. 修改元素属性: src、href、title等
  2. 修改普通元素内容:innerHTML、innerText
  3. 修改表单元素: value、type、disabled等
  4. 修改元素样式: style、className

5、查

主要获取查询dom的元素

  1. DOM提供的API方法: getElementByld、getElementsByTagName 古老用法不太推荐
  2. H5提供的新方法: querySelector、querySelectorAll提倡
  3. 利用节点操作获取元素∶父(parentNode)、子(children)、兄(previousElementSibling.
    nextElementSibling)提倡

6、属性操作

主要针对于自定义属性。

  1. setAttribute :设置dom的属性值
  2. getAttribute:得到dom的属性值
  3. removeAttribute移除属性

7、事件操作

image-20220221214700153

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值