一.时间函数
setTimsetTimeout(): 在指定的毫秒数后调用函数或计算表达式。
通过返回的标识也可以clearTimeout(id)来清除指定函数的执行。
eout(): 在指定的毫秒数后调用函数或计算表达式。
通过返回的标识也可以clearTimeout(id)来清除指定函数的执行。
2.方法：
重复执行定时器
setInterval
每隔多长时间执行一次函数,重复行
setInterval(function(){
},时间)
延迟执行定时器
setTimeout()
延迟多长时间以后执行一次
setTimeout(function(){
...要执行的代码..
},时间)
时间:毫秒数
二.history对象
1.初步理解
history 对象是历史对象。包含用户（在浏览器窗口中）访问过的 URL。history 对象是window 对象的一部分，可通过 window.history 属性对其进行访问。
history对象的属性：length，返回浏览器历史列表中的 URL 数量。
2.history对象的方法：
back()：加载history 列表中的前一个 URL。
forward()：加载历史列表中的下一个 URL。当页面第一次访问时，还没有下一个url。
go(number|URL): URL 参数使用的是要访问的 URL。而 number 参数使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。go(-1)，到上一个页面。
3.例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>history03</title>
</head>
<body>
<button id="btn1">回到上一个界面</button>
<button id="btn2">回到上上一个界面</button>
<script>
var btn1=document.getElementById("btn1");
var btn2=document.getElementById("btn2");
btn1.onclick=function(){
window.history.go(-1);
};
btn2.onclick=function(){
window.history.go(-2);
};
</script>
</body>
</html>
三.location 对象
1.初步理解：
location 对象是window对象之一，提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。也可通过window.location 属性来访问。
location 对象的属性href：设置或返回完整的 URL
2.location 对象的方法
reload()：重新加载当前文档。
replace()：用新的文档替换当前文档。
3.例子
<input type="button" value="刷新" onclick="window.location.reload();" />
<input type="button" name="" id="" value="shsxt官网" onclick="open_sxt();" />
<script type="text/javascript">
function open_sxt() {
// 用新的文档替换当前文档
alert(window.location.href); // 获取完整的url
window.location.href = "http://www.shsxt.com";
// 用新的文档替换当前文档
window.location.replace("http://www.baidu.com");
}
</script>
四.DOM
1.初步了解
DOM 文档对象模型
DOM赋予我们可以操作页面的能力
可以创建,插入,修改,删除元素等等
Web 浏览器生成一个树型结构，用来表示页面内部结构。DOM 将这种树型结构理解为由节点组成，组成一个节点树。
2 节点:
节点类型HTML内容例如
文档节点文档本身整个文档 document
元素节点所有的HTML元素<a>、<div>、<p>
属性节点HTML元素内的属性id、href、name、class
文本节点元素内的文本 hello
注释节点HTML中的注释<!-- -->
html页面中的所有内容的都是节点,而dom就是用来操作节点
3. 获取节点:
1.document.getElementById("id值")
根据元素的id属性值,获取到唯一一个元素节点
2.主语.getElementsByTagName("元素名")
根据元素名字获取一组元素
主语:document|父节点
3.主语.getEelementsByClassName("class属性值")
根据与class属性值获取一组元素
4.getElementsByName()
根据name属性值获取dom对象数组，常用于多选获取值
例子：
var div1=document.getElementById("div1");
div1.style.background="red";
根据标签名字获取一组元素,注意要一个一个节点操作 主语是document
var divs=document.getElementsByTagName("p");
divs[0].style.color="blue";
根据标签名字获取节点 主语:父节点
var div2=div1.getElementsByTagName("div");
div2[0].style.border="1px solid red";
根据class属性获取一组元素
var eles=document.getElementsByClassName("yellow");
var eles2=div1.getElementsByClassName("yellow");
for(var e in eles){
eles[e].style.background="yellow";
}
eles2[0].style.background="pink";
4.创建节点和插入节点
1）创建节点:createElement()
参数:元素标签名
主语:document
返回值:新节点
插入节点 appendChild()
追加元素,在父节点中的最后位置追加
参数:要插入的节点
主语:父节点
返回值:追加的节点
插入节点insertBefore(childNode1,ChildNode2)
参数:
childNode1 要插入的节点
ChildNode2 父节点中的指定子节点
主语:父节点
返回值:返回第一个参数,要插入的节点
注意:ChildNode2参数的值为null,undefined,实现的是追加的效果
2）插入节点：
wite（） 将任意的字符串插入到文档中
appendChild() 向元素中添加新的子节点，作为最后一个子节点
insertBefore()向指定的已有的节点之前插入新的节点
newItem：要插入的节点
exsitingItem：参考节点
需要参考父节点
例子：
创建节点
var div=document.createElement("div");
console.log(div);
添加图签
<button onclick="addImg();">添加图片</button>
<div id="container"></div>
<script type="text/javascript">
添加图片
functionaddImg()
{
创建img元素
var img = document.createElement("img");
设置属性第一种方式
设置img元素的src属性
img.src =
"http://www.baidu.com/img/bd_logo1.png";
设置属性第二种方式
setAttribute() 方法添加指定的属性，并为其赋指定的值。
设置img元素的src属性
img.setAttribute('src', 'http://www.baidu.com/img/bd_logo1.png');
img.style.width= '540px';
img.style.height= '258px';
获取div元素
var container= document.getElementById("container");
将img元素节点追加到div元素中
container.appendChild(img);
}
</script>
5.间接查找节点
方法|属性 描述
childNodes 返回元素的一个子节点的数组
firstChild 返回元素的第一个子节点
lastChild 返回元素的最后一个子节点
nextSibling 返回元素的下一个兄弟节点
parentNode 返回元素的父节点
previousSibling 返回元素的上一个兄弟节点
例子：
<body>
<div id="box">
<div>我是大哥</div>
<div class="er">我是二哥
<p>我是p1</p>
<p>我是p2</p>
<p>我是p3</p>
</div>
<div>我是三哥</div>
</div>
<script>
var div2=document.getElementsByClassName("er")[0];
childNodes 返回元素的一个子节点的数组 包括文本节点
console.log(div2.childNodes); //所有子节点
console.log(div2.children); //元素节点
firstChild 返回元素的第一个子节点
console.log(div2.firstChild); //文本节点
lastChild 返回元素的最后一个子节点
console.log(div2.lastChild); //文本节点
地一个和最后一个元素子节点
console.log(div2.firstElementChild); //p1
console.log(div2.lastElementChild); //p3
nextSibling 返回元素的下一个兄弟节点
console.log(div2.nextSibling);
previousSibling 返回元素的上一个兄弟节点
console.log(div2.previousSibling);
上一个|下一个元素兄弟节点
console.log(div2.nextElementSibling);
console.log(div2.previousElementSibling);
parentNode 返回元素的父节点
console.log(div2.parentNode);
</script>
6.替换节点
方法：replaceChild(newNode, oldNode) 描述：用新的节点替换旧的节点
第一种：获取父节点，然后用新的节点替换旧节点
父节点.replaceChild(newNode, oldNode);
第二种：通过旧节点定位到父节点，然后用新的节点替换旧节点
oldNode.parentNode.replaceChild(newNode, oldNode);
例子：
<div id="dv">
<button type="button"id="btn">我是一个按钮</button><br/>
<button type="button"onclick="replace_child();">替换</button>
<script type="text/javascript">
functionreplace_child()
{
第一种方式：获取父节点，然后用新的节点替换旧节点
获取button元素
var btn = document.getElementById('btn');
创建p元素
var p = document.createElement('p');
p.innerText= '我是一个段落';
获取到父元素div用p元素替换button元素
var dv = document.getElementById('dv');
dv.replaceChild(p,btn);
第二种方式：通过旧节点定位到父节点，然后用新的节点替换旧节点
用p元素替换button元素
btn.parentNode.replaceChild(p, btn);
}
</script>
7.克隆节点
var 复制好的节点 = 被复制的节点.cloneNode([true/false]);
true：深度克隆，可以克隆结构和内容
false(默认值)：只克隆结构
方法：cloneNode() 描述：复制节点
例子：
<ul id="src_ul">
<li>red</li>
<li>yellow</li>
<li>blue</li>
</ul>
<button onclick="copy();">复制</button>
<hr />
<div id="copy_div"></div>
<script type="text/javascript">
functioncopy() {
获取要复制的元素
var src_ul = document.getElementById("src_ul");
复制true深度克隆，可以克隆结构和内容
var copy_ul = src_ul.cloneNode(true);
将复制好的内容添加到div中
document.getElementById("copy_div").appendChild(copy_ul);
}
</script>
8.删除节点
方法：removeChild() 描述：从元素中移除子节点
第一种：获取父节点，然后删除子节点
父节点.removeChild(childNode);
第二种：通过旧节点定位到父节点，然后删除子节点
childNode.parentNode.removeChild(childNode);
9.属性操作
方法|属性 描述
getAttribute() 返回指定元素的属性值
getAttributeNode ()返回指定属性节点
element.id 设置或者返回元素的 id
setAttribute() 设置或者改变指定属性并指定值
setAttributeNode() 设置或者改变指定属性节点
element.style 设置或返回元素的样式属性
element.className 设置或返回元素的class属性
element.classList 返回元素的类名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul{
width:500px;
height:500px;
border:1px dashed deeppink;
}
input{
border:1px solid deeppink;
height:20px;
vertical-align:top; /*同行的行内元素的上下的对其方式*/
}
input:nth-child(2){
background: deeppink;
color: #fff;
height:24px;
vertical-align:top;
}
</style>
</head>
<body>
<input type="text" name="text" id="text">
<input type="button" id="btn" value="提交"> <span id="span"></span>
<ul id="ul"></ul>
var btn=document.getElementById("btn");
var text=document.getElementById("text");
var ul=document.getElementById("ul");
var span=document.getElementById("span");
function fn(){
var str=text.value;
判断值是否为空,如果为空提示不允许为空,如果不为空,把input置为空
if(str==""){
span.innerHTML="不能为空";
return;
}else{
text.innerHTML=""; 表单元素要使用value
text.value="";
}
//1.创建一个li节点
var li=document.createElement("li");
2.把值放入li节点中
li.innerHTML=str;
3.把li节点插入到ul中
ul.insertBefore(li,ul.firstElementChild);
}
btn.onclick=fn;
text.onfocus=function(){
span.innerHTML="";
};
</script>
</body>
</html>
