1.获取元素属性值通过：element.属性，获取自定义属性值：element.getAttribute('属性')
<div getTime="20" data-index="1" data-list-name="andy"></div>
<!-- 上面的getTime是自定义属性，我们不能通过div.getTime进行获取 -->
<script type="text/javascript">
var div = document.querySelector('div');
console.log(div.getTime);
// 因为这个是自定义属性，通过上面的方法无法进行获取
console.log(div.getAttribute('getTime'))
</script>
2.修改元素 增加一个指定名称和值的新属性，或者把一个现有属性设定为指定的值 elementNode.setAttribute(name,value)
// 增加一个指定名称和值的新属性，或者把一个现有属性设定为指定的值
// elementNode.setAttribute(name,value)
div.setAttribute('data-index','2')
//这个是在div里面创建一个data-index 并且将他的值赋值为2
补充：1）H5 设置的自定义属性 H5 定义的 以 data-开头作为属性名并赋值的方式 肯定是自定义属性
<div getTime="20" data-index="1" data-list-name="andy"></div>
<!-- 这种方式设置的属性，我们可以使用getAttribute来获取 主要掌握这种方式进行获取后面的获取方式作为参考就可以 这种方式不存在兼容性的问题 -->
<script type="text/javascript">
// 获取自定义属性的值 ，
// 1）这个是考虑兼容性的获取方式 getAttribute进行获取就可以了
console.log(div.getAttribute('data-index'))
// 2）H5新增的获取自定义属性值得方法 dataset 有严重的兼容性问题
// 该方法在获取自定义属性名的时候，是不需要加上data，直接跟上data后面的属性名就可以，但是当名字的连接符号大于2的时候，后面的属性名采取的是驼峰命名写在后面，进行获取数值
console.log(div.dataset)
// dataset 是一个集合 里面存放的是所有以data开头的自定义属性
console.log(div.dataset.index);
// 这个是取出data对象里面的index属性
console.log(div.dataset['index']);
// 调用属性还有一种方法 对象名['属性名']
注意点：获取 data-list-name 的属性值得时候，书写方法的不同:
// 获取 data-list-name 的属性值得时候，书写方法的不同
console.log(div.getAttribute('data-list-name'));
// 这种是可以直接获取data-list-name的属性值
console.log(div.dataset.listName);
console.log(div.dataset['listName']);
// 这种方式获取的时候，后面的属性名是将原来的连接符进行删除，然后后面的属性名采取的是驼峰命名法，
tab栏切换案例 布局分析：
1.tab栏切换分为两个大模块
2.上面的模块选项卡，点击某一个，当前这一个底色变为pink色，其余的颜色不变（排他思想）修改类名的方式
3.下面的模块内容，会跟随上面选项卡变化。所以下面模块的变化写到点击事件里面。
4.规律，下面的模块显示内容和上面的选项卡内容一一对应，相匹配
5.核心思路：给上面的tab_list里面的所有li添加自定义属性，属性值从0开始编号。
6.当我们点击tab_list里面的某个li，让tab_list里面对应序号的内容显示，其余隐藏（排他思想）。
重点：还是排他思想的理解和使用
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.tab {
width: 1000px;
margin: 100px auto;
}
.tab_list {
background-color: #ccc;
}
.current {
background-color: pink;
}
ul {
height: 50px;
line-height: 50px;
text-align: center;
display: flex;
}
ul>li {
float: left;
flex: 1;
}
.item {
display: none;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价(50000)</li>
<li>手机社区</li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display: block;">
商品介绍模块内容
</div>
<div class="item">
规格与包装模块内容
</div>
<div class="item">
售后保障模块内容
</div>
<div class="item">
商品评价模块内容
</div>
<div class="item">
手机社区模块内容
</div>
</div>
</div>
<script>
// 1）获取元素 现在需要获取的是上面所有的li标签
var lis = document.querySelector('.tab_list').querySelectorAll('li');
var items = document.querySelectorAll('.item')
// console.log(lis);
// console.log(items);
// 通过循环给里面的每一个li 添加点击事件
// 实现了上面点击某个选项卡，该选项卡变色，其他的选项卡不变色
for (var i = 0; i < lis.length; i++) {
lis[i].setAttribute('index', i)
// 创建一个自定义变量，对lis里面的属性值进行编号
// 这里面的 i 是索引编号，给index 赋值的时候不需要加上索引号，加上索引号就变成字符，就无法获取前面i的数值
lis[i].onclick = function() {
// 排他思想的使用：首先将他们的颜色进行去除，然后点击某一个li的时候，该li变换颜色为pink色
for (var i = 0; i < lis.length; i++) {
lis[i].className = '';
}
this.className = 'current';
// 2.当我们点击某一个选项卡，底下的对应内容会随着变化 下面的显示内容模块的制作
var index = this.getAttribute('index');
// console.log(index);
//排他思想的使用：点击某一个 tb_list，就显示对应底下的li标签的内容，但是其他的li标签的内容就进行隐藏，不显示
// 排他的思想就是干掉其他人，只留下自己
for (var i = 0; i < items.length; i++) {
// 这里是当用户没有进行点击时，所有的元素保持当前的显示情况，不进行变化 这里是让底下的内容不显示
items[i].style.display = '';
}
// 当点击某一个li时i，该li对应的内容进行显现
items[index].style.display = 'block';
}
}
</script>tab栏切换下方的图片（解决思路和方法基本相同）
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.tab {
width: 1000px;
margin: 100px auto;
}
.tab_list {
background-color: #ccc;
}
.current {
background-color: pink;
}
ul {
height: 50px;
line-height: 50px;
text-align: center;
display: flex;
}
ul>li {
float: left;
flex: 1;
}
.item {
display: none;
}
.item>img{
width: 1000px;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">所</li>
<li>见</li>
<li>即</li>
<li>所</li>
<li>得</li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display: block;">
<img src="image/1.jpg" alt="">
</div>
<div class="item">
<img src="image/2.jpg" alt="">
</div>
<div class="item">
<img src="image/3.jpg" alt="">
</div>
<div class="item">
<img src="image/4.jpg" alt="">
</div>
<div class="item">
<img src="image/5.jpg" alt="">
</div>
</div>
</div>
</body><script>
// 1）获取元素 获取顶部的所有li标签
var lis = document.querySelector('.tab_list').querySelectorAll('li');
var items = document.querySelectorAll('.item');
// console.log(lis);
// console.log(items);
// 1)给上面的每一个选项卡添加一个点击事件，因为是给所有的选项卡进行添加，所以需要用到for循环给每一个选项卡添加
for(var i = 0 ; i<lis.length ; i++){
lis[i].setAttribute('index',i);
// 创建一个自定义变量，对lis里面的属性值进行编号
// 这里面的 i 是索引编号，给index 赋值的时候不需要加上索引号，加上索引号就变成字符，就无法获取前面i的数值
// 给每一个选项卡都添加点击事件
lis[i].onclick = function(){
// 这里考虑的是排他思想的使用，当点击之后将其他选项卡的颜色去除掉，只保留被点击的选项卡的颜色
for(var i = 0 ; i<lis.length ; i++){
lis[i].className = '';
}
this.className='current';
//2) 下面的选项卡所显示的内容，与用户点击的选项卡所对应，这里就需要用到一个变量，让这个变量与用户点击选项卡之后，解决两者之间的匹配问题,这里就需要给选项卡进行编号
// 获取当前点击选项卡的index 的属性值
var index = this.getAttribute('index');
console.log(index);
// 这里使用的也是排他思想的使用，当用户点击选项卡的时候，选项卡对应的内容显现出来，没有被点击的内容进行隐藏，不显示在页面之上，所以这里也需要对下面选项卡对应的内容进行遍历
for(var i=0 ; i<items.length ; i++){
// 这里是当用户没有进行点击时，所有的元素保持当前的显示情况，不进行变化 相当于让底下的内容不显示出来
items[i].style.display ='none';
}
// 当用户点击的时候，让用户点击选项卡所对应的内容显示出来
items[index].style.display= 'block';
}
}
</script>
3282
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
