2023-5-18（第十二天）

递归

使用场景： 遍历层级不明确的DOM树或数据

使用

function 函数名(root){
    //第一步：
    第一层要做的操作;
    
    //第二步：
    判断有没有下一层，如果有就再次调用此方法，传入的参数为自己的下一层
}
函数名（实际的根元素/根数据）

深度优先算法： 优先遍历当前节点的子节点，子节点遍历完毕才会跳到兄弟节点。

绑定事件

在HTML页面上书写事件属性

<elem onclick="函数名()"><elem>

缺点：

0. 不符合内容（HTML）、样式（CSS）、行为（JS）相分离
1. 一次只能绑定一个元素
2. 不支持绑定多个函数对象

在JS中使用事件处理函数属性

elem.on事件名=function(){操作}

优点：

0. 符合内容（HTML）、样式（CSS）、行为（JS）相分离
1. 可以动态绑定

缺点：

• 不支持绑定多个函数对象

在JS中使用事件API

//主流
elem.addEventListener("事件名",function(){操作})
​
//老IE
elem.attachEvent("on事件名",function(){操作})
​
//兼容写法
if(elem.addEventListener){
    elem.addEventListener("事件名",function(){操作})
}else{
    elem.attachEvent("on事件名",function(){操作})
}

优点：

0. 符合内容（HTML）、样式（CSS）、行为（JS）相分离
1. 可以动态绑定
2. 支持绑定多个函数对象

缺点：

• 有兼容性问题

拓展

创建select里的option可以简化创建元素及上树

select.add(new Option("innerHTML","value"))