JavaScript起步(十九-DOM节点三)| 一起学系列

108 阅读2分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第17天,点击查看活动详情

  • 动态创建表格案例思路:

     先获取元素,然后创建一个对象数组来存储需要使用的数据

     利用数组的长度来创建tr与td,然后创建一个对象来单独存储对象数组的每一项,再使用遍历给td进行赋值

     单独创建删除按钮,可以直接使用td去创建新的td,并在td中创建一个a标签,点击a不发生跳转的语法:a.href=”javascript:void(0)”然后给删除添加一个点击事件,利用获取父元素的节点来删除tr。会用到this关键字,不能直接使用a,否则只能删除一个。 image.png

  • 选择水果案例思路:

     关键点:.children获取子元素是动态发生变化的。

     制作多选按钮:可以定义一个空数组,把selected为true的内容,利用push放入空数组中 image.png

  • DOM2级:注册事件(绑定事件)的其他方法1

     - element.addEventListener()方法

     - 参数:第一个参数:事件类型的字符串(直接书写“click”,不需要加on)

 - 第二个参数:事件函数

     - 同一个元素可以多次绑定事件监听,同一个事件类型可以注册多个事件函数,会依次执行事件。      image.png

  • DOM2级:注册事件(绑定事件)的其他方法2

     - element.attachEvent()方法

     - 参数:第一个参数:事件类型的字符串(需要加on)

 - 第二个参数:事件函数

     - 同一个元素可以多次绑定事件监听,同一个事件类型可以注册多个事件函数

     - 兼容性问题:只支持IE10及以下的浏览器,不支持Chrome。IE8及以下浏览器处理事件队列时,会出现顺序错乱      image.png