day 52 dom 事件

day53

1.前情回顾

    1. BOM
        window
            location.href = "https://www.sogo.com"
            location.reload()  // 重新加载当前页
            location.href
        DOM
            document
            
                1. 节点分为：
                    文档节点 document
                    文本节点 标签的文本
                    属性节点 id, class ...
                    标签节点 div,span, h1 ...
                    
                2. 寻找节点
                    1. 基本查找
                        标签名：document.getElementsByTagName
                        ID：    document.getElementByID
                        class名: document.getElementsByClassName
                    2. 间接查找
                        我的上一个标签： previousElementSibling
                        我的下一个标签： nextElementSibling
                        我的父标签：     parentElement
                        我的子标签：     children
                        我的第一个子标签：firstElementChild
                        我的最后一个子标签：lastElementChild

                2. 修改标签属性或样式
                
                    1. 修改文本信息
                        ele.innerText               获取文本节点的内容（包括子标签的文本）
                        ele.innerText="字符串"      修改标签的文本信息
                    2. 文档内容（HTML内容）
                        ele.innerHTML               获取文档内容
                        ele.innerHTML=“<h1>好</h1>” 赋值HTML内容
                    3. 修改样式
                        1. classList
                            ele.className               获取所有的class类名（字符串类型）
                            ele.classList               获取所有的class类名
                            ele.classList.contains(cls) 判断有没有某个class
                            ele.classList.add(cls)      添加一个class类名
                            ele.classList.remove(cls)   删除class类名
                            ele.classList.toggle(cls)   切换（有就删除，没有就添加）
                        2. ele.style.样式=""
                            注意：有中横线的CSS样式要转成驼峰形式
                            ele.style.backgroundColor="red"
                            
                    4. 属性
                        ele.attributes  获取所有的属性信息
                    
2. RegExp（正则） 求学要严谨

    1. 正则表达式不能加空格
    2. 当你设置了全局的g标志位，需要注意lastIndex  --> 每一次匹配上之后会把lastIndex设置为下一位索引值
    3. undefined他帮你转成"undefined"来做正则校验


3. 今日内容
    1. 作业讲解+自定义模态框练习
    2. 事件
        常用事件：
            onfocus()
            onblur()
            onchange()事件 --> select联动的例子 
                                        1. selectEle.selectedIndex       --> 获取当前选中的option的索引值
                                        2. selectEle.options             --> 获取所有的option选项     
                                        3. selectEle.options.length=0    --> 清空所有的option选项
                                        
            键盘事件 --> jQuery讲个示例
        
        
        绑定事件的方式：  *****
            1. 在标签里面直接写on动作=func();
            2. 通过JS代码绑定事件 ele.click=function(){alert(123);}
            3. 基于已经存在的父标签来给子标签绑定事件，  --> 事件委托的方式
                
                
    3. 文档标签的创建
        
        引申出来的：
            script标签一般写在body标签的最下面，除非是文档加载之前就要运行的代码要放在head标签里 *****


4. 今日作业



    1. 模态框里面的提交按钮要绑定事件
        1. 取值（通过 input标签.value 就能取值）
        2。 拿到值之后 拼接处一个tr标签
        3. tbody.appendChild(上面创建的tr标签)
    2. 删除按钮的事件
        1. 根据删除按钮找到当前行的tr
        2. 从tbody里面删掉这个tr (removeChild())
        
抽屉作业