JSDOM对象-0417笔记
1.定时器
重复设置定时器 setInterval(函数，时间)
只执行一次延迟定时器 setTimeout(函数，时间)
清除定时器 clearInterval(函数）
- 重复设置定时器和设置一次延迟定时器
关键代码：
延迟定时器：
//1.获取div节点
var div=document.getElementById("div");
var i=0;
//2.添加一个点击事件
div.function (){
//3.延迟执行定时器 1s div中显示好
window.setTimeout(function(){
div.innerHTML="好";
},3000);
};
重复定时器：
//1.获取div节点
var div=document.getElementById("div");
var i=0;
//2.添加一个点击事件
div.function (){
//重复执行定时器 div中每隔1s显示1,2,3,4...
setInterval(fn,1000); /*函数名后面不能添加()*/
};
function fn(){
i++;
div.innerHTML=i;
}
- 清除定时器
var begin=document.getElementById("begin");
var i=10;
var d;
begin.function(){
d=setInterval(fn,1000);
};**加粗样式**
function fn(){
div.innerHTML=i;
i--;
if(i<0){
//控制停止
clearInterval(d);
}
}
2.心跳案例：
思路：将div的的小心心通过不断改变class选择器的样式，达到心跳放大，变小。其中还是用的setInterval()重复时器来改变class类名。还要使用循环遍历，每遍历一次要重新设置初值。
3.历史记录
要实现访问别的页面，浏览器会留下历史记录。模拟浏览器进入下一页，返回上一页摸操作。主要用到的方法：
window.history.forward(); 表示向前
window.history.back();表示回退
window.history.go(数字);括号里正数表示前进（是多少前进多少页），负数表示后退，是多少后退多少页。
4.位置
当我们打开网页时，可以进行刷新，跳转，修改标题。
下面来模拟刷新操作。
用到一下方法：
wndow.location.href = “网址”;这个可以后退。
window.location.replace = “网址”;这个不可后退。
document.title=prompt（“修改标题”）;返回的是你修改的内容。
```
5.DOM操作
获取文档节点有以下种方式：
获取节点:
1.document.getElementById(“id值”)
根据元素的id属性值,获取到唯一一个元素节点
2.主语.getElementsByTagName(“元素名”)
根据元素名字获取一组元素
主语:document|父节点
3.主语.getEelementsByClassName(“class属性值”)
根据与class属性值获取一组元素
4.getElementsByName()
通过获取文档对象节点，我们可以接下来对可以进行节点操作，例如设置节点内容背景暗色，长宽。
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";
var uname=document.getElementsByName("uname");
console.log(uname);
6.创建节点、插入节点
创建节点:createElement()
* 参数:元素标签名
* 主语:document
* 返回值:新节点
*
* 插入节点 appendChild()
* 追加元素,在父节点中的最后位置追加
* 参数:要插入的节点
* 主语:父节点
* 返回值:追加的节点
*
* 插入节点insertBefore(childNode1,ChildNode2)
* 参数:
* childNode1 要插入的节点
* ChildNode2 父节点中的指定子节点
* 主语:父节点
* 返回值:返回第一个参数,要插入的节点
* 注意:ChildNode2参数的值为null,undefined,实现的是追加的效果
//创建节点
var div=document.createElement("div");
console.log(div);
div.style.width="700px";
div.style.height="100px";
div.style.background="red";
//自己创建节点追加到body中
// console.log(document.body.appendChild(div));
//创建一个p标签节点
var p=document.createElement("p");
//第一种
// p.innerHTML="今天天气有点可以~~~";
// p.innerText="今天有点热~~";
//第二种
//var text= document.createTextNode("今天是星期三");
//p.appendChild(text);
//console.log(p);
//div.appendChild(p);
//第三种
//div.innerHTML="王思聪有点帅!
"; //识别html标签结构
div.innerText="王思聪有点帅!
"; //识别文本
//把div追加到img之前 指定位置
//console.log(document.body.insertBefore(div,document.getElementById("img")));
document.body.insertBefore(div,undefined);
//document.body.insertBefore(div); 第二个参数必须得给
7.插入图片
创建图片对象有两种方式：
1.var img=document.createElement(“img”);
2.var img = new Image();
为图片src设置属性两种方式：
1.img.src=“图片路径”;
2.img.setAttribute(“src”,“图片路径”);
// 1.创建图片标签
//var img=new Image();
var img=document.createElement("img");
console.log(img);
//2.设置属性 src
//1)
// img.src="img/timg.jpg";
//2)
img.setAttribute("src","img/timg.jpg");
img.style.width="200px";
//3.插入到body中
document.body.appendChild(img);
8.间接查找节点
childNodes：所有子节点
children ： 元素节点
firstChild：返回元素的第一个子节点
flastChild：返回元素的最后一个子节点
firstElementChild：返回第一个元素子节点
lastElementChild：返回最后一个元素子节点
nextSibling：返回元素的下一个兄弟节点，通常都是文本节点，因为敲代码会换行。
previousSibling：返回元素的上一个兄弟节点通常都是文本节点，因为敲代码会换行。
nextElementSibling：上一个元素兄弟节点，返回的是元素节点。
previousElementSibling：下一个元素兄弟节点，返回的是元素节点。
parentNode：返回元素的父节点
我是p1
我是p2
我是p3
我是三哥
9.点击子节隐藏父节点
思路:
1.获取到所有的span
2.为spans它们添加一个点击事件–测试点击事件好不好使
3.找到当前被点击的这个span
4.找到当前被点击的span的父级li
5.为li标签设置display:none
// 1.获取到所有的span
var spans=document.getElementsByTagName("span");
var lis=document.getElementsByTagName("li");
//2.为spans它们添加一个点击事件--测试点击事件好不好使
/*for(var i=0;i对应着这个span的父节点li在lis中的索引
spans[i].index=i;
console.log(spans[i].index);
spans[i].function(){
console.log(this.index);
//3.找到当前被点击的这个span
lis[this.index].style.display="none";
}
}
```
```节点添加到
## 10.留言板案例
需求：点击一次提交按钮，就将input标签里的内容添加到下面的ul的li列表项中，同时要对输入框清空。每点一次提交，就创建一个li节点，然后将输入框的内容添加到li标签中，再将li节点添加到ul的最前面。
流程：
提交按钮，要为它设置一个id，用来触发函数。
进入函数后要获取input标签的内容，所以腰围input标签设置name，id 。
获取内容后要判断内容是否为空，如果为空说明没有输入，return回去。
不为空的话，要创建一个li节点，将内容添加到里li节点中。
li节点要使用insertBefore（要插入的节点，被插入的节点之前一个位置）。并且插在ul列表最前面。
11.替换节点
replaceChild(child1,child2)
使用参数1替换参数2
参数:
child1:要替换的节点
child2:被替换的节点
主语:父节点
返回值:被替换的节点
如果child1是原有的元素,相当移动
- 范冰冰
- 霍思燕
- 蔡徐坤
```
12.克隆节点、删除节点
克隆节点 cloneNode(boolean)
可以某个节点
参数:
true: 子节点也被克隆
false: 只克隆当前节点的结构,不包括子节点 默认false
主语:要克隆的节点
返回值:返回克隆的节点
注意:js代码不会被克隆
如果原节点存在id属性,手动修改新节点的id
删除节点 removeChild()
移出节点
参数: 要移出的节点
主语:父节点
返回值:返回被删除的节点
- 范冰冰
- 霍思燕
- 蔡徐坤
16.DOM 操作表单