前端JS学习(三)

一、时间函数|定时器

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() 表单重置