一、时间函数|定时器
1.重复执行定时器
方法名 : setInterval()
作用 : 每隔多长时间执行一次函数,重复执行
参考语法:
setInterval(function(){
},时间)
2.延迟执行定时器
方法名 : setTimeOut()
作用 : 延迟多长时间以后执行一次
参考语法:
setTime(function(){
...要执行的代码..
},时间)
时间:毫秒数
2.1流程方法
1. 获取div节点
2. 添加一个点击事件
3. 延迟执行定时器 div中显示
3.清除定时器
3.1 clearInterval
3.2 clearTimeOut
二、history对象
1.forwar
2.go
3.back
三、loction对象
四、JS-DOM对象
1.DOM文档对象模型
DOM赋予我们可以操作页面的能力
可以创建,插入,修改,删除元素等等
2.节点
HTML中任何元素,都是一个节点,DOM就是能够操作这些节点
2.1节点的分类
2.1.1 文档节点 :
文档本身,整个文档document
2.1.2 元素节点 :
所有HTML元素
2.1.3 属性节点 :
2.1.4 文本节点 :
2.1.5 注释节点 :
2.2获取节点
2.2.1 根据id值获取节点
方法名 : document.getElementById("id值")
作用 : 根据元素的id属性值,获取到唯一一个元素节点
参考语法 :
var div1=document.getElementById("div1");
2.2.2 根据元素名获取节点
方法名 : 主语.getElementsByTagName("元素名")
作用 : 根据元素名字获取一组元素
注意 : 这种方式获取的节点为数组,所以要利用数组的方式进行操作
主语:document|父节点
var ps=document.getElementsByTagName("p");
ps[0].style.color="blue";
2.2.3 根据属性值获取节点
方法名 : 主语.getElementsByClassName("class属性值")
作用 : 根据class属性值获取一组元素
2.2.4 根据名称获取节点
方法名 : getElementsbyName()
2.3 创建节点
2.3.1创建节点
方法名 : creatElement()
输入参数 : 元素标签名
主语 : document
返回值 : 新节点
2.3.2 插入节点
方法名 : appendChild()
输入参数 : 要插入的节点
主语 : 父节点
返回值 : 追加的节点
注意 : 这种创建是追加元素,在父节点中的最后位置追加
2.3.3插入节点,不追加
方法名 : insertBefore(childNode1,ChildNode2)
输入参数:
ChildNode1 要插入的节点
ChildNode2 父节点中的指定子节点
主语 : 父节点
返回值 : 返回第一个参数,要插入的节点
注意,如果ChildNode2位null或undefind,效果同与appendChild(),必须给2个参数
五、间接查找
1. 方法名firstChild
作用 : 返回元素的第一个子节点
2. 方法名lastChild
作用 : 返回元素的最后一个子节点
3. 方法名nextSibling
作用 : 返回元素的下一个兄弟节点
4. 方法名parentNode
作用 : 返回元素的父节点
5. 方法名previousSibling
作用 : 返回元素的上一个兄弟节点
六、操作节点
1.替换节点
方法名 : 替换节点 replaceChild(child1,child2)
作用 : 使用参数1替换参数2
输入参数:
child1:要替换的节点
child2:被替换的节点
主语:父节点
返回值:被替换的节点
2.克隆节点
方法名 : 克隆节点 cloneNode(boolean)
作用 : 克隆某个节点
输入参数:
true:子节点也被克隆
false:只克隆当前节点的结构,不包括子节点 默认为false
主语:要克隆的节点
返回值:返回克隆的节点
注意 : JS代码不会被克隆,如果JS效果已运行,那么会克隆已经完成效果后的代码
注意2 : 克隆的代码会存在id属性,如果原节点存在id属性,手动修改新节点的id
3.删除节点
方法名 : removeChild()
输入参数 : 要移除的节点
主语 : 父节点
返回值 : 被删除的节点
七、操作表单
1.表单元素
表单元素都可以根据dom获取节点的方式获取
特殊获取方式:form节点.name
2.表单元素事件
onchange 内容有改变触发事件
oninput 内容有输入触发事件
3.form事件
onsubmit() 表单提交时
onreset() 表单重置时
4.form方法
submit() 表单提交
reset() 表单重置
