webAPI

1. 获取元素

获取单个: 拿不到是null

获取多个: 伪数组.用于遍历

2.操作元素

标签属性: href, src, title 等

类操作: className和classList (添加类 , 删除类 , 包含类contains() , 切换类)

表单属性操作: 值, 选中checked, 可用disabled

样式操作: style.具体样式, 只能操作行内

3.事件: 交互

事件源: 操作谁

事件类型: 怎么触发

事件处理: 函数里面包含效果代码 

事件操作分类: DOM0 (on事件) 和DOM2 (addEventListener)

        on事件 : 只能有一个 , 清除null

        DOM2事件 : 允许多个,清除removeEventListener (只能清除有名回调)

4. 定时任务

定时器: setInterval() 重复调用, 清理clearInterval(定时器id)

延时器: setTimeout()延时用一次, 清理clearTumeout()

5. 事件流

捕获阶段: 从window到目标

冒泡阶段: 从目标到window (默认是都冒泡 . DOM0只有冒泡)

        冒泡: 子元素触发, 父元素跟着触发(相同事件)

                价值: 事件委托 (子元素事件绑定到父元素身上: 减少事件绑定次数, 忽略子元素的变化)

                区分孩子: e.target代表实际发生的目标

阻止事件流转 : e.stopPropagation()

阻止默认事件 : e.preventDefault()

6. 节点: 网页一切皆节点

节点三要素

        nodeType : 节点类型 , 标签都为1

        nodeName: 节点名字 , 标签都是大写

        nodeValue : 节点值 , 标签都是null

寻找节点

        孩子

                children: 所有的孩子, 伪数组

                第一个孩子 : firstElementChild

                最后一个孩子 : lastElementChid

        兄弟

                上一个兄弟 : previousElementSibing

                下一个兄弟 : nextElementSibling

        父元素: parentElement || parentNode

新增节点

        创建节点: document.cerateElement() , 只在内存有效 , 而且默认是空元素

        添加属性: 所有属性包括事件

        追加到父元素

                appendChild(): 最后一个孩子

                insertBefore(): 插队

克隆节点: 元素.cloneNode(布尔结果)

        浅克隆: false , 默认的, 只有元素解构

        深克隆: true, 所有

7. 本地存储: localStorage

        设置 (新增和修改) : setItem(名字 , 值), 值必须是字符串        

                复杂数据: JSON对象

                        变成字符串: JSON.stringify() , 对应设置功能

                        变回对象 : JSON.parse() , 对应获取功能

        获取: getItem(名字), 拿不到是null

8. 正则表达式: 匹配字符串

        定义规则

                正则格式: / 匹配模式 /

                边界符 : ^起始 , $结束 , 都只匹配一个模式

                量词符: {n}固定n次 , {n,}至少n次 , {n , m}区间 , *0次开始 , +1次开始 , ?0到1区间

                区间模式 : []多选1 . 连接符- , 知道区间 (简化写法)

                        ^ : 表示取反

                        预定义类 : \d代表 [0-9] , \D代表 [^0-9] , \w和\W (内容) , \s和\S (空白)

        验证规则

                测试: 得到布尔结果 , test()

                匹配: 得到第一个匹配结果 , exec()