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><!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>