DOM基础2-节点

一、H5自定义属性
        1.自定义属性的目的： 是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
        
        2.自定义属性通过getAttribute('属性')获取
        
        3.设置H5自定义属性：H5规定自定义属性data-开头作为属性名并且赋值
        例：<div data-index="1"></div>
        
        4.获取H5自定义属性
            ①兼容性获取 element.getAttribute('属性名')
            ②H5新增element.dataset.index或者element.dataset['index']
            
            dataset是一个集合里面存放了所有以data开头的自定义属性。
            
            如果自定义属性种有多个“-”链接的单词，我们获取的时候采取驼峰命名法
            例：div.dataset.listName;
    
二、节点
        1.节点至少拥有nodeType(节点类型)，nodeName(节点名称)，nodeValue(节点值)三个
            元素节点 nodeType 为1
            属性节点 nodeType 为2
            文本节点 nodeType 为3
        
        2. 父节点 parentNode
        
        3.子节点 childNode
        
            获取子节点 parentNode.children是一个只读属性，返回子元素属性
        
        4.兄弟节点
            下一个兄弟节点        nextSibling 包含元素节点和文本节点
            上一个兄弟节点        previousSiBling 
            
            下一个兄弟元素节点    nextElementSibling
            上一个兄弟元素节点    previousElementSiBling
        
        5.创建元素节点
            document.creatElement('li');
        
        6.添加节点            步骤：（1）新建元素  （2）添加元素
            方法：
            ①node.appendChild(child)    // node是父级  child是子级
            node.appendChild()方法将一个节点添加到指定父节点的子节点列表末尾
            
            ②node.insertBefore(child,指定元素)
            node1.insertBefore()方法讲一个节点添加到父节点指定的子节点前面
            
        7.删除节点
            方法：
            ①node.removeChild(child)
            node.removeChild()方法从DOM中删除一个子节点，返回删除的节点
            
        8.复制节点
            方法：
            node.cloneNode()
            该方法返回调用该方法的节点的一个副本  
            
            node.cloneNode()中的参数有两个    
            ①空或者false 浅拷贝，只克隆复制节点本身，不克隆复制里面的子节点
            ②true深复制，克隆节点本身及它的子节点
        
        9.动态创建元素区别
            ①document.write()
            ②element.HTML
            ③docunment.creatElement()
        
            区别：
            ①document.write是直接将内容写入页面的页面流，但是文档流执行完毕，则他会导致页面全部重绘。
            ②innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘
            ③innerHTML创建多个元素效率更高（采用数组形式拼接），结构稍微复杂
            ④creatElement()创建多个元素效率稍低一点点，但是结构清晰
三、DOM事件流
        1.事件流描述的事从页面中接收时间的顺序
            ①捕获阶段 如果addEventListener第三个参数为true则处于捕获阶段    document->html->body->father->son
            ②冒泡阶段 如果addEventListener第三个参数为false或省略则处于冒泡阶段    son->father->body->html->document
        
        2.this和e.target区别
            ①this指向绑定事件的元素
            ②e.target指向点击的元素，谁触发了事件
        
        3.事件常用的属性
            e.target        返回触发事件的对象         标准
            e.type            返回触发事件的类型
            e.preventDefualt()    阻止默认事件
            e.stop.Propagation()    阻止冒泡
        
        4.鼠标事件(MouseEvent)
            ①禁止鼠标右键菜单     contextmenu
            ②禁止鼠标选中          selectstart
        
        鼠标事件对象
            e-clientX            返回鼠标相对于可是区域的X坐标
            e-clientY                                    Y坐标
            e-pageX                返回鼠标相对于文档页面的X坐标
            e-pageY                                        Y坐标
            e.screenX            返回鼠标相对于电脑屏幕的X坐标
            e.screenY                                    Y坐标
        
        5.键盘事件
            键盘事件                触发条件
            onkey                    某个键盘被松开时触发
            onkeydown                某个键盘被按下时触发
            onkeypress                某个键盘被松开时触发 不识别功能键
        
            键盘事件对象中的keyCode属性可以得到相应的ASCLL码值
                1.keyup和 keydown事件不区分字母大小写 a和 A得到的都是65
                2.keypress事件区分字母大小写a得到97和 A得到的都是65
                
            
        6.将字符串分割为数组 spit('分隔符')