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类名。还要使用循环遍历，每遍历一次要重新设置初值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
text-align: center;
height:400px;
line-height: 400px;
}
.heart1{
font-size: 16px;
color: red;
}
.heart2{
font-size: 32px;
color: green;
}
.heart3{
font-size: 64px;
color: yellow;
}
.heart4{
font-size: 128px;
color: deeppink;
}
.heart5{
font-size: 256px;
color: deepskyblue;
}
</style>
</head>
<body>
<div id="box">❤</div>
<script>
var div=document.getElementById("box");
i=1;
setInterval(function(){
div.className="heart"+i;
i++;
if(i==6){
i=1;
}
},200);
</script>
</body>
</html>
3.历史记录
要实现访问别的页面，浏览器会留下历史记录。模拟浏览器进入下一页，返回上一页摸操作。主要用到的方法：
window.history.forward(); 表示向前
window.history.back();表示回退
window.history.go(数字);括号里正数表示前进（是多少前进多少页），负数表示后退，是多少后退多少页。
<script>
var btn1=document.getElementById("btn1");
var btn2=document.getElementById("btn2");
btn1.function(){
window.history.forward();
};
btn2.function(){
window.history.back();
};
btn1.function(){
window.history.go(-1);
};
btn2.function(){
window.history.go(-2);
btn.function(){
window.history.go(1);
}
</script>
4.位置
当我们打开网页时，可以进行刷新，跳转，修改标题。
下面来模拟刷新操作。
用到一下方法：
wndow.location.href = “网址”;这个可以后退。
window.location.replace = “网址”;这个不可后退。
document.title=prompt（“修改标题”）;返回的是你修改的内容。
<script>
/*
location 对象的属性href：设置或返回完整的 URL
location 对象的方法
reload()：重新加载当前文档。
replace()：用新的文档替换当前文档。
*/
var ref=document.getElementById("ref");
var jump=document.getElementById("jump");
var title=document.getElementById("title");
ref.function(){
window.location.reload();
};
jump.function(){
/*可以后退
console.log(window.location.href);
window.location.href="http://www.baidu.com";*/
//不能后退
window.location.replace("http://www.shsxt.com");
};
title.function(){
console.log(document.title);
var str=prompt("请输入要修改的标题");
document.title=str;
};
</script>
```
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="<p>王思聪有点帅!</p>"; //识别html标签结构
div.innerText="<p>王思聪有点帅!</p>"; //识别文本
//把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：返回元素的父节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<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>
</body>
</html>
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<spans.length;i++){
spans[i].function(){
//3.找到当前被点击的这个span
//console.log(this); /!*被点击的span对象*!/
this.parentNode.style.display="none";
}
}*/
for(var i=0;i<spans.length;i++){
//给每一个span自定义一个属性 index,存储的是这个span的索引-->对应着这个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是原有的元素,相当移动
<body>
<ul>
<li>范冰冰</li>
<li>霍思燕</li>
<li>蔡徐坤</li>
</ul>
<input type="button" id="btn" value="替换">
<script>
/*
替换节点 replaceChild(child1,child2)
使用参数1替换参数2
参数:
child1:要替换的节点
child2:被替换的节点
主语:父节点
返回值:被替换的节点
如果child1是原有的元素,相当移动
*/
var ul=document.getElementsByTagName("ul")[0];
var li2=document.getElementsByTagName("li")[2];
var li0=document.getElementsByTagName("li")[0];
var btn=document.getElementById("btn");
//创建一个新的li节点
var li=document.createElement("li");
li.innerHTML="大s";
btn.function(){
// ul.replaceChild(li,li2);
console.log(ul.replaceChild(li0,li2));
};
</script>
</body>```
12.克隆节点、删除节点
克隆节点 cloneNode(boolean)
可以某个节点
参数:
true: 子节点也被克隆
false: 只克隆当前节点的结构,不包括子节点 默认false
主语:要克隆的节点
返回值:返回克隆的节点
注意:js代码不会被克隆
如果原节点存在id属性,手动修改新节点的id
删除节点 removeChild()
移出节点
参数: 要移出的节点
主语:父节点
返回值:返回被删除的节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#ul{
color: red;
}
</style>
</head>
<body>
<ul id="ul">
<li>范冰冰</li>
<li>霍思燕</li>
<li>蔡徐坤</li>
</ul>
<input type="button" id="btn" value="克隆">
<input type="button" id="btn2" value="删除">
<script>
/*
克隆节点 cloneNode(boolean)
可以某个节点
参数:
true: 子节点也被克隆
false: 只克隆当前节点的结构,不包括子节点 默认false
主语:要克隆的节点
返回值:返回克隆的节点
注意:js代码不会被克隆
如果原节点存在id属性,手动修改新节点的id
删除节点 removeChild()
移出节点
参数: 要移出的节点
主语:父节点
返回值:返回被删除的节点
*/
var ul=document.getElementsByTagName("ul")[0];
var btn=document.getElementById("btn");
var btn2=document.getElementById("btn2");
var li2=document.getElementsByTagName("li")[2];
ul.function(){
ul.style.background="yellow";
};
btn.function(){
var newNode=ul.cloneNode(true);
console.log(document.body.appendChild(newNode));
};
btn2.function(){
console.log(ul.removeChild(li2));
};
</script>
</body>
</html>
16.DOM 操作表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="">
<p>
用户名: <input type="text" name="username" value="zhangsan">
</p>
<p>密码: <input type="pwd" name="pwd"></p>
<p>
性别: <input type="radio" name="sex" value="nan" ><span>男</span>
<input type="radio" name="sex" value="nv" checked><span>女</span>
</p>
<p>
爱好: <input type="checkbox" name="interest" value="singing"> 唱歌
<input type="checkbox" name="interest" value="dancing"> 跳舞
<input type="checkbox" name="interest" value="rap"> 唱rap
</p>
家乡: <select name="area" id="">
<option value="hegang">鹤岗</option>
<option value="tongling">铜陵</option>
<option value="yancheng" selected>盐城</option>
</select>
<p>
<input type="submit">
<input type="reset" value="重置">
<input type="button" value="按钮" name="btn">
</p>
</form>
<script>
/*
* 表单元素:
* 都可以根据dom获取节点的方式获取
* 特殊获取方式:form节点.name
*
* 表单元素时间:
* onchange 内容有改变出发事件
* oninput 内容有输入出发事件
*
* form事件
* onsubmit()
* onreset()
*
* form方法
* submit()
* reset()
* */
var form=document.getElementsByTagName("form")[0];
console.log(form.username.value);
console.log(form.sex.value); //数组
var sexs=form.sex;
//遍历所有性别节点
for(var i=0;i<sexs.length;i++){
if(sexs[i].checked){
sexs[i].nextElementSibling.style.color="red";
}
}
//select
console.log("select的值:"+form.area.value);
console.log(form.area.options[0],form.area.options[0].selectedIndex);
console.log(form.area.selectedIndex); //被选中的options的索引
form.username.function(){
console.log("开始输入内容啦");
};
//失焦+内容有改变才触发
form.pwd.function(){
console.log("内容改变了");
};
form.function(){
console.log("表单要提交了");
};
form.function(){
console.log("重置了");
};
form.btn.function(){
console.log("做好准备,我要提交了");
// form.submit();
form.reset();
}
</script>
</body>
</html>
扫一扫
450
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
