今天事情比较多，学习的东西比较少
第三天继续
H5新增获取自定义的方法
<body>
<div getTime="20" data-index="2" data-list-name="pig">
</div>
<script>
var div=document.querySelector('div');
console.log(div.getAttribute('getTime'));
div.setAttribute('data-time',20);
console.log(div.getAttribute('data-index'));
//dataset是一个集合里面存放了所有以data开头的自定义属性
console.log(div.dataset);
console.log(div.dataset.index);
console.log(div.dataset['index']);
//如果自定义属性有多个短横线的单词连接，采用驼峰命名法
console.log(div.dataset.listName);
console.log(div.dataset['listName']);
</script>
</body>
案例： tab栏切换布局分析（重要）
通过自定义属性，向主内容部分增加新的自定义属性，属性的值为序列号
注意：不能使用i
至于为什么呢，我也不是很清楚，只是每次都是固定的值，比如下面的代码，我上面的nav是三个，就算在function里第一步输出console.log(i)，输出的也是4，感觉 i 就是用来检测的，检测你有没有进行点击，至于点击的哪一个，它也不是很清楚，所以在onclick事件中不用nav[i]，而是使用this
今天在这个地方卡了很久，卡了有近两个小时
你们可能也会出现这里的问题，我在另一篇文章写了，点击此处跳转
<style>
*{
margin: 0;
padding: 0;
}
.red_bgc{
background-color:red;
color: white;
font-size: 18px;
font-family: STXihei;
}
.pink_bgc{
background-color:pink;
width: 400px;
height:30px;
}
td{
text-align: center;
font-size:10px;
width: 100px;
cursor: pointer;
}
.tab{
width: 400px;
}
</style>
<body>
<div class="tab">
<table class="pink_bgc" cellspacing="0">
<tr>
<td class="red_bgc">电系精灵</td>
<td>战斗精灵</td>
<td>火系精灵</td>
<td>草系精灵</td>
</tr>
</table>
<div id="main">
<div>
雷伊，帕诺星系赫尔卡星的守护神，战神联盟的领袖，创建雷霆守护局，新代电系精灵王，赛尔号大电影5的主角。赫尔卡星人改良了 赫尔卡星原本的守护者艾里克的基因，纠正了“统治”的情感，加入“保护”创造了新一代守护神 [4] 。以公认的强者的名义参加了阿瑞斯水晶争夺战，最后夺得了水晶，成为了阿瑞斯水晶承认的强者。
只有当雷雨天时，他才会出现，全身被电流所包围，尽显王者风范。掌控强大雷电之力，最终通过自身磨砺掌握了雷神之翼的超强能力
</div>
<div class="other">
盖亚是精灵界的战斗大师，战斗智商极高。对于他的身世，一直是官方没有真正填的坑。盖亚是盖亚一族的天才，领悟了石破天惊的奥义，受某种磁波影响成为战联第一个超进化的精灵，继承了力之神谕后完全体，成为了战联第一位完全体的精灵并击退兰蒂斯，后继承了战王阿尔斯兰的传承成为新一代战斗系精灵王，在这一次是战联最后一位封王，秩序之战中加入圣光联军圣化为圣战盖亚，实力非常可观。
</div>
<div class="other">
魔焰猩猩已经是一只很久以前的精灵了，在那段时光中，魔焰猩猩仅次于丽莎布布，它带给我们的是对秒杀的概念。”绝命火焰“可以秒杀大多数BOSS（比如魔狮迪露），也因为PP大于”极度冰点“，将阿克希亚淘汰出了PVE界。尽管出现了瞬杀精灵，魔焰猩猩还是以5%大于3%的优势继续被人们青睐。魔焰猩猩的优势是其它精灵无法代替的，尽管它打不过布雷兹、炎魔、九尾火狐，但它仍是永远的火系PVE之王。
</div>
<div class="other">
在《赛尔号》中，丽莎布布称得上是老精灵的楷模。因为在曾经的赛尔号中，丽莎布布以它出色的能力、优秀的技能，成为了当时的PVE之王，于2014年2月21日超进化为蒙娜丽莎（种族值640），训练她的是始祖灵兽，于2015年12月4日进化为完全体生灵之主·蒙娜丽莎（种族值670）。
</div>
</div>
</div>
<script type="text/javascript">
var nav = document.querySelector('table').querySelectorAll('td');
var main = document.querySelector('.tab').querySelector('div').querySelectorAll('div');
for(var i=0;i<nav.length;i++){
nav[i].setAttribute('index',i)
nav[i].onclick=function(){
var mds = this.getAttribute('index');
console.log(mds);
for(var j=0; j < nav.length;j++){
nav[j].className='';
main[j].className='other';
}
this.className='red_bgc';
main[mds].className='';
}
}
</script>
</body>
四.节点操作
1.为什么要学节点操作
获取元素通常使用两种方法：
1.利用DOM提供的方法获取元素
- document.getElementById()
- document.getElementByTagName()
- document.querySelector()
- 逻辑性不强
2.利用结点层级关系获取元素
- 利用父子兄节点关系获取元素
- 逻辑性强，兼容性差
- 比较简单
第一天学过节点，忘掉的可以去看看
2.结点概述
一般，节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)基本属性
- 元素节点 nodeType = 1（一般主要操作是元素节点）
- 属性节点 nodeType = 2
- 文本节点 nodeType = 3(文本节点包含文字、空格、换行等)
3.节点层级
父节点操作
<body>
<div class="firstclass">
<div class="secondclass">
<span class="thirdclass"></span>
</div>
</div>
<script>
var node = document.querySelector('.thirdclass');
var node_2= document.querySelector('.secondclass')
//通过父节点引入secondclass的标签
node.parentNode;
</script>
<body>
子节点操作
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
var ul=document.querySelector('ul');
var list = ul.querySelectorAll('li');
//通过子节点引入li,得到的子节点 包含 元素结点 文本节点等等
ul.childNodes;
//筛选所有的元素节点，删除文本节点
//方法一
for( var i=0;i<ul.childNodes.length;i++){
if(ul.childNodes[i].nodeType==1){
//元素节点nodeType为1
console.log(ul.childNodes[i]);
}
}
//方法二 parentNode.children(实际开发常用)
console.log(ul.children);
</script>
</body>
第一个子元素和最后一个子元素
获取第一个子节点
parentNode.firstChild
获取最后一个子节点
parentNode.lastChild
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
var ul=document.querySelector('ul');
//1.返回节点不管是文本节点还是元素节点
console.log(ul.firstChild);
console.log(ul.lastChild);
//2.返回第一个元素节点和最后一个元素节点(IE9以上才可使用，有兼容性问题)
console.log(ul.firstElementChild);
console.log(ul.lastElementChild);
//3.最常用的，我是不是脑残，学之前的干嘛，下面写出来感觉自己就象个弱智
console.log(ul.children[0]);
console.log(ul.children[ul.children.length-1]);
</body>
第三天结束了，今天在tab栏的切换那里问题总是搞不明白，花了两个小时，今天学的事件不算短，大概学了4个小时
继续加油
354
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
