关于点击列表新创建的li不在lis数组中

关于点击列表新创建的li不在lis数组中

老师,之前图文节中不是提到过getElementByTagName方法可以动态获得结果吗?

https://img1.sycdn.imooc.com//climg/61fea1ea09e71b3009140756.jpg

这两种情况有什么区别吗?为什么这里点击按钮创建的新li就不在lis数组中了呢?https://img1.sycdn.imooc.com//climg/61fea2590904daa909140443.jpg

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

3回答
好帮手慕星星 2022-02-12 10:54:45

同学你好,课程中讲解的意思不是说新创建的元素不在lis中,是新创建的元素不会绑定点击事件,如下:

https://img1.sycdn.imooc.com//climg/62071de2097a0a3906280587.jpg

用for循环的方式给每个li绑定点击事件,点击li字体颜色变红

https://img1.sycdn.imooc.com//climg/62071e140920b51304030182.jpg

所以这种方式不适用,用事件委托将点击事件绑定在ul(oList)上

https://img1.sycdn.imooc.com//climg/6207213a09c30abd04960027.jpg

https://img1.sycdn.imooc.com//climg/62071ef909ffcba705660217.jpg

这样原有和新增的列表点击都会改变字体颜色。

另外可能课程中老师说的不太清楚,导致了同学疑惑,后期我们也会尽快对视频进行处理。自己再理解下。

好帮手慕然然 2022-02-09 14:46:25

同学你好,很抱歉,这个问题再重新讲一下,前面说的有点问题(前面讲的是querySelectorAll方法的使用,不是getElementByTagName方法的使用,老师把这两种方法讲混了)。

这两种情况,其实是一样的:因为getElementByTagName方法是可以动态获取元素的,因此只要新生成的li标签,都会自动被getElementByTagName方法动态获取到,并保存到lis数组中,包括点击按钮创建的新li标签,所以点击按钮创建的新li是在lis数组中的,可以在控制台打印一下结果,如下

https://img1.sycdn.imooc.com//climg/62035fca09b453cf14840827.jpg

https://img1.sycdn.imooc.com//climg/620361b109b6b8f413500687.jpg

祝学习愉快!

  • 提问者 Cynthia4660559 #1

    那为什么课件说这种方法不行,必须采用事件委托呢?既然新添加的li也在lis数组中,那循环遍历不是也可以实现吗?

    2022-02-11 23:29:35
好帮手慕然然 2022-02-06 10:57:24

同学你好,这与getElementsByTagName("li")代码的执行时机有关,按照代码的执行顺序,当执行到getElementsByTagName("li")时,不管是第一种情况,还是第二种情况,只要是HTML中默认存在的li都会被获取到,并保存到数组lis中。也就是,当这句代码执行完毕后,lis中保存的就是HTML中默认存在的li标签,也就意味着lis中保存的内容不再会自动改变(除非手动改变)。

所以,第二种情况,即使新生成li标签,也不会自动保存到lis中,除非在新生成li之后,再执行一遍getElementsByTagName("li")代码,此时lis就会有新生成的li标签。说白了,其实就是先存在才能拿到。

祝学习愉快!

  • 提问者 Cynthia4660559 #1

    老师我还是没有明白。第一种情况和第二种情况都是只在添加了新li之前运行了getElementById阿,那为什么第一种的输出结果就包括了新的li,第二种却没有呢

    2022-02-06 23:25:48
  • 好帮手慕然然 回复 提问者 Cynthia4660559 #2

    同学你好,第一种情况,lis中存放的还是默认存在的li标签,而不是新生成的,如图

    https://img1.sycdn.imooc.com//climg/6200813309147f2214200629.jpg

    2022-02-07 10:18:07
  • 如果要使前面老的li标签也实现点击变色要怎么写呢

    2022-08-03 21:22:34
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师