首页 > 软件开发 > JavaScript >

GIF动态图教程-JS语言21-DOM操作(实例)

来源:互联网 2023-03-16 23:58:51 版权归原作者所有,如有侵权,请联系我们

4Uw办公区 - 实用经验教程分享!

方法/步骤

  • 1

    使用getAttribute()方法获取DOM对象的各种属性,例如id名,宽度值等。4Uw办公区 - 实用经验教程分享!

    GIF动态图教程-JS语言21-DOM操作(实例)4Uw办公区 - 实用经验教程分享!

  • 1相关内容未经许可获取自百度经验
  • 2

    使用createElement()方法创建DOM对象,如图所示创建一个span标记。4Uw办公区 - 实用经验教程分享!

    使用appendChild()方法可以将createElement()方法创建的节点,插入到DOM对象,如图所示,将span标记插入到了P标记中。4Uw办公区 - 实用经验教程分享!

    GIF动态图教程-JS语言21-DOM操作(实例)4Uw办公区 - 实用经验教程分享!

  • 3

    使用setAttribute()方法动态地为元素设置各种属性,如设置span标记的id属性,如图操作。4Uw办公区 - 实用经验教程分享!

    GIF动态图教程-JS语言21-DOM操作(实例)4Uw办公区 - 实用经验教程分享!

  • 4

    另一种修改标记属性的方式更加直接,例如直接修改元素的className属性来更改其类名,如图操作。4Uw办公区 - 实用经验教程分享!

    GIF动态图教程-JS语言21-DOM操作(实例)4Uw办公区 - 实用经验教程分享!

  • 5

    如果对创建的span标记不需要了,可以使用removeChild()方法删除,如图操作。4Uw办公区 - 实用经验教程分享!

    GIF动态图教程-JS语言21-DOM操作(实例)4Uw办公区 - 实用经验教程分享!

  • 6

    removeChild方法需要通过父元素来加以调用,例如上述P元素是span元素的父级,要删除span元素,则不能单纯使用removeChild(span),只能通过P.removeChild(span)这一途径,这意味着还需要对父标记加以定位,操作起来较为繁琐。一种简便的方法是使用元素的parentNode属性来找到父元素,然后再调用删除方法,如span.parentNode.removeChild(span),如图操作。4Uw办公区 - 实用经验教程分享!

    GIF动态图教程-JS语言21-DOM操作(实例)4Uw办公区 - 实用经验教程分享!

  • 注意事项

    • 按住Ctrl键 鼠标滚动滑轮可以放大网页更清楚查看gif动态图。
    • 因gif动态图将重复播放。建议进入-步骤阅读模式-边看文字边单击图片放大看。

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!4Uw办公区 - 实用经验教程分享!


    标签: JAVASCRIPT

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号