一.BOM(浏览器对象模型)
1.window对象–时间函数
(1)延迟执行定时器|setTimeout()
setTimeout(function(){...要执行的代码...},时间(毫秒数));
setTimeout(function(){div.innerHTML="延时计时器";},1000);
(2)重复执行定时器|setInterval()
setInterval(function(){...要执行的代码...},时间(毫秒数));
setInterval(function(){i++;div.innerHTML=i;},1000);
(3)清除定时器|clearTimeout|clearInterval
d=setInterval(function(){...要执行的代码...},时间(毫秒数));clearInterval(d);
2.history对象
三个方法,通过history.调用
(1)前往下个页面|forward()
history.forward()
(2)返回上个页面|back()
history.back()
(3)直接前往相应页面|go(number|URL)
history.go(1)//前往下个页面history.go(-2)//返回上上个页面
3.location对象
(1)属性
href:设置或返回完整的URL,可后退
alert(window.location.href);//获取完整的url//可以后退location.href="";
(2)方法
reload():重新加载当前文档|刷新
location.reload();
replace():用新文档替换当前文档|跳转,不可后退
//不可后退location.replace("")
二.DOM(文档对象模型)|Document Object Model
1.理解
DOM赋予我们可以操作页面的能力,可以创建,插入,修改,删除元素等.
Web 浏览器生成一个树型结构，用来表示页面内部结构.
DOM 将这种树型结构理解为由节点组成，组成一个节点树.
节点:HTML页面中的所有内容的都是节点,而DOM就是用来操作节点.
2.获取节点四种方式
(1)通过id获取唯一一个元素节点
document.getElementById("id值");
(2)通过元素名获取一组元素
主语.getElementsByTagName("元素名");主语:document|父节点
(3)通过class属性值获取一组元素
主语.getEelementsByClassName("class属性值")主语:document|父节点
(4)通过name属性
主语.getElementsByName("name属性值")
3.创建节点和插入节点
(1)createElement()|创建
主语.createElement("元素标签名");参数:元素标签名主语:document返回值:创建的新节点
document.createElement("div");
(2)appendChild()|插入
主语.appendChild(节点名);参数:要插入的节点主语:父节点返回值:追加的节点追加元素:在父节点的最后位置追加
//创建一个div标签var d=document.createElement("div");//自己创建的节点插入到body内document.body.appendChild(d);//创建一个p标签var p=document.createElement("p");//在p标签内写入内容p.innerText="王小鱼";//将p节点插入到d节点内d.appendChild(p)
(3)insertBefore(childNode1,childNode2)|插入
主语.insertBefore(childNode1,childNode2);参数:childNode1 要插入的节点childNode2 父节点中的指定子节点主语:父节点返回值:第一个参数,要插入的节点注意:childNode2参数的值若为null,undefined,实现的是追加的效果,并且该参数必须得给
//创建一个div标签var d=document.createElement("div");//自己创建的节点插入到body内document.body.appendChild(d);//创建一个p标签var p=document.createElement("p");//在p标签内写入内容p.innerText="王小鱼";//将p节点插入到d节点之前document.body.insertBefore(p,d);//追加的效果document.body.insertBefore(p,undefined);
4.间接查找节点
var div2=document.getElementsByClassName("wxy");//childNodes返回元素的一个子节点的数组 包括文本节点console.log(div2[0].childNodes);//所有子节点console.log(div2[0].children);//所有元素节点//firstChild 返回元素的第一个子节点console.log(div2[0].firstChild);//文本节点//lastChild返回元素的最后一个子节点console.log(div2[0].lastChild);//文本节点//firstElementChild 返回第一个元素子节点console.log(div2[0].firstElementChild);//lastElementChild 返回最后一个元素子节点console.log(div2[0].lastElementChild);//nextSibling 返回元素的下一个兄弟节点console.log(div2[0].nextSibling);//previousSibling 返回元素的上一个兄弟节点console.log(div2[0].previousSibling);//nextElementSibling返回上一个元素兄弟节点console.log(div2[0].nextElementSibling);//previousElementSibling 返回下一个元素兄弟节点console.log(div2[0].previousElementSibling);//parentNode 返回元素的父节点console.log(div2[0].parentNode);
5.替换节点,克隆节点,删除节点
(1)replaceChild(child1,child2)|替换
主语.replaceChild(child1,child2);参数:child1 要替换的节点child2 被替换的节点主语:父节点返回值:被替换的节点注意:如果child1是原有的元素,相当于移动
(2)cloneNode(boolean)|克隆
主语.cloneNode(boolean);参数:true 克隆当前节点及其包含的子节点false 不包含子节点,只克隆当前节点,默认false主语:被克隆的节点返回值:克隆的节点注意:JS代码不会被克隆,如果原节点存在id属性,需要手动修改新节点的id属性
(3)removeChild()|删除
主语.removeChild();参数:要移除的节点主语:父节点返回值:被移除的节点
6.操作表单form
(1)表单元素:
都可以根据dom获取节点的方式获取
特殊获取方式:form节点.name
<form action=""><input type="text" name="username" value="zhangsan"></form>//根据form元素名获取一组form元素var form=document.getElementsByTagName("form");//特殊获取方式form[0].username.value
(2)表单元素事件:
onchange|内容有改变触发事件
oninput|内容有输入触发事件
form[0].username.function(){console.log("输入触发")};form[0].username.function(){console.log("改变触发")};
(3)form事件
onsubmit()|提交表单
onreset()|重置
form[0].function(){console.log("表单要提交了");};form[0].function(){console.log("重置了");};
(4)form方法
submit()|提交
reset()|重置
form[0].btn.function(){console.log("做好准备,我要提交了");form[0].submit();//form[0].reset();};
