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()延时用一次,清理clearTimeout()
5.事件流
捕获阶段:从window到目标
冒泡阶段:从目标到window(默认事件都是冒泡,DOM0只有冒泡)
冒泡:子元素触发,父元素跟着触发(相同事件)
价值:事件委托(子元素事件绑定到父元素身上:减少事件绑定次数,忽略子元素的变化)
区分孩子:e.target代表实际发生的目标
6.节点:网页一切皆节点
节点三要素
nodeType:节点类型,标签都为1
nodeName:节点名字,标签都是大写
nodeValue:节点值,标签都是null
寻找节点
孩子
children:所有的孩子,伪数组
兄弟
上一个兄弟:previousElementSibling
下一个兄弟:nextElementSibling
父元素:parentElement是元素(根元素html) || parentNode是节点(根节点是document对象)
新增节点
创建节点:document.createElement(),只在内存有效,而且默认是空元素
添加属性:所有属性包括事件
追加到父元素
appendChild():最后一个孩子
insertBefore():插队
克隆节点:元素.cloneNode(布尔结果)
浅克隆:false,默认的,只有元素解构
深克隆:ture,所有
7.本地存储:localStorage
设置(新增和修改):setltem(名字,值),值必须是字符串
复杂数据: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()