JS作业：简易轮播图个人图析让你彻底弄懂各种节点的定义
案例1：获取div下的所有子节点，并设置背景颜色为红色，如果是p标签，设置p标签的内容为“我爱中国”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
a{text-decoration: none;}
</style>
<script>
window. onload=function(){
//用getElementsByTagName标签选择器获取div下的所有的元素节点
var ziJieDianDivShuZu =document . getElementsByTagName("div")[0].children;
//用for of遍历元素节点，用.style.backgroundcolor将每个节点的背景颜色修改为红色
for(var i of ziJieDianDivShuZu){
i.style. backgroundColor="red";}
//标签选择器可以获取div下的所有的标签，所以用标签选择器去获取div下的所有的p标签
var jieDianPShuZu=document. getElementsByTagName("div")[0].getElementsByTagName("p");
//遍历得到的p数组，让每个p内容修改为我爱中国
for(var i of jieDianPShuZu){
i.innerHTML="我爱中国";
}
}
</script>
</head>
<body>
<div>
<img src="./img/1.jpg" width="100px" height="100px">
<a href="#">a href诗书画唱超链接</a>
<p>P点赞</p>
<ul>
<li>li投币</li>
</ul>
<p>p大家好</p>
</div>
</body>
</html>
案例2:获取ul下的所有子节点，设置li的的背景颜色隔行换色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
ul{
list-style:
none;width: 666px; height: 23px; margin: 0px auto;
text-align: center;}
ul li{
float: left;width:100px ;background-color: yellow;
}
ul li a{
text-decoration: none;}
</style>
<script>
window. onload=function(){
//用标签选择器把ul等标签看作重上到下排序的数组，获取ul的下标为0的第一个的内容
var ulFirstNeiRong=document . getElementsByTagName("ul")[0];
//用.children获取所有的li：
//var liShuZu=ull.children;
//用for of等给每个li添加鼠标移入事件
var jiShuZu=ulFirstNeiRong. getElementsByClassName("jiID");
var ouShuZu=ulFirstNeiRong. getElementsByClassName("ouID");
for(var i of jiShuZu){
i.onmouseover=function(){
this. style. backgroundColor="red";}
i.onmouseout =function(){
this. style. backgroundColor="yellow";
}}
for(var i of ouShuZu){
i.onmouseover=function(){
this.style .backgroundColor="green";
}
i.onmouseout =function(){
this. style. backgroundColor="yellow";
}
}}
</script>
</head>
<body>
<ul>
<!--jiID:奇ID，ouID:偶ID-->
<li class="jiID"><a href="#">诗书画唱</a></li>
<li class="ouID"><a href="#"> UP主</a></li>
<li class="jiID"><a href="#">三连</a></li>
<li class="ouID"><a href="#">关注</a></li>
</ul>
</body>
</html>
案例3:制作一个一级菜单，声明1个div，鼠标移动到每个ul时给div赋值，有多少子节点、元素节点、属性节点和文本节点
方法一：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
ul {
list-style: none;
width: 666px;
height: 23px;
margin: 0px auto;
text-align: center;
}
ul li {
float: left;
width: 100px;
background-color: yellow;
}
ul li a {
text-decoration: none;
}
div {
width: 200px;
height: 200px;
border: 1px solid red;
margin: 0px auto;
}
</style>
<script>
window.onload = function() {
// ulFirstNeiRong: ul第一个内容
var ulFirstNeiRong = document.getElementsByTagName("ul")[0];
// divAllNeiRong: div所有内容
var divAllNeiRong = ulFirstNeiRong.nextElementSibling;
ulFirstNeiRong.onmouseover = function() {
//用.childNodes.length获取子节点数组总长度，1个长度代表1个
var ziJieDanShuZuZongChangDu = ulFirstNeiRong.childNodes.length;
//用.children.length获取元素节点数组总长度，1个长度代表1个
var yuanSuJieDianShuZuZongChangDu = ulFirstNeiRong.children.length;
//用.attributes.length获取属性节点数组总长度，1个长度代表1个
var shuXingJieDianShuZuZongChangDu = ulFirstNeiRong.attributes.length;
//用.childNodes获取文本节点数组总长度，1个长度代表1个
var wenBenJieDianShuZuZongChangDu = 0;
//先用..childNodes获取它所有的节点内容，
// 在用nodeType判断它所有节点的类型，如果是3就是文本节点
var allJieDianShuZu = ulFirstNeiRong.childNodes;
for(var i of allJieDianShuZu) {
if(i.nodeType == 3) {
wenBenJieDianShuZuZongChangDu++;
}
}
divAllNeiRong.innerHTML = "子节点" + ziJieDanShuZuZongChangDu
+ "个<br>元素节点"
+ yuanSuJieDianShuZuZongChangDu +
"个<br>属性节点" + shuXingJieDianShuZuZongChangDu + "个<br>文本节点"
+ wenBenJieDianShuZuZongChangDu + "个";
}
}
</script>
</head>
<body>
<!--若注释在ul里面也会被算入子节点，文本节点-->
<ul>
<li>
<a href="#">诗书画唱</a>
</li>
<li>
<a href="#">UP主</a>
</li>
<li>
<a href="#">三连</a>
</li>
<li>
<a href="#">关注</a>
</li>
</ul>
<div></div>
</body>
</html>
这里是只算ul以内的节点：
方法二：
案例4:轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
//用window.写一个图片的路径的数组imgShuZu
window. onload=function(){
//使用window. 这个声明表示是全局变量
window. imgShuZu=[" ./img/1.jpg","./img/2.jpg","./img/3.jpg"];
//使用window. 写一个全局变量用来控制图片的下标。indexXiaBiao：索引下标
window. indexXiaBiao=0;
window. img=document. getElementsByTagName("img")[0];
window. start=null;
//因为鼠标移入的时候应该停止轮播，所以用上clearInterval，来清除
//clearInterval() 方法可取消由 setInterval() 函数设定的定时执行操作。
//
//clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。
//
//注意: 要使用 clearInterval() 方法, 在创建执行定时操作时要使用全局变量：
window.img.onmouseover=function(){
clearInterval(window. start);}
//因为移出的时侯要继续轮播，所以用setInterval
//setInterval() 方法可按照指定的周期（以毫秒计）
//来调用函数或计算表达式。
//setInterval() 方法会不停地调用函数，直到 clearInterval()
//被调用或窗口被关闭。
//由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
//
//提示： 1000 毫秒= 1 秒。
//
//提示： 如果你只想执行一次可以使用 setTimeout() 方法。
window. img . onmouseout=function(){
//setInterval会一直执行某个内容，它有2个参数，
//第一个参数执行的是函数，第二个执行的是参数时间
window. start=setInterval(gaiBianFunction,666);
}
}
//用if判断写一个改变图片背景的函数，gaiBianFunction：改变函数。
function gaiBianFunction(){
//用indexXiaBiao用来控制数组的下标， 如果大于2，下标赋值为0，达到循环的效果
if (window. indexXiaBiao<=2){
indexXiaBiao++;
}
//下面用的是if不是else if，因为用了else后第一个if中的内容
//会在下标大于2时不执行，但为了循环而两个if并列用，
//第二个下标为0后又会回到第一个if，
//第一个if下标大于2时会到第二个if中去
if(window. indexXiaBiao>2){
indexXiaBiao=0;
}
window. img. src=window. imgShuZu [window. indexXiaBiao];
}
</script>
</head>
<body>
<img src="./img/1.jpg" width="666px" height="666px" />
</body>
</html>
我写的注释几乎都有我自己尝试，思考，总结的助于理解的内容：
扩展：
