一、DOM简介
DOM简介
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>
</title>
<style>
</style>
<script type="text/javascript">
/*宿主对象，由浏览器，运行环境为我们提供的对象，BOM对象 和 DOM对象
DOM document object model 文档对象模型
JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面
文档
-文档表示的就是整个的HTML网页文档，一个HTML网页就是一个文档
对象
- 对象表示将网页中的每一个部分，各种标签、属性、文本都转换为了一个对象
模型
-使用模型来表示对象之间的关系，这样方便我们获取对象
转换为对象之后，可以以纯面向对象的方法操作网页
*模型
*
* 节点Node，是构成我们网页的最基本的组成部分，
* 网页中的每一个部分都可以称为是一个节点。
* 比如:html标签、属性、文本、注释、整个文档等都是一个节点。
虽然都是节点，但是实际上他们的具体类型是不同的。
比如:标签我们称为元素节点、属性称为属性节点、文本称为文本节点、文档称为文档节点。
节点的类型不同，属性和方法也都不尽相同
网页中的每个部分都是一个节点
节点：Node------构成HTML文档最基本的单元
常用节点分为四类：
文档节点：整个HTML文档
元素节点：HTML文档中的标签
属性节点：元素的属性
文本节点：HTML标签中的文本内容
节点的属性：nodeName nodeType nodeValue是每个节点都有的属性
文档节点的nodeName是一个固定值 #document
nodeName nodeType nodeValue
* 文档节点 #document 9 null
* 元素节点 标签名 1 null
* 属性节点 属性名 2 null
* 文本节点 #text 3 文本内容
* 通过nodeType的值可以判断类型
*
* */
</script>
</head>
<body>
<button id="btn">我是一个按钮</button>
<script type="text/javascript">
/*浏览器已经为我们提供了文档节点对象，这个对象是window属性
可以在页面中直接使用，文档节点代表的是整个网页*/
console.log(document); //[object HTMLDocument]
/*document就是文档节点，它代表的是整个网页，通过document可以获取到网页中的
任意一个对象*/
//获取到button对象
var btn=document.getElementById("btn"); //通过id获取元素
console.log(btn); //[object HTMLButtonElement]
/*<button id="btn">我是一个按钮</button>*/
/*DOM中的对象都是和网页中的对象是一一对应的，这个btn现在就是按钮，它两是一回事*/
//修改按钮的文字
console.log(btn.innerHTML); //我是一个按钮
btn.innerHTML="T'm a Button"; //直接赋值修改
//DOM中的btn就是网页中的按钮
</script>
</body>
</html>
二、事件简介
属性 此事件发生在何时
onabort 图像的加载被中断。
onblur 元素失去焦点。
anchange 域的内容被改变
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onerror 在加载文档或图像时发生错误。
onfocus 元素获取焦点。
onkeydown 某个键盘按键被按下
onkeypress 某个健盘按健被按下并松开。
onkeyup 某个键盘按键被松开。
onload 张页面或一幅图像完成加载。
onmousedown 鼠标按钮被挤下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseup 鼠标按键被松开。
onreset 重置按纽被点击·
onresize 商口或框架被重新调整大小
onselect 文本选中。
onsubmit 确认按钮被点击。
onunload 用户退出页面。
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>
</title>
<style>
</style>
<script type="text/javascript">
</script>
</head>
<body>
<button id="btn">点我一下</button>
<script type="text/javascript">
/*浏览器加载页面的时候，是从上到下一行一行记载，
* 所以这里的<script>标签对写在body中的元素标签下下面，这样按钮会先出来，在页面加载完毕之后
* 然后再执行Js代码
* 如果写在<head>标签对里面会报错，代码会先执行，然后页面再加载，然后按钮会后出来
* 想要把js代码写在<head>标签里面，然后等body中的页面加载完毕之后再执行的解决方法：
* onload事件会在整个页面加载完毕之后再触发
* 为window绑定一个onload事件
*
* 下面的代码不会立即执行，会在整个页面加载完之后再执行
* window.onload=function(){
*
* //将js代码写在这里，然后将这个大的整体写在<head>里面的<script>标签里面
* }
* */
</script>
</body>
</html>
三、文档加载
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>
</title>
<style>
</style>
<script type="text/javascript">
/*想要把代码写在<head>标签里面，就统一把代码写在window.onload对应的函数里面
这样可以保证我们的js代码在页面加载完毕之后再执行
onload事件会在整个页面加载完成之后才触发
为window绑定一个onload事件
该事件对应的响应函数将会在页面加载完成之后执行，
这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了，
这样就不会出现获取不到DOM对象的情况
写上面的话会影响页面加载速度，所以推荐写到下面，但是差别不大。
写下面最大的好处就是好管理，方便管理
* */
window.onload=function(){
//获取id为btn的按钮
var btn=document.getElementById("btn");
//为按钮绑定一个单击响应函数
btn.onclick=function(){
alert("hello");
};
};
</script>
</head>
<body>
<button id="btn">我是一个按钮</button>
</body>
</html>
四、DOM查询
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>
</title>
<style>
</style>
<script type="text/javascript">
/*获取元素节点
通过document对象调用
1.getElementById()
通过id属性获取一个元素节点的对象
2.getElementsByTagName()
通过标签名获取一组元素节点对象
3.getElementsByName()
通过name属性来获取一组元素节点对象,（复数）主要获取表单项，
获取元素节点的子节点；
通过具体的元素节点调用（缩小了选择范围）
1.getElementsByTagName()
-方法，返回当前节点的指定标签名后代节点
2.childNodes
-属性，表示当前节点的所有子节点，都包括空白的文本节点
3.firstChild
-属性，表示当前节点的第一个子节点
4.lastChild
-属性，表示当前节点的最后一个子节点
获取父节点和兄弟节点
通过具体的节点调用
1.parentNode
-属性，表示当前节点的父节点
2.previousSibling
-属性，表示当前节点的前一个兄弟节点
3.nextSibling
-属性，表弟当前节点的后一个兄弟节点
*/
//查找#bj节点
/*遇到大量重复性代码，可以尝试将其提取为一个函数
*
* 定义一个函数，专门用来为指定元素绑定单击响应函数
* 参数idStr 要绑定单击响应函数的对象
* fun事件的回调函数，当单击元素时，该函数将会被触发
* 函数也是对象，是对象就可以作为参数*/
function myClick(idStr,fun){
var btn=document.getElementById(idStr);
btn.onclick=fun;
}
window.onload=function(){
//为id为btn01的按钮绑定一个单击响应函数
var btn01=document.getElementById("btn01");
btn01.onclick=function(){
//查找id为北京的节点
var bj=document.getElementById("bj");//这里写#bj就会报错，就什么都打印不出来
//打印bj
//innerHTML 通过这个属性可以获取到元素内部的html代码
alert(bj.innerHTML); //打印出"北京"
};
//查找所有的li节点
//为id为btn02的按钮绑定一个单击响应事件
var btn02=document.getElementById("btn02");
btn02.onclick=function(){
//查找所有li节点
//getElementsByTagName通过标签名来获取一组节点对象，Element有s
//这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
//即使查询到的元素只有一个，也会封装到数组中
var lis=document.getElementsByTagName("li");
//打印lis
// alert(lis.length); //10
//遍历lis
for(var i=0;i<lis.length;i++){
alert(lis[i].innerHTML); //innerHTML可以获得标签上的内容
}
};
//为id为btn03的按钮绑定一个单击响应函数
var btn03=document.getElementById("btn03");
btn03.onclick=function(){
//查找name=gender的所有节点
var inputs=document.getElementsByName("gender");
// alert(inputs.length); //2
for(var i=0;i<inputs.length;i++){
/*innerHTML用于获取元素内部的HTML代码的
input就是一个单标签,获取不到innerHTML
对于自结束标签，这个属性没有意义
如果需要读取元素节点属性。
直接使用元素.属性名
所有的属性都适合这个
例子：元素.id 元素.name 元素.value
注意：class属性不能采用这种方式 class是保留字
读取class属性时需要使用元素.className
getElementById（）返回的是一个元素，尽量用这个
getElementsByTagName()、getElementsByName（）返回的是一个数组
这三个都是非常常用的方法
*/
alert(inputs[i].className);
};
};
//为id为btn04的按钮绑定一个单击响应函数
//查找#city下所有li节点
var btn04=document.getElementById("btn04");
btn04.onclick=function(){
获取id为city的元素
var city=document.getElementById("city");
//查找#city下所有的li节点，缩小了查找返回
var lis=city.getElementsByTagName("li");
//alert(lis.length); //4
for(var i=0;i<lis.length;i++){
alert(lis[i].innerHTML);
}
};
//返回city下的所有子节点
var btn05=document.getElementById("btn05");
btn05.onclick=function(){
//获取city节点
var city=document.getElementById("city");
// alert(city.childNodes.length); //9
//返回#city的所有子节点
//Nodes包括所有的，文本，注释，元素都算nodes,
//childNodes属性会获取包括文本节点在内的所有节点
//根据DOM标签标签间空白也会被当成文本节点
//但是IE8没有完全实现这个标准
/*注意：在IE8及以下的浏览器中，不会将空白文本当成子节点
所以该属性在IE8中会返回4个子元素而不是其他浏览器是9个*/
var cns=city.childNodes;
// alert(cns.length);//9，包括了代码书写时候的五个换行的空白内容当成了文本节点
/* for(var i=0;i<cns.length;i++){
alert(cns[i]);
}
*/ /*children属性可以获取当前元素的所有子元素,这个属性只包括子元素，不包括文本节点
，这个属性是所有浏览器都兼容的，推荐使用！！！*/
var cns2=city.children;
alert(cns2.length); //4
};
//返回#phone的第一个子节点
var btn06=document.getElementById("btn06");
btn06.onclick=function(){
//获取id为phone的节点
var phone=document.getElementById("phone");
//返回phone的第一个子节点
// phone.childNodes[0];
//firstChild可以获取到当前元素的第一个子节点，包括空白文本节点
// var fir=phone.firstChild;
//firstElements可以获取到当前元素的第一个子元素节点，不包括文本，元素就是标签
//这个方法不建议使用，IE8及以下浏览器不兼容
var fir=phone.firstElementChild;
alert(fir.innerHTML);
};
//为id为btn07的按钮绑定一个单击响应函数
myClick("btn07",function(){
//获取id为bj的父节点
var bj=document.getElementById("bj");
//返回#bj的父节点
var pn=bj.parentNode;
/*innerText
该属性可以获取到元素内部的文本内容，它和innerHTML 类似，单不同的是
它会自动将html的标签去掉，只返回文本*/
alert(pn);
});
//返回#android的前一个兄弟节点
/*如果写两个myClick("btn08",function(){.....});
* 绑定的按钮一样，方法不一样，后面的会把前面的覆盖掉*/
myClick("btn08",function(){
var and=document.getElementById("android");
var ps=and.previousSibling;//也可能获取到空白的文本
//previousElementSibling获取前一个兄弟元素，不包括空白文本，IE8及以下不支持
//var pe=and.previousElementSiblin;
alert(ps.innerHTML);
});
//读取#username的value属性值
myClick("btn09",function(){
//获取id为username的元素
var um=document.getElementById("username");
//读取um的value属性值
//文本框中的value属性值，就是文本框中填写的内容
alert(um.value);
});
myClick("btn10",function(){
//获取id为username的元素
var um=document.getElementById("username");
//设置#username的value属性值
//设置的话直接写，属性名=属性值
um.value="你好，今天天气真不错";
});
//获取#bj的文本值
myClick("btn11",function(){
//获取id为北京的元素
var bj=document.getElementById("bj");
// alert(bj.innerText);
// alert(bj.innerHTML);如果没标签的话，这两个没什么区别
/*获取bj中的文本节点，*/
//文本节点上的文字可以用属性名nodeValue获取
alert(bj.firstChild.nodeValue); //这个方法更麻烦
});
};
</script>
</head>
<body>
<div id="total">
<div class="inner">
<p>你喜欢哪个城市？</p>
<ul id="city">
<li id="bj">北京</li>
<li >上海</li>
<li >东京</li>
<li >首尔</li>
</ul>
<br/>
<br/>
<p>你喜欢哪款单机游戏？</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
</ul>
<br/>
<br/>
<p>你的手机操作系统是？</p>
<ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
</div>
<div class="inner">
gender:
<input type="radio" name="gender" value="male"/>male
<input type="radio" name="gender" value="female"/>female
<br />
<br />
name:
<input type="text" name="name" id="username" value="abcde" />
</div>
</div>
<div id="btnList">
<div><button id="btn01">查找#bj节点</button></div>
<div><button id="btn02">查找所有li节点</button></div>
<div><button id="btn03">查找name=gender的所有节点</button></div>
<div><button id="btn04">查找#city下所有li节点</button></div>
<div><button id="btn05">查找#city下的所有子节点</button></div>
<div><button id="btn06">返回#phone的第一个子节点</button></div>
<div><button id="btn07">返回#bj的父节点</button></div>
<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
<div><button id="btn09">返回#username的value属性值</button></div>
<div><button id="btn10">设置#username的value属性值</button></div>
<div><button id="btn11">返回#bj的文本值</button></div>
</div>
</body>
</html>
五、图片切换的练习
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>
</title>
<!--难点：
1.把图片的路径存在一个数组当中
首先获取到图片数组的第一个元素，否则用document.getElementsByTagName获取到的是一个数组。
因为只能操作元素，不能操作数组。
var imgArr=["img/","img/","img/"];
2.通过用img.src的属性值来修改要显示的图片
var index
index++;/index--;
img.src=imgAtrr[index];
3.灵活设置当前图片的总张数，和当前显示的第几张图片数
获取到id为info的元素
info.innerHTML=做一个拼串，可以灵活显示。
开发思路：
功能要绑定函数，什么时候开要始功能
要绑定的按钮
-->
<style>
*{
margin:0px;
padding:0px;
}
#outer{
width:500px;
margin:50px auto;
padding:10px;
background-color: greenyellow;
/*设置内敛样式文本的居中*/
text-align: center;
background-size:cover;
}
img{
width:500px;
height:400px;
}
</style>
<script type="text/javascript">
window.onload=function(){
//获取img标签
// var img=document.getElementsByTagName("img");//这样获取到的是数组
//哪怕只有一个元素，上面这种写法获取到的也是数组
//是要获取数组的元素，而不是数组。
//下面这样的写法获取到的就是元素
var img=document.getElementsByTagName("img")[0];
//创建一个数组，用来保存图片路径
var imgArr=["img/0vfvn55rfey0vfvn55rfey.jpg","img/011b915f101bf8a801206621f7be55.jpg@3000w_1l_0o_100sh.jpg","img/u=1654698843,1250978122&fm=253&fmt=auto&app=120&f=JPEG.webp"
,"img/u=3784956362,763614624&fm=253&fmt=auto&app=120&f=JPEG.webp","img/u=4076188782,4102717595&fm=253&fmt=auto&app=138&f=JPEG.webp","img/u=2419341326,3742894269&fm=253&fmt=auto&app=120&f=JPEG.webp"];
//创建一个变量，来保存当前正在显示的图片的索引。
var index=0;
//设置提示文字
//获取id为info的标签
var info=document.getElementById("info");
/*点击按钮，切换图片*/
//获取两个按钮
var prev=document.getElementById("prev");
var next=document.getElementById("next");
//分别为两个按钮绑定单击响应函数
prev.onclick=function(){
if(index>0){
index--;
}else{
index=imgArr.length-1;
}
img.src=imgArr[index];
每次点击按钮的时候，都重新设置信息
info.innerHTML="一共有"+imgArr.length+"张图片，现在是第"+(index+1)+"张图片";
};
next.onclick=function(){
//切换图片就是修改imgd的src属性
//修改的的方法就是属性名=属性值
if(index<imgArr.length-1){
index++;
}else{
index=0;
}
img.src=imgArr[index];
//每次点击按钮的时候，都重新设置信息
info.innerHTML="一共有"+imgArr.length+"张图片，现在是第"+(index+1)+"张图片";
};
//切换图片就是修改img标签的src属性
};
</script>
</head>
<body>
<div id="outer">
<p id="info"></p>
<img src="img/011b915f101bf8a801206621f7be55.jpg@3000w_1l_0o_100sh.jpg" alt="猫">
<button id="prev">上一张</button>
<button id="next">下一张</button>
</div>
</body>
</html>
六、全选练习
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>
</title>
<style>
</style>
<script type="text/javascript">
window.onload=function(){
var items=document.getElementsByName("items");
//全选/全不选按钮
var checkedAllBox=document.getElementById("checkedAllBox");
/*全选按钮
-点击按钮以后，四个多选框全都被选中*/
var checkedAllBtn=document.getElementById("checkedAllBtn");
checkedAllBtn.onclick=function(){
//获取四个多选框items
//设置四个多选框变成选中状态
//通过多选框的checked属性可以来获取或设置多选框的选中状态
for(var i=0;i<items.length;i++){
items[i].checked=true;
}
checkedAllBox.checked=true;
};
var checkedNoBtn=document.getElementById("checkedNoBtn");
checkedNoBtn.onclick=function(){
//设置四个多选框变成不选中状态
for(var i=0;i<items.length;i++){
items[i].checked=false;
}
checkedAllBox.checked=false;
};
//反选
var checkedRevBtn=document.getElementById("checkedRevBtn");
checkedRevBtn.onclick=function(){
//将checkedAllBox设置为选中状态
checkedAllBox.checked=true;
for(var i=0;i<items.length;i++){
items[i].checked=!items[i].checked;
//判断四个多选框是否全选
//只要有一个没选中就不是
if(!items[i].checked){
//一旦进入判断，则证明不是全选状态
//将checkedAllBox设置为没选中状态
checkedAllBox.checked=false;
}
}
//在反选时也需要判断四个多选框是否全都选中
};
/*提交按钮：
点击按钮之后，将所有选中的多选框弹出*/
var sendBtn=document.getElementById("sendBtn");
sendBtn.onclick=function(){
//遍历items
for(var i=0;i<items.length;i++){
if(items[i].checked){
alert(items[i].value);
}
}
};
//全选/全不选
//当它选中时候,其余的也选中，当它取消时其余的也取消
checkedAllBox.onclick=function(){
//this===checkedAllBox
//在事件的响应函数中，响应函数是给谁绑定的this就是谁
for(var i=0;i<items.length;i++){
items[i].checked=this.checked;
}
};
//6.items
/*如果四个多选框都选中，则checkedAllBox也可以选中
如果四个多选框都没选中，则checkedBox也不应该选中*/
for(var i=0;i<items.length;i++){
items[i].onclick=function(){
//将checkedAllBox设置为选中状态
checkedAllBox.checked=true;
//判断四个多选框是否全选
for(var j=0;j<items.length;j++){
//判断四个多选框是否全选
//只要有一个没选中就不是
if(!items[j].checked){
//一旦进入判断，则证明不是全选状态
//将checkedAllBox设置为没选中状态
checkedAllBox.checked=false;
//一旦进入判断，则已经得出结果，不用再继续执行循环
break;
}
}
};
}
};
</script>
</head>
<body>
<form method="post" action="">
你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选
<br />
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="羽毛球"/>羽毛球
<input type="checkbox" name="items" value="乒乓球"/>乒乓球
<br />
<input type="button" id="checkedAllBtn" value="全 选"/>
<input type="button" id="checkedNoBtn" value="全不选"/>
<input type="button" id="checkedRevBtn" value="反选"/>
<input type="button" id="sendBtn" value="提交"/>
</form>
</body>
</html>